Question

我有一堆相对简单的视图模型。它们都实现了一个通用接口：

public interface IComponent : INotifyPropertyChanged
{
    bool IsExpanded { get; }
    string Header { get; }
    ICommand AddComponentCommand { get; }
    ICommand DeleteComponentCommand { get; }
}

我希望我的所有视图模型都拥有自己的DataTemplate，以便正确放置它们。我还希望控件具有带有添加和删除按钮的标题。如果单击添加，则控件具有内容，通过使用扩展器，该控件将是“可见的”。

我设法与DateTemplates一起工作，获得了不同的ItemsControl。

C＃主视图模型

private ObservableCollection<IComponent> _components = new ObservableCollection<IComponent>();
public ObservableCollection<IComponent> Components
{
    get => _components;
    set => SetField(ref _components, value);
}

xaml：

<ItemsControl ItemsSource="{Binding Components}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>


    <ItemsControl.Resources>
        <!-- FailCost -->
        <DataTemplate DataType="{x:Type viewModel:CarViewModel}">
            <Border BorderBrush="Black">
                <StackPanel>
                    <TextBlock Text="{Binding Header}"/>
                    <Button Content="Add" Command="{Binding AddComponentCommand}"/>
                    <Button Content="Del" Command="{Binding DeleteComponentCommand}"/>
                    <Expander IsExpanded="{Binding IsExpanded, Mode=OneWay}">
                        <TextBox Text="{Binding Car.Brand}"/>
                    </Expander>
                </StackPanel>
            </Border>
        </DataTemplate>

        <DataTemplate DataType="{x:Type viewModel:PersonViewModel}">
            <Border BorderBrush="Black">
                <StackPanel>
                    <TextBlock Text="{Binding Header}"/>
                    <Button Content="Add" Command="{Binding AddComponentCommand}"/>
                    <Button Content="Del" Command="{Binding DeleteComponentCommand}"/>
                    <Expander IsExpanded="{Binding IsExpanded, Mode=OneWay}">
                        <TextBox Text="{Binding Person.Name}"/>
                    </Expander>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.Resources>

</ItemsControl>

但是，现在我必须为每个DataTemplate重复标题组件。我在界面中具有常用功能，我不想为每个项目重复添加/删除按钮和标题文本。我已经搜索了一段时间，但是我觉得我很想念这个问题，因为我找不到相似的情况。

如何为ItemsControl中的所有项目添加通用标头。

为清楚起见：我不需要HeaderItemsControl，也不需要ItemsControl有标题。我需要ItemsControl中的项目都具有相同的标题。

Answer 1

您可以创建自定义ControlTemplate：

<ControlTemplate x:Key="template" TargetType="UserControl">
    <Border BorderBrush="Black">
        <StackPanel>
            <TextBlock Text="{Binding Header}"/>
            <Button Content="Add" Command="{Binding AddComponentCommand}"/>
            <Button Content="Del" Command="{Binding DeleteComponentCommand}"/>
            <Expander IsExpanded="{Binding IsExpanded, Mode=OneWay}">
                <ContentPresenter />
            </Expander>
        </StackPanel>
    </Border>
</ControlTemplate>

<DataTemplate DataType="{x:Type viewModel:CarViewModel}">
    <UserControl Template="{StaticResource template}">
        <TextBox Text="{Binding Car.Brand}"/>
    </UserControl>
</DataTemplate>

<DataTemplate DataType="{x:Type viewModel:PersonViewModel}">
    <UserControl Template="{StaticResource template}">
        <TextBox Text="{Binding Person.Name}"/>
    </UserControl>
</DataTemplate>

具有多个DataTemplates的ItemsControl和每个项目的通用标头

1 个答案: