WPF Ширина контента расширителя ScrollViewer

Question

У меня есть следующие иерархии компонентов, обозначается с идентификаторами, чтобы облегчить путаницу:

|>ScrollViewer[1] 
|->StackPanel 
|-->Expander[2] 
|--->ScrollViewer[3] 
|---->StackPanel 
|----->Button 

Проблема здесь в том, что я хочу [3] Ширина 'ы быть привязанными к [1 ]. В моем коде я делаю это таким образом:

Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.95'}" 

Преобразователь просто масштабирует значение на 0,95.

Теперь эта частично работает в этой работе [3] (красный контур) можно прокручивать через всю ширину, что, однако, только часть, которая находится в пределах [2] По ширине когда-либо видимой (пунктирная контур).

Видео для отображения нежелательного поведения: https://youtu.be/_Qw9W0sGfP4

Часть XAML:

<s:SurfaceScrollViewer Name="TimeScrollViewer" Grid.Row="1" Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden"> 
    <ItemsControl Name="TimeItemsControl"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Expander Expanded="ExpanderExpanded" Collapsed="ExpanderCollapsed" Header="{Binding Header}" HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.2'}"> 
        <s:SurfaceScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.95'}"> 
         <ItemsControl ItemsSource="{Binding GuestList}"> 
          <ItemsControl.ItemsPanel> 
           <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"/> 
           </ItemsPanelTemplate> 
          </ItemsControl.ItemsPanel> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate> 
            <s:SurfaceButton Content="{Binding GuestName}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=TimeScrollViewer, Converter={converters:ScalarConverter}, ConverterParameter='0.15'}"/> 
           </DataTemplate> 
          </ItemsControl.ItemTemplate> 
         </ItemsControl> 
        </s:SurfaceScrollViewer> 
       </Expander> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</s:SurfaceScrollViewer> 

Как я могу получить ScrollViewer, чтобы правильно заполнить этот красный контур?

Answer 1

Забудьте пробовать связывать ширины элементов вместе. Просто установите ItemContainerStyle в ItemsControl растягивать детей по горизонтали:

<ItemsControl.ItemContainerStyle> 
    <Style TargetType="ContentPresenter"> 
     <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    </Style> 
</ItemsControl.ItemContainerStyle>