WPF滚动条内容

Question

我正在为scrollviewer上的滚动条设计自定义样式.它工作正常但我希望滚动条位于内容之上,因此我的控件宽度不会因为滚动条而中断.

正如你在这里看到的那样,由于滚动条,顶部的控件会中断.你们知道如何让我的滚动条背景变得透明,所以我的控件会在滚动条后面吗？

Answer 1

资源

 <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>

结果