1 - 您可以在网格定义中添加行和列：

Question

我正在通过WPF构建网格，它运行良好。我需要在网格上方添加一行，一个条或一些东西，它们上面会有几个文本项，将由代码填充。我一直在使用工具，我似乎无法弄清楚如何将另一个面板放在我现有（和工作）网格之上。这是我的代码：

<Window x:Class="GridWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
    <Window.Resources>
        <DataTemplate x:Key="DataTemplate_2">
            <Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
        </DataTemplate>
        <DataTemplate x:Key="DataTemplate_1">
            <ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </Window.Resources>
    <Grid Name="GridBoard" ShowGridLines="True">
        <ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
    </Grid>
</Window>

GridItems由一个锯齿状数组填充，并显示正常。我只需要在它上面放几个文本对象，无论是盒子，还是只是一个适合网格宽度的水平面板。

Answer 1

可能最简单的选择是添加包装器Grid并将内部Grid放在第二行。所以，你将有第一行（第0行）来放置你需要的任何东西。

<Window x:Class="GridWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
<Window.Resources>
    <DataTemplate x:Key="DataTemplate_2">
        <Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
    </DataTemplate>
    <DataTemplate x:Key="DataTemplate_1">
        <ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </DataTemplate>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
        <!-- WHATEVER YOU NEED -->
    </Grid>

    <Grid Name="GridBoard" ShowGridLines="True" Grid.Row="1">
        <ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
    </Grid>
</Grid>

Answer 2

我不知道您对输出的期望是什么，但您可以嵌套您的＆＃34; GridBoard＆＃34; Grid在另一个Grid内。新的外部Grid定义了两行，在第一行中，您可以放置您的框或任何您喜欢的内容。例如，这可能是这样的：

<Window x:Class="GridWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Board" SizeToContent="WidthAndHeight" Height="Auto" Width="Auto">
    <Window.Resources>
        <DataTemplate x:Key="DataTemplate_2">
            <Button Content="{Binding}" Height="25" Width="25" Margin="0,0,0,0"/>
        </DataTemplate>
        <DataTemplate x:Key="DataTemplate_1">
            <ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_2}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid Grid.Row="0">
        <TextBlock Text="Put something here ..." />
      </Grid>
      <Grid Grid.Row="1" Name="GridBoard" ShowGridLines="True">
          <ItemsControl x:Name="GridItems" ItemTemplate="{DynamicResource DataTemplate_1}"/>
      </Grid>
    </Grid>
</Window>

请注意，您可以对外部Grid的第一行的内容使用任何元素。这取决于您的实际需求。在此示例中，我使用了另一个Grid，其中包含一个TextBlock。

Answer 3

有几种方法可以实现它。

1 - 您可以在网格定义中添加行和列：

<Grid.ColumnDefinitions>
    <ColumnDefinition width="*" />
    <ColumnDefinition width="*" />
    <ColumnDefinition width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

然后您可以为每列分配“标题”，如下所示：

<TextBlock ... Grid.Column="0" />
<TextBlock ... Grid.Column="1" />
<TextBlock ... Grid.Column="2" />

将ItemsControl放在第二行：

<ItemsControl ... Grid.Row="1" Grid.ColumnSpan="3" />

在您的情况下可能会或可能不会起作用的半合作方式。如果不看DataTemplate，就无从知晓。

2 - StackPanel位于顶部，边距应用于ItemsControl

您可以使用类似的半解决方案 - 将ItemsControl的上边距设置为固定值，如下所示：

<ItemsControl ... Margin="2,48,2,2" />

并在网格中添加StackPanel：

<StackPanel Height="48" VerticalAlignment="Top">
    <TextBlock Text="First Header" Width="300" />
    ...
</StackPanel>

我相信你明白了。

3 - 使用GridView -RECOMMENDED -

但这需要您将ItemsControl更改为ListView。

Here是一个关于GridViews for WPF的精心编写的教程。当然，它可能不是你想要的，但又一次 - 不知道你想要呈现什么，很难找到最佳解决方案。

在项目网格上方添加文本行

3 个答案:

1 - 您可以在网格定义中添加行和列：

2 - StackPanel位于顶部，边距应用于ItemsControl

3 - 使用GridView -RECOMMENDED -