I have a window with tab control and number of pages - tab items. Each tab item has same grid layout - 6 rows and 4 columns. Now, each tab item contains grid with row and column definitions, so almost half of XAML is definition of grids.
How can I define this grid in one place and reuse that definition in my application? Template? User control?
Besides 6x4, I have only two more grid dimensions that repeat: 8x4 and 6x6.
Edit:
Forgot to mention: controls in grid are different for each tab. I just want to have grid defined once in some resource so that I can reuse them on different tab pages. Now XAML looks like this:
<TabControl> <TabItem Header="Property"> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <!-- some controls here --> </Grid> </TabItem> <TabItem Header="Style"> <Grid > <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <!-- some controls here --> </Grid> </TabItem> ... and this repeats for several more tab items </TabControl>
This grid definition repeats for each tab item on the form. It annoys me that half of XAML is grid definition.
Is there a way to define this grid at one place and then reuse that definition?
First Method: By typing XAML CodeRowDefinitions property and a ColumnDefinition Element for each column inside the Grid. ColumnDefinitions property. By default, GridLines are invisible. For showing the GridLines, set the ShowGridLines property of the Grid to True.
A GridSplitter is a divider that divides a Grid into two sections. A GridSplitter allows us to resize rows or columns in a Grid by dragging the GridSplitter Bar. An example of a GridSplitter is the Windows Explorer.
You can span across multiple rows and columns using the Grid. RowSpan and Grid. ColumnSpan attached properties. The default value for both these properties is 1. The Grid will attempt to assign as many row spans or column spans as it can up to the amount specified by the Grid.
A Grid Panel provides a flexible area which consists of rows and columns. In a Grid, child elements can be arranged in tabular form. Elements can be added to any specific row and column by using Grid.Row and Grid.Column properties. By default, a Grid panel is created with one row and one column.
The best way in my opinion would be to use ItemsControl
with an ItemsPanelTemplate
, since you need a container for multiple items:
<FrameworkElement.Resources> <Style x:Key="GridItemsStyle" TargetType="ItemsControl"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style> </FrameworkElement.Resources> <TabControl> <TabItem> <ItemsControl Style="{StaticResource GridItemsStyle}"> <TextBlock Grid.Row="1" Text="R1" /> <TextBlock Grid.Column="1" Text="C1" /> </ItemsControl> </TabItem> <TabItem> <ItemsControl Style="{StaticResource GridItemsStyle}"> <TextBlock Grid.Row="2" Text="R2" /> <TextBlock Grid.Column="2" Text="C2" /> </ItemsControl> </TabItem> </TabControl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With