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

问题描述

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

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?

除了 6x4，我只有两个重复的网格尺寸:8x4 和 6x6.

Besides 6x4, I have only two more grid dimensions that repeat: 8x4 and 6x6.

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

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>

此网格定义对表单上的每个选项卡项重复.令我烦恼的是 XAML 的一半是网格定义.

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?

推荐答案

我认为最好的方法是将 ItemsControl 与 ItemsPanelTemplate 一起使用，因为您需要一个多个项目的容器:

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屋！