扩展器的宽度 header 影响外部的滚动查看器

Question

下面是我的代码

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

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

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

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

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

但我希望滚动条能够正常工作并启用，以及具有 header

样式的数据模板

谁能给个解决办法？

Answer 1

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

这样想：控件的 header 区域包含两个元素 side-by-side，expand/collapse 按钮和 header "content"。您将 header 内容部分（您的 Border 元素）的宽度绑定到扩展控件的宽度，但这不会减去 expand/collapse 按钮的宽度。因此你的布局中断了。

如果 header 内容部分位于后面 expand/collapse 按钮，那么您的方法会奏效，但不幸的是，默认 Expander 控件模板设计完成。

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

如果你设置扩展器的Background 属性，这将改变header的颜色, 但它也会改变内容区域的颜色，这可能不是你想要的
将另一个元素放在 header 中（例如您的 Border）并尝试将其设为 "stretch" 到控件的宽度（通过设置HorizontalContentAlignment 属性到 Stretch) 也不起作用，因为放置 header 的元素在控件模板中是 hard-coded left-aligned.

据我所知，完成你想要的唯一方法是为扩展器编写你自己的控制模板并使用它。您应该可以在 SO 上或通过谷歌搜索找到这方面的一些示例。

扩展器的宽度 header 影响外部的滚动查看器

Width of the expander header affects the scrollviewer outside

c#

wpf

styling