Horizontal Scroll Not Displaying on WrapPanel WPF - wpf

Question

I have Custom View here that is having A Wrappanel with Vertical orietiation
The Problem is that it does not show horizontal scroll bar...
Here is the link for the code...
Code for what i am trying
My Custom View Style
<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type CustomView:PlainView},
ResourceId=ImageView}"
TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListView}}">
<Setter Property="ItemContainerStyle" Value="{Binding (ListView.View).ItemContainerStyle, RelativeSource={RelativeSource Self}}" />
<Setter Property="ItemTemplate" Value="{Binding (ListView.View).ItemTemplate, RelativeSource={RelativeSource Self}}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="#FFB1703C" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border Name="bd"
Margin="{TemplateBinding Margin}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<Border.Background>
<LinearGradientBrush StartPoint="0.056,0.5" EndPoint="1.204,0.5">
<GradientStop Offset="0" Color="#FFFFFFFF" />
<GradientStop Offset="1" Color="#FFD4D7DB" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer Name="plainViewScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="{TemplateBinding Padding}">
<WrapPanel Focusable="False" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" Height="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
MinWidth="{Binding (ListView.View).MinWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListView}}}"
IsItemsHost="True"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListView}}}"
KeyboardNavigation.DirectionalNavigation="Cycle"
Orientation="Vertical" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My ListView Style
<Style TargetType="{x:Type ListView}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Grid>
<Border x:Name="Border"
Background="{DynamicResource ControlBackgroundBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1">
<ScrollViewer Margin="{TemplateBinding Padding}">
<WrapPanel Focusable="False" Width="{Binding ActualWidth,
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
Height="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
MinWidth="{Binding (ListView.View).MinWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListView}}}"
IsItemsHost="True"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListView}}}"
KeyboardNavigation.DirectionalNavigation="Cycle"
Orientation="Vertical" />
</ScrollViewer>
</Border>
<Border x:Name="DisabledVisualElement"
Background="#A5FFFFFF"
BorderBrush="#66FFFFFF"
BorderThickness="1"
IsHitTestVisible="false"
Opacity="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="DisabledVisualElement" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ListView
<ListView Name="lv"
Grid.Row="1"
Height="Auto"
Width="Auto"
IsTextSearchEnabled="True"
ItemsSource="{Binding Path=Persons}"
KeyboardNavigation.DirectionalNavigation="Cycle"
SelectedItem="{Binding Path=SelectedPerson}"
SelectionMode="Single"
View="{StaticResource ResourceKey=plainView}"
>
</ListView>
Custom View Resources
<DataTemplate x:Key="centralTile">
<StackPanel Width="80"
Height="40"
KeyboardNavigation.AcceptsReturn="True"
Focusable="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Command="{Binding Path=DataContext.KeyCommand, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}"
CommandParameter="{Binding}">
<TextBlock Text="{Binding Path=Name}" />
</Button>
<Image Grid.Column="1" Source="Water lilies.jpg" />
</Grid>
<TextBlock HorizontalAlignment="Center"
FontSize="13"
Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
<CustomView:PlainView x:Key="plainView"
ItemTemplate="{StaticResource ResourceKey=centralTile}"
ItemWidth="100" />
My ListView is Hosted inside a Window..

Answer 1

Remove the Width property on your WrapPanel
ScrollViewers are meant to scroll content that is larger than the ViewPort, and your Width binding on the WrapPanel is limiting the size of the panel to the actual ScrollViewer's ViewPort Width. This means that there is nothing for the ScrollViewer to scroll, so it won't show the ScrollBar.
<ScrollViewer Margin="{TemplateBinding Padding}">
<WrapPanel Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
Focusable="False"
IsItemsHost="True"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"
KeyboardNavigation.DirectionalNavigation="Cycle"
Orientation="Vertical" />
</ScrollViewer>
Also, I would highly recommend a tool like Snoop for debugging XAML issues. It also tells me that your MinHeight binding is invalid, so I removed it.

Answer 2

It's the fact that you've bound the width of the WrapPanel to the width of the viewport. That means it will only ever be as big as the viewport, which is the part that the user can see without scrolling. Thus, the ScrollViewer thinks there is nothing to scroll to.

Answer 3

Do not bind Width of the WrapPanel. Just bind Height.