I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
In our previous post we have set Height and Width properties of an element, now we will set the next size related properties i.e. Margin and Padding. Margin controls how much extra space gets placed around the outside edges of the element, whereas padding controls around the inside edges of the element.
Margin and Padding can be assign in following simple ways:
Varying the values of these margins and paddings, we can measure the changes. If one want to use all these margins through code behind then we have to use Thickness class like the below code:
Alignments and Height & Width
Margin and Padding can be assign in following simple ways:
- Margin = "10", same margin of all four sides.
- Margin = "10,5", 10 for left & right, 5 for top & bottom.
- Margin = "10,5,10,5", for left, top, right and bottom respectively.
<StackPanel Orientation="Horizontal">
<Button Margin="10">Button 1</Button>
<Button Margin="20,5">Button 2</Button>
<Button Margin="20,15,20,15">Button 3</Button>
</StackPanel>
As padding controls around the inside edges of the element, I have used a border across each button:<Button Margin="10">Button 1</Button>
<Button Margin="20,5">Button 2</Button>
<Button Margin="20,15,20,15">Button 3</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="60">
<Border Background="Aqua" BorderThickness="2">
<Button Padding="10">Button 1</Button>
</Border>
<Border Background="Aqua">
<Button Padding="10,15">Button 2</Button>
</Border>
<Border Background="Aqua">
<Button Padding="20,15,20,15">Button 3</Button>
</Border>
</StackPanel>
The effect of padding will look like in the following screenshot:<Border Background="Aqua" BorderThickness="2">
<Button Padding="10">Button 1</Button>
</Border>
<Border Background="Aqua">
<Button Padding="10,15">Button 2</Button>
</Border>
<Border Background="Aqua">
<Button Padding="20,15,20,15">Button 3</Button>
</Border>
</StackPanel>
Varying the values of these margins and paddings, we can measure the changes. If one want to use all these margins through code behind then we have to use Thickness class like the below code:
Button button1 = new Button();
button1.Margin = new Thickness(10);
button1.Margin = new Thickness(20, 15, 20, 15);
As we can see that either we can use a single value or all the four values to use margin property of an element. There is no option to use the second type i.e. the one for left & right and one for top & bottom.button1.Margin = new Thickness(10);
button1.Margin = new Thickness(20, 15, 20, 15);
Alignments and Height & Width
Comments
Post a Comment