Question

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

enter image description here

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

<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>

Answer 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>

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

ItemsControl，其中整个项目是子项目的扩展器

1 个答案: