WPF Scrollbar over content

Question

I am working on a custom style for the scrollbar on the scrollviewer. It is working fine but I want the scrollbar to be on top of the content so my controls width won't break because of the scrollbar.

As you can see here the control on top breaks because of the scrollbar. Do you guys know how to make my scrollbars background some kind of transparent so my control will be behind the scrollbar?

Answer 1

Resource

 <Window.Resources>
    <Style x:Key="ListboxStyle" TargetType="ListBox">
        <Style.Resources>             

            <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Rectangle x:Name="rectangle" Fill="#CDCDCD" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Fill" TargetName="rectangle" Value="#A6A6A6"/>
                                </Trigger>
                                <Trigger Property="IsDragging" Value="true">
                                    <Setter Property="Fill" TargetName="rectangle" Value="#606060"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="RepeatButton">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RepeatButton">
                            <Grid>
                                <ContentPresenter></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type ScrollBar}">
                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>                                       
                <Setter Property="BorderThickness" Value="1,0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Width="8" Margin="0,15,0,15" Background="Transparent" SnapsToDevicePixels="true">
                                <Grid.RowDefinitions>
                                    <RowDefinition  MaxHeight="0"/>
                                    <RowDefinition Height="0.00001*"/>
                                    <RowDefinition Height="0"/>
                                </Grid.RowDefinitions>
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="Transparent" Grid.Row="1"/>
                                <RepeatButton Height="0" Width="0" x:Name="PART_LineUpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"/>                                                                           
                                <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" />
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumbVertical}"/>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton x:Name="PART_LineDownButton" Height="0" Width="0" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2"/>                                  
                            </Grid>                    
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>                   
            </Style>

            <Style TargetType="{x:Type ScrollViewer}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate  TargetType="{x:Type ScrollViewer}">
                            <Grid x:Name="Grid"  HorizontalAlignment="Right">                                  
                                <ScrollContentPresenter   x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" />
                                <ScrollBar x:Name="PART_VerticalScrollBar" HorizontalAlignment="Right" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow"  Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
    </Style>
</Window.Resources>

Xaml

<ListBox Style="{StaticResource ListboxStyle}" Height="400" Width="150" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
    <TextBlock Text="29/6/2014 9:58:00 Datetime value" Margin="10"></TextBlock>
</ListBox>

Result

Answer 2

The ScrollBar is placed in a Grid by the parent ScrollViewer, so you'll need to provide a new ControlTemplate for that. You can use the Grid.RowSpan and Grid.ColumnSpan to make the ScrollViewer content stretch to fill the available space. Try something like this:

<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2" />
                    <ScrollBar Grid.Column="1" x:Name="PART_VerticalScrollBar" 
                        Value="{TemplateBinding VerticalOffset}" Maximum="{
                        TemplateBinding ScrollableHeight}" ViewportSize="{
                        TemplateBinding ViewportHeight}" Background="Transparent" />
                    <ScrollBar Grid.Row="1" x:Name="PART_HorizontalScrollBar" 
                        Orientation="Horizontal" Value="{TemplateBinding 
                        HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}"
                        ViewportSize="{TemplateBinding ViewportWidth}" 
                        Background="Transparent" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>