How can use flow layout inside of a ScrollViewer? - wpf

Question

I have a situation with a scroll viewer, and a wrap panel inside of that scroll viewer. The intended behavior is that the content does not scroll left and right, only up and down, and that content wraps (becomes taller) as necessary.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Margin="0">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="330" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74" />
<RowDefinition Height="75" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- ... other stuff ... -->
<WrapPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal" Margin="35,0,0,0">
<Button Style="{StaticResource CreateModelButtonStyle}"
CommandParameter="Design"
Command="{StaticResource WindowProfileUnconditional}">
<StackPanel>
<TextBlock Style="{StaticResource HomePageButtonMarqeeTextStyle}" Text="Blah Blah"/>
<TextBlock Style="{StaticResource HomePageButtonDescriptionTextStyle}" Text="Blah Blah" />
</StackPanel>
</Button>
<!-- A bunch more buttons -->
</WrapPanel>
<!-- ... other stuff ... -->
</Grid>
</ScrollViewer>
The behavior I get instead is that the scroll viewer tells the wrap panel that it can be any width, so the wrap panel behaves like a stack panel and clips instead of wraps.
Is there some way to allow vertical scrolling while completely preventing horizontal scrolling?

Answer 1

Why don't you bind the Width of your WrapPanel (or Grid) to the Width of the ScrollViewer?
<ScrollViewer x:Name="MyScrollViewer" ...>
<WrapPanel Width="{Binding ElementName=MyScrollViewer, Path=Width}" ... />
</ScrollViewer>
Not positive if you need to bind to Width or ActualWidth. If one doesn't work, try the other one.