WPF Элементы управления оленья кожа показать VerticalScrollBar автоматически

Question

Вот намерение,

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

Итак, я сгенерировал образец, который повторяет мое намерение. Предложите мне, что мне нужно исправить

<StackPanel> 
     <StackPanel.Resources> 
      <Style TargetType="{x:Type ItemsControl}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type ItemsControl}"> 
          <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
           <ScrollViewer VerticalScrollBarVisibility="Visible"> 
            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
           </ScrollViewer> 
          </Border> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </StackPanel.Resources> 
     <ToggleButton Name="SomeToggle" Content="Show/Hide"/> 
     <Button Content="Add Item" Click="ButtonBase_OnClick" /> 
     <TextBlock Text="Hide/Show on toggle" > 
      <TextBlock.Style> 
       <Style TargetType="TextBlock"> 
        <Setter Property="Visibility" Value="Collapsed"/> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding Path=IsChecked,ElementName=SomeToggle}" Value="True"> 
          <Setter Property="Visibility" Value="Visible" /> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </TextBlock.Style> 
     </TextBlock> 

    <ItemsControl Name="ItemsCollection" > 
    </ItemsControl> 

</StackPanel> 

и код позади:

private int counter = 0; 
    private ObservableCollection<string> coll; 
    public MainWindow() 
    { 
     coll= new ObservableCollection<string>(); 
     //ItemsCollection.ItemsSource = coll; 
     InitializeComponent(); 
    } 

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e) 
    { 
     ItemsCollection.Items.Add(string.Format("Item {0}", ++counter)); 
    } 

Answer 1

В основном это происходит каждый раз, когда вы положили ScrollViewer внутри Stackpanel, и это связано с тем, как Stackpanel работы, посмотрите here

можно либо поставить Stackpanel внутри ScrollView, или лучше изменить свою основную панель в Grid

<Grid > 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/>    
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.Resources> 
     <Style TargetType="{x:Type ItemsControl}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ItemsControl}"> 
         <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
          <ScrollViewer VerticalScrollBarVisibility="Visible"> 
           <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </ScrollViewer> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Grid.Resources> 
    <ToggleButton Name="SomeToggle" Content="Show/Hide" Grid.Row="0"/> 
    <Button Content="Add Item" Click="ButtonBase_OnClick" Grid.Row="1"/> 
    <TextBlock Text="Hide/Show on toggle" Grid.Row="2"> 
     <TextBlock.Style> 
      <Style TargetType="TextBlock"> 
       <Setter Property="Visibility" Value="Collapsed"/> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding Path=IsChecked,ElementName=SomeToggle}" Value="True"> 
         <Setter Property="Visibility" Value="Visible" /> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
    </TextBlock> 
    <ItemsControl Name="ItemsCollection" Grid.Row="3"> 
    </ItemsControl> 
</Grid> 

Answer 2

Единственная причина, вы не можете увидеть на прокручивание потому что вы не установили высоту вашего ItemsControl.

Каждый раз, когда вы добавляете элемент, высота будет расширяться, а StackPanel будет расширяться вместе с содержимым. Вы уже определили ScrollViewer в своем шаблоне ItemsControl, вам также нужно решить, в какой момент он должен работать.

<ItemsControl Name="ItemsCollection" Height="200" > 
</ItemsControl> 

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

начальная полоса прокрутки

После добавления элементов

с кодом

И только от понимания точки зрения. это также будет работать:

Удалить стиль управления элементами & установить высоту просмотра прокрутки.

Чтобы справиться с высоты всех элементов:

<ScrollViewer MaxHeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}},Path=ActualHeight,Mode=OneWay}"> 
    <StackPanel> 
    <StackPanel.Resources> 
     <Style TargetType="{x:Type ItemsControl}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ItemsControl}"> 
         <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
          <ScrollViewer VerticalScrollBarVisibility="Visible"> 
           <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </ScrollViewer> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </StackPanel.Resources> 
    <ToggleButton Name="SomeToggle" Content="Show/Hide"/> 
    <Button Content="Add Item" Click="Button_Click" /> 
    <TextBlock Text="Hide/Show on toggle" > 
     <TextBlock.Style> 
      <Style TargetType="TextBlock"> 
       <Setter Property="Visibility" Value="Collapsed"/> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding Path=IsChecked,ElementName=SomeToggle}" Value="True"> 
         <Setter Property="Visibility" Value="Visible" /> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
    </TextBlock> 

    <ItemsControl Name="ItemsCollection" ItemsSource="{Binding list}" 
        MaxHeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}},Path=ActualHeight,Mode=OneWay}"> 
    </ItemsControl> 

</StackPanel> 
</ScrollViewer>