Ширина жатки расширителя влияет на ScrollViewer вне

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> 

Здесь я поставил DataTemplate для заголовка расширителя я использую внутри панели стека

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

Проблема в том, что полоса прокрутки не работает, даже когда ширина панели стека больше.

Я могу понять, почему это происходит, из-за установки ширины расширителя его родителя, так что полоса прокрутки не работает

Но я хочу, как полоса прокрутки работает и включен, а также DataTemplate со стилем для заголовка

Любой может дать решение?

Answer 1

То, что вы пытаетесь сделать, не будет работать, потому что ширина заголовка расширителя также включает в себя кнопку, используемую для расширения и сглаживания элемента управления.

Подумайте об этом так: область заголовка элемента управления содержит два элемента бок о бок, кнопку развернуть/свернуть и заголовок «контент». Вы привязываете ширину части содержимого заголовка (ваш элемент Border) к ширине элемента управления расширителя, но это не вычитает ширину кнопки expand/collapse. Следовательно, ваш макет ломается.

Если часть содержимого заголовка сидел за кнопку развернуть/свернуть, то ваш подход будет работать, но, к сожалению, не так, как шаблон управления по умолчанию Expander предназначен.

Я просто догадываюсь, но мне кажется, что вы просто пытаетесь установить цвет фона расширителя. К сожалению, опять-таки из-за шаблон управления по умолчанию, это не представляется возможным:

• если вы установите Background свойство расширителя, это будет изменить цвет заголовка, но он будет также изменить цвет области содержимого, которое, вероятно, не то, что вы хотите

• положить еще один элемент в заголовке (например, ваш Border) и пытается заставить его «растянуть» по ширине контроля (путем установки HorizontalContentAlignment свойство Stretch) также не будет работать, поскольку элемент, в который помещается заголовок d жестко закодирован в шаблоне управления, чтобы выровнять по левому краю.

Насколько я знаю, единственный способ выполнить то, что вы хотите, это написать собственный шаблон управления для расширителя и использовать его вместо этого. Вы должны быть в состоянии найти некоторые примеры этого здесь на SO или Googling.