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

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

我不知道您希望输出是什么样子，但您可以将 "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.

Answer 2

可能最简单的选择是添加包装器网格并将内部网格放在第二行。因此，您将在第一行（第 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 3

有几种方法可以实现。

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

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

然后你可以将 'headers' 分配给每一列，就像这样：

<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 的一篇写得很好的教程。诚然，它可能不是您要找的东西，但同样 - 不知道您要展示的是什么，很难找到最佳解决方案。

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

Add row of text above a grid of items

c#

wpf

grid

panel

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

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

3 - 使用 GridView -推荐 -