2

所以很难描述我想要的行为，所以我用我的业余绘画技巧画了一张漂亮的照片。

在此处输入图像描述

所以基本上我希望标题ItemsControl像扩展器一样操作，没有丑陋的扩展器图标出现（因此只需单击框中的任何位置即可展开以查看子项目）。我已经有了数据层次结构，但是我无法让扩展器按照我的意愿运行，任何人都成功地覆盖扩展器样式来完成这样的事情，或者是否有另一个控件可以完成类似的事情这更容易？这是一些简单的代码，但是有丑陋的扩展器按钮，覆盖了扩展器的标题模板和样式，只会让它看起来更糟。

<ItemsControl ItemsSource="{Binding Collection}" 
  HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading">
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
4

1 回答 1

1

如果您不喜欢内置样式，您只需为扩展器使用自定义样式:)

这是一个开始：

<Style x:Key="customExpander">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="Expander">
                    <DockPanel>
                        <ToggleButton DockPanel.Dock="Top"
                                      IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      Background="{TemplateBinding Background}"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      Foreground="{TemplateBinding Foreground}"
                                      FontFamily="{TemplateBinding FontFamily}"
                                      FontSize="{TemplateBinding FontSize}"
                                      FontStretch="{TemplateBinding FontStretch}"
                                      FontStyle="{TemplateBinding FontStyle}"
                                      FontWeight="{TemplateBinding FontWeight}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Padding="{TemplateBinding Padding}"
                                      Name="HeaderSite"
                                      MinWidth="0"
                                      MinHeight="0"
                                      Margin="1,1,1,1">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>

                        <ContentPresenter Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                  Name="ExpandSite" Margin="{TemplateBinding Padding}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Visibility="Collapsed"
                                  Focusable="False"
                                  DockPanel.Dock="Bottom" />
                    </DockPanel>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="HeaderSite" Property="Background" Value="Gold" />
                            <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource DisabledTextBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

然后更改您的 xaml 以使用此样式：

<ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading" Style="{StaticResource customExpander}" Background="LightSteelBlue" >
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading" Style="{StaticResource customExpander}" Background="LightSalmon">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

编辑重要的部分是

<ControlTemplate TargetType="ToggleButton">
    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
</ControlTemplate>

如果你想定制。这是一个非常原始的解决方案，因此您有足够的空间来增强它；）

于 2012-10-12T18:01:11.343 回答