Question

so i have been trying to style a scrollviewer, so that i can change the appearance of a scroll bar. But the problem I am facing, is that when I apply the scrollviewer style to the ListBox, I never see the content anymore.

This is the current style I have: (Unchanged from the default at the moment)

<Style x:Key="CustomScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
    <Setter Property="Padding" Value="4"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
                        <Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>
                        <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,-1,-1,-1" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>
                        <ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="-1,0,-1,-1" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And my actual ListBox xaml is:

<Grid x:Name="LayoutRoot" Background="Transparent" Height="250">
    <ListBox x:Name="iListBox" DataContext="{Binding}" ItemsSource="{Binding Path=ListVM.MyCollection}" 
             BorderBrush="Transparent" Background="Transparent" 
             ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
        <ListBox.Template>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer Style="{StaticResource CustomScrollViewerStyle}"/>
            </ControlTemplate>
        </ListBox.Template>
        <ListBox.ItemTemplate >
            <DataTemplate >
                <Grid Background="Transparent" Loaded="Grid_Loaded">
                    <IReviewerList1:MyCollectionDataItem />
                </Grid> 
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Currently all I see is a scrollbar and no dataItems anymore. Was wondering what i was doing wrong? Any help would be great.

Thanks

Answer 1

The problem is that the ListBox doesn’t know where to inject it’s Items. If you insert a ItemsPresenter in the styled ScrollViewer the items should be visible again.

<ListBox.Template>
    <ControlTemplate TargetType="ItemsControl">
        <ScrollViewer Style="{StaticResource CustomScrollViewerStyle}">
            <!-- I'm not sure if the correct name is necessary, or if
                 it's just for applying visual states -->
            <ItemsPresenter x:Name="itemsPresenter" />
        </ScrollViewer>
    </ControlTemplate>
</ListBox.Template>