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>

<强>结果

enter image description here

Answer 2

ScrollBar由Grid放置在ScrollViewer，因此您需要为此提供新的ControlTemplate。您可以使用Grid.RowSpan和Grid.ColumnSpan进行ScrollViewer内容扩展以填充可用空间。尝试这样的事情：

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

WPF滚动条内容

2 个答案: