带有静态标题的 ItemsControl [英] ItemsControl with static header

问题描述

我想我的目标很简单，但似乎无法实现.

I think I have a pretty simple goal but cant seem to reach it.

我想要实现的只是有一个带有标题的 ItemsControl(因为我不想要列表的选择功能).最好是静态标头.

All I want to achieve is to have a ItemsControl (because I don't want the selection functionality of a list) with a header. Preferably a static header.

目前我正在使用网格作为标题，然后将该网格复制到 ItemsControl 的 ItemTemplate (DataTemple) 中，然后将它们放在网格中的另一个之上.它有点工作，但它并不总是很好地排列等.

Currently I'm using a grid for the header and then copying that grid into the ItemTemplate (DataTemple) of the ItemsControl and then placing them one above the other in a grid. It kinda works but its it doesn't always line up nicely etc.

然后我发现了 HeaderedItemsControl，我认为这是一个绝妙的主意，但无法让它工作，它根本不显示标题.我尝试了以下方法；

I then found the HeaderedItemsControl which I thought was a brilliant idea but cant get it to work, it just doesn't show the header at all. I have tried the following;

• 只需在 Xaml 的标题"中输入文本
• 在 ItemsControl.Header 标签中放置带有静态文本的 TextBlocks 网格
• 将网格放置在 HeaderTemplate (Datatemplate) 中并将其绑定到一个简单的对象

在将它移入生产应用程序之前，我正在一个小项目中在 Blend 中完成所有这些工作，而且我只是使用我创建的一个简单示例数据源.

I'm doing this all in Blend in a small project before moving it into the production app and I'm just using a simple sample data source which I created.

我可能在这里完全错过了船，但任何帮助将不胜感激.

I might be missing the boat completely here but any help would be appreciated.

我目前的代码如下，首先是我的HeaderedItemsControl

My current code is as follows, first is my HeaderedItemsControl

<HeaderedItemsControl Header="HeaderedItemsControl"  
        ItemsSource="{Binding Collection, Mode=Default}" 
        ItemTemplate="{DynamicResource ItemsControlDataTemplate}" 
        HeaderTemplate="{DynamicResource ItemsControlHeaderDataTemplate}"/>

然后我有一个按预期工作的 ItemTemple

then I've got a ItemTemple which works as expected

<DataTemplate x:Key="ItemsControlDataTemplate">
        <Grid d:DesignWidth="268">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.754*"/>
                <ColumnDefinition Width="0.246*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Property1, Mode=Default}" TextWrapping="Wrap" d:LayoutOverrides="Height" HorizontalAlignment="Stretch" Margin="0" />
            <TextBlock Text="{Binding Property2, Mode=Default}" TextWrapping="Wrap" d:LayoutOverrides="Height" Grid.Column="1" HorizontalAlignment="Left" Margin="0" />
        </Grid>
    </DataTemplate>

然后是公然反对其职业道德的标题，我已经尝试使用绑定和 TextBlock.Text 属性中的纯文本

and then the header which is defiantly opposing its work ethic, I've tried it with binding and with just plain text in the TextBlock.Text property

<DataTemplate x:Key="ItemsControlHeaderDataTemplate">
        <Grid d:DesignWidth="268">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.754*"/>
                <ColumnDefinition Width="0.246*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Header.Header1, Mode=Default, Source={StaticResource SampleDataSource6}}" TextWrapping="Wrap" HorizontalAlignment="Stretch" Margin="0"/>
            <TextBlock Text="{Binding Header.Header2, Mode=Default, Source={StaticResource SampleDataSource6}}" TextWrapping="Wrap" d:LayoutOverrides="Height" Grid.Column="1" HorizontalAlignment="Left" Margin="0"/>
        </Grid>
    </DataTemplate>

推荐答案

HeaderedItemsControl 没有默认样式，因此它只是使用基础 ItemsControl 类中的模板，它不会呈现任何标题.它仅被框架用作 MenuItem、ToolBar 和 TreeViewItem 的基类，它们定义了自己的模板.您可以创建自己的模板，其中包含标题的 ContentPresenter:

HeaderedItemsControl doesn't have a default style, so it's just using the template from the base ItemsControl class, which does not render any Header. It is only used by the framework as the base class for MenuItem, ToolBar, and TreeViewItem, which define their own templates. You could create your own template that includes a ContentPresenter for the header:

<HeaderedItemsControl ItemsSource="{Binding}" Header="Some text">
    <HeaderedItemsControl.Template>
        <ControlTemplate TargetType="HeaderedItemsControl">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                <DockPanel>
                    <ContentPresenter DockPanel.Dock="Top" ContentSource="Header" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </DockPanel>
            </Border>
        </ControlTemplate>
    </HeaderedItemsControl.Template>
</HeaderedItemsControl>

如果您只在一个地方使用它，使用普通的 ItemsControl 并直接在控件模板中包含您的标题可能会更容易.

If you're only using it in one place, it might be easier to use a plain ItemsControl and include your header directly in the control template.

此外，您似乎正在尝试创建两个列宽相同的网格.您可能需要查看 WPF 中的网格大小共享.如果在父控件上设置 Grid.IsSharedSizeScope，则可以在不同网格的列上设置 SharedSizeGroup 以使它们具有相同的宽度.

Also, it looks like you're trying to have two grids whose columns have the same width. You may want to look at Grid Size Sharing in WPF. If you set Grid.IsSharedSizeScope on a parent control then you can set SharedSizeGroup on columns of different grids to give them the same width.

这篇关于带有静态标题的 ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！