创建一个透视 WPF 扩展器答案

【问题标题】：Create A See Through WPF Expander创建一个透视 WPF 扩展器
【发布时间】：2016-04-13 12:43:27
【问题描述】：

如何使Expander 控件在折叠时显示顶部元素？我有一个包含在 Expander 中的列表视图，我希望它在折叠时显示前 5 个元素。

【问题讨论】：

您可以更新展开器的标题，当它折叠时，显示顶部元素，但这不会是相同的列表视图。符合您的要求吗？
是的，我怎样才能做到这一点？

【解决方案1】：

您可以使用样式触发器更改标题。
像这样的：

public class ViewModel
{
    private const string sampleText =
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget risus sit amet dolor malesuada scelerisque.";

    public ViewModel()
    {
        Items = new List<string>(sampleText.Split());
        Header = "Items:";
        CollapsedHeader = $"Items: {string.Join(" ", Items.Take(5))}...";
    }

    public IEnumerable<string> Items { get; }

    public string Header { get; }

    public string CollapsedHeader { get; }
}

XAML：

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>

    <Expander>
        <Expander.Style>
            <Style TargetType="{x:Type Expander}">
                <Style.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter Property="Header" Value="{Binding Header}"/>
                    </Trigger>
                    <Trigger Property="IsExpanded" Value="False">
                        <Setter Property="Header" Value="{Binding CollapsedHeader}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Expander.Style>
        <ListBox ItemsSource="{Binding Items}" />
    </Expander>
</Window>

结果：

1) 展开：

2) 折叠：

【讨论】：