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

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

有几种方法可以实现它。

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 -推荐-

不过，这需要您将 ItemsControl 更改为 ListView。

Here 是一篇关于 WPF 的 GridViews 的精心编写的教程。诚然，它可能不是您要寻找的东西，但同样 - 在不知道您要呈现什么的情况下，很难找到最佳解决方案。

Answer 3

我不知道你期望的输出是什么样的，但你可以将你的“GridBoard”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。