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 }); }
By default the XAML code contains a grid panel, in which we have to use other controls. The grid control can be changed if we want. The columns of a grid are of fixed size, if we are in running mode. The size can be changed during the programming session by the programmer, otherwise not.
Grid splitter is a control which provides the functionality of resizing the columns in running mode, by the user itself. The following code will place a splitter in first column to be resizable:
Here above HorizontalAlignment property decides, on which two columns you want to resize. When it is left, the splitter will be between first and second column from the left side and if it is right, splitter will be between first and first column from the right side.
If your grid has more than one row, we can set the RowSpan property to specify the no. of rows, till where we want to split the column.
ResizeBehaviour property specifies, how the columns are resizing with some in-built values i.e. CurrentAndNext, PreviousAndNext and 2 more.
ResizeDirection property is used to determine whether the rows are resizing or columns. All the common properties are also usable like height, width, margin and etc.
Grid splitter is a control which provides the functionality of resizing the columns in running mode, by the user itself. The following code will place a splitter in first column to be resizable:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" ShowsPreview="True" HorizontalAlignment="Left"
VerticalAlignment="Stretch" Background="Black" Width="2" >
</GridSplitter>
<Label Grid.Column="0" Content="Column 1"/>
<Label Grid.Column="1" Content="Column 2"/>
<Label Grid.Column="2" Content="Column 3"/>
</Grid>
It will show a splitter between first and second column as in following image:<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" ShowsPreview="True" HorizontalAlignment="Left"
VerticalAlignment="Stretch" Background="Black" Width="2" >
</GridSplitter>
<Label Grid.Column="0" Content="Column 1"/>
<Label Grid.Column="1" Content="Column 2"/>
<Label Grid.Column="2" Content="Column 3"/>
</Grid>
Here above HorizontalAlignment property decides, on which two columns you want to resize. When it is left, the splitter will be between first and second column from the left side and if it is right, splitter will be between first and first column from the right side.
If your grid has more than one row, we can set the RowSpan property to specify the no. of rows, till where we want to split the column.
ResizeBehaviour property specifies, how the columns are resizing with some in-built values i.e. CurrentAndNext, PreviousAndNext and 2 more.
ResizeDirection property is used to determine whether the rows are resizing or columns. All the common properties are also usable like height, width, margin and etc.
Comments
Post a Comment