如何创建可重复使用的WPF网格布局 [英] How to create reusable WPF grid layout

问题描述

我有一个带有选项卡控件和页面数量的窗口 - 选项卡项目。每个标签项目具有相同的网格布局 - 6行4列。现在，每个选项卡项都包含具有行和列定义的网格，因此几乎一半的XAML都是网格的定义。

如何在一个地方定义这个网格并在我的应用程序中重用该定义？模板？用户控制？

除了6x4之外，我只有两个网格尺寸可以重复使用：8x4和6x6。

编辑：

忘了提及：网格中的控件对于每个选项卡都不相同。我只想在一些资源中定义一次网格，以便我可以在不同的标签页上重复使用它们。现在XAML看起来像这样：

 < TabControl> 
< TabItem Header =Property> 
<网格> 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< /Grid.ColumnDefinitions> 
<！ - 这里的一些控件 - > 
< / Grid> 
< / TabItem> 
< TabItem Header =Style> 
<网格> 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< /Grid.ColumnDefinitions> 
<！ - 这里的一些控件 - > 
< / Grid> 
< / TabItem> 
 
 ...并重复多个选项卡项目
 
< / TabControl> 
  

这个网格定义会重复表单上的每个选项卡项目。它让我很烦恼XAML的一半是网格定义。

有没有一种方法可以在一个地方定义这个网格，然后重用这个定义？ 解决方案

在我看来，最好的方法是使用 ItemsControl 和 ItemsPanelTemplate ，因为你需要多个物品的容器：

 < FrameworkElement.Resources> 
< Style x：Key =GridItemsStyle
 TargetType =ItemsControl> 
< Setter Property =ItemsPanel> 
< Setter.Value> 
< ItemsPanelTemplate> 
<网格> 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< /Grid.ColumnDefinitions> 
< / Grid> 
< / ItemsPanelTemplate> 
 < / Setter> 
< / style> 
< /FrameworkElement.Resources> 
< TabControl> 
< TabItem> 
< ItemsControl Style ={StaticResource GridItemsStyle}> 
< TextBlock Grid.Row =1Text =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> 
  

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?

解决方案

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>

这篇关于如何创建可重复使用的WPF网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！