Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create reusable WPF grid layout

Tags:

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?

like image 383
zendar Avatar asked May 21 '10 16:05

zendar


People also ask

How do I add a grid in WPF?

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.

What is grid splitter in WPF?

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.

What is grid RowSpan WPF?

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.

What is Grid panel WPF?

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.


1 Answers

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> 
like image 126
Eli Arbel Avatar answered Sep 30 '22 10:09

Eli Arbel