Reputation: 1073
I have Itemscontrol in the 3rd column of my grid which shows some set of buttons which gets loaded dynamically. I wanted these contents (i.e. buttons) to occupy maximum width of Grid. and when contents exceeds Grid size, it will show vertical scrollbar.
I applied Scrollbar style to ItemsControl as follows :
<Style x:Key="ItemControlStyle" TargetType="{x:Type ItemsControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border>
<ScrollViewer HorizontalContentAlignment="Stretch"
CanContentScroll="True"
HorizontalScrollBarVisibility="Disabled"
Uid="ScrollViewer_9"
VerticalScrollBarVisibility="Auto">
<ItemsPresenter Margin="{TemplateBinding Padding}"
KeyboardNavigation.DirectionalNavigation="Cycle"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Uid="ItemsPresenter_5" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have also applied HorizontalAlignment and VerticalAllignMent as "Stretch" for both ItemsControl as well as its parent i.e. Grid.
Output view I want is( 3rd column of grid)
Output I am getting is :
Scrollbar should appear after size exceeds How to adjust these contents horizontally to Grid's max width?
Upvotes: 0
Views: 248
Reputation: 21241
Is it just a case of adding HorizontalAlignment=Stretch
to ScrollViewer
?
ie:
<Style x:Key="ItemControlStyle" TargetType="{x:Type ItemsControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border>
<ScrollViewer HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
CanContentScroll="True"
HorizontalScrollBarVisibility="Disabled"
Uid="ScrollViewer_9"
VerticalScrollBarVisibility="Auto">
<ItemsPresenter Margin="{TemplateBinding Padding}"
KeyboardNavigation.DirectionalNavigation="Cycle"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Uid="ItemsPresenter_5" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Upvotes: 1