扩展器标题的宽度会影响外部的滚动查看器答案

【问题标题】：Width of the expander header affects the scrollviewer outside扩展器标题的宽度会影响外部的滚动查看器
【发布时间】：2015-02-10 14:25:10
【问题描述】：

下面是我的代码

<Window x:Class="ScrollTester.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>

这里我已经为我在堆栈面板中使用的扩展器的标题设置了数据模板

    <DataTemplate x:Key="titleText">
        <Border Background="Green" Height="24">
            <TextBlock Text="{Binding}" 
                    Width="{Binding
                    RelativeSource={RelativeSource
                    Mode=FindAncestor,
                    AncestorType={x:Type Expander}},
                    Path=ActualWidth}"/>
        </Border>
    </DataTemplate>
    <Style TargetType="{x:Type Expander}">
        <Setter Property="Margin" Value="1,3"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/>
    </Style>
</Window.Resources>

我有一个堆栈面板的滚动查看器

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <StackPanel>
        <Expander IsExpanded="True" x:Name="general" Header="General">
            <StackPanel Orientation="Horizontal">
                <GroupBox Header="Mode Control">
                    <StackPanel>
                        <CheckBox Content="RESET"/>
                        <CheckBox Content="MAKEUP" IsChecked="True"/>
                        <CheckBox Content="POWERDOWN"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="Mode Control">
                    <StackPanel>
                        <CheckBox Content="RESET"/>
                        <CheckBox Content="MAKEUP" IsChecked="True"/>
                        <CheckBox Content="POWERDOWN"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="Mode Control">
                    <StackPanel>
                        <CheckBox Content="RESET"/>
                        <CheckBox Content="MAKEUP" IsChecked="True"/>
                        <CheckBox Content="POWERDOWN"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="Mode Control">
                    <StackPanel>
                        <CheckBox Content="RESET"/>
                        <CheckBox Content="MAKEUP" IsChecked="True"/>
                        <CheckBox Content="POWERDOWN"/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="Mode Control">
                    <StackPanel>
                        <CheckBox Content="RESET"/>
                        <CheckBox Content="MAKEUP" IsChecked="True"/>
                        <CheckBox Content="POWERDOWN"/>
                    </StackPanel>
                </GroupBox>
            </StackPanel>
        </Expander>
    </StackPanel>
</ScrollViewer>

这里的问题是即使堆栈面板的宽度更大，滚动条也不起作用。

我可以理解为什么会这样，因为将扩展器的宽度设置为其父级，所以滚动条不起作用

但我希望滚动条工作和启用，以及带有标题样式的数据模板

谁能给出解决方案？

【问题讨论】：

标签： c# wpf styling

【解决方案1】：

您尝试执行的操作不起作用，因为展开器标题的宽度还包括用于展开和折叠控件的按钮。

这样想：控件的标题区域包含两个并排的元素，展开/折叠按钮和标题“内容”。您将标题内容部分（您的 Border 元素）的宽度绑定到展开器控件的宽度，但这不会减去展开/折叠按钮的宽度。因此，您的布局会中断。

如果标题内容部分位于展开/折叠按钮之后，那么您的方法将起作用，但不幸的是，默认Expander 控件模板的设计方式并非如此。

我只是在猜测，但在我看来，您只是在尝试设置扩展器的背景颜色。不幸的是，同样由于默认控制模板，这是不可能的：

如果你设置了扩展器的Background 属性，这会改变标题的颜色，但它也会改变可能不是的内容区域的颜色你想要什么
将另一个元素放在标题中（例如您的Border）并尝试使其“拉伸”到控件的宽度（通过将HorizontalContentAlignment 属性设置为Stretch）不会也不起作用，因为放置标题的元素在控件模板中被硬编码为左对齐。

据我所知，实现您想要的唯一方法是为扩展器编写自己的控件模板并改用它。您应该可以在 SO 上或通过 Google 搜索找到一些示例。

【讨论】：