Question

我正在开发基于自定义项目的WPF控件。对于＆＃34;正常＆＃34;布局，想想垂直StackPanel，所以我的xaml看起来像：

<mycontrol>
 <item1 />
 <item2 />
 <item3 />
</mycontrol>

在这种情况下，它的简单的3项容器被创建并且一切都很好。该控件将如下所示：

[item1]
[item2]
[item3]

用例＃2是，我需要支持水平＆＃34;分组＆＃34; ...理想情况下我的xaml看起来像：

<mycontrol>
 <item1 />
 <stackpanel orientation=horizontal>
  <item2a />
  <item2b />
  <item2c />
 </stackpanel>
 <item3 />
</mycontrol>

在这种情况下，我会渲染为：

[item1]
[item2a] [item2b] [item2c]
[item3]

所以，我想要的是生成 5 项容器。我已经制定了一个自定义布局面板，该部分可以使用。

问题是，如果我使用堆叠面板，我只会得到 3 项容器，这是有意义的，但是它会破坏控件的键盘界面。我可以做一些hacky，我会拦截所有键盘和鼠标的东西，并且＃34;重新路由＆＃34;在这种情况下，但这看起来很困难，很难以通用的方式工作。

WPF内置了一些不明确的内容来处理这个问题吗？＆＃34;子项＆＃34;生成为自己的容器？

我目前的方式是做一些事情：

<item1 />
<item2a isGrouped=true />
<item2b isGrouped=true />
<item2c isGrouped=true />
<item3 />

所以，当我点击第一个isGrouped = true时，它会开始分组，直到它出现错误，但是我并不是因为我不得不将isGrouped a 3州enum所以我可以在另一组下面有一组。此外，xaml中的层次结构不明确。

有什么建议吗？

Answer 1

使用自定义TreeViewItem控制模板的HierarchicalDataTemplate中的TreeView，我能够获得更多或更少的外观。对于控件模板，我只是复制了example template并进行了一些修改。所有容器都在正确的位置，但键盘导航不适用于嵌套项目（因为TreeView不期望布局我猜）。以下是我提出的建议：

<TreeView
    ItemsSource="{Binding Items}">
    <TreeView.Resources>
        <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
        <Style
            TargetType="{x:Type TreeViewItem}">
            <Setter
                Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter
                Property="IsExpanded"
                Value="True" />
            <Setter
                Property="Template">
                <Setter.Value>
                    <!-- This template came from the example template and has just a few modifications.
                            Example is at: https://msdn.microsoft.com/en-us/library/ms752048.aspx -->
                    <ControlTemplate
                        TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <!-- Changed the grid configuration -->
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <!-- The entire VisualStateGroups section is a direct copy+paste from the example template -->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetName="Bd"
                                            Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame
                                            KeyTime="0"
                                            Value="{StaticResource SelectedBackgroundColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="SelectedInactive">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetName="Bd"
                                            Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame
                                            KeyTime="0"
                                            Value="{StaticResource SelectedUnfocusedColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpansionStates">
                                    <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="(UIElement.Visibility)"
                                            Storyboard.TargetName="ItemsHost">
                                        <DiscreteObjectKeyFrame
                                            KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Collapsed" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!-- Removed the ToggleButton -->
                            <!-- Tweaked the placement of items in the grid -->
                            <Border
                                x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}">
                                <ContentPresenter
                                    x:Name="PART_Header"
                                    ContentSource="Header"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                            </Border>
                            <ItemsPresenter
                                x:Name="ItemsHost"
                                Grid.Column="1" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!-- Removed the IsExpanded trigger -->
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader" Value="false" />
                                    <Condition Property="Width" Value="Auto" />
                                </MultiTrigger.Conditions>
                                <Setter
                                    TargetName="PART_Header"
                                    Property="MinWidth"
                                    Value="75" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader" Value="false" />
                                    <Condition Property="Height" Value="Auto" />
                                </MultiTrigger.Conditions>
                                <Setter
                                    TargetName="PART_Header"
                                    Property="MinHeight"
                                    Value="19" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TreeView.Resources>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate
            DataType="{x:Type local:MyItem}"
            ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

作为参考，我的ItemsSource属性绑定到包含如下所示项目的集合：

internal class MyItem
{
    public string Name { get; private set; }

    public List<MyItem> Children { get; private set; }

    public MyItem(string name = null)
    {
        Name = name;
        Children = new List<MyItem>();
    }
}

这是在不创建自定义控件的情况下完成的，但希望它能让您了解自己可以做些什么。 HeirarchicalDataTemplate和专门的容器类型（在我的情况下TreeViewItem中）与自定义控件模板的组合是我这样做的关键。

以下是我测试过的一些数据和结果：

public IEnumerable<MyItem> Items { get; private set; }

...

var items = new MyItem[]
{
    new MyItem("[First]"),
    new MyItem(),
    new MyItem("[Third]")
};
items[1].Children.Add(new MyItem("[Second_0]"));
items[1].Children.Add(new MyItem("[Second_1]"));
items[1].Children.Add(new MyItem("[Second_2]"));
Items = items;

Screenshot

我确信可以改进可视化。我只是在10分钟内把它扔在一起。

最好的方式来＆＃34; group＆＃34;物品＆＃34;虚拟＆＃34;？

1 个答案: