none
wpf scrollbar的背景宽度 RRS feed

  • 问题

  • 请问wpf scrollbar的背景宽度应该怎么设置呢。我使用样式修改了滚动条中间滑块的宽度,但是他的背景还是那么宽,并没有缩小,导致出现了空白。

    <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:ScrollViewer样式"
            xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="ScrollViewer样式.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <!--<Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>-->
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" 
                                            CanHorizontallyScroll="False" CanVerticallyScroll="False"
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            Content="{TemplateBinding Content}" Grid.Column="0"
                                            Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow"
                               Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" 
                               Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Margin="0" Padding="0"
                               Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                               ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>
                    <!--<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>-->
                </Grid>
            </ControlTemplate>
            <LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
                <GradientStop Color="#E1E1E1" Offset="0"/>
                <GradientStop Color="#EDEDED" Offset="0.20"/>
                <GradientStop Color="#EDEDED" Offset="0.80"/>
                <GradientStop Color="#E3E3E3" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
            <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Themes:ScrollChrome.ScrollGlyph}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Themes:ScrollChrome x:Name="Chrome" 
                                                 RenderMouseOver="{TemplateBinding IsMouseOver}" 
                                                 RenderPressed="{TemplateBinding IsDragging}" 
                                                 SnapsToDevicePixels="true" 
                                                 Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Themes:ScrollChrome.ScrollGlyph}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="scroll_thumb_style" TargetType="Thumb">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Rectangle Width="8" Fill="#3296fa" RadiusX="5" RadiusY="5">
                            </Rectangle>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#E1E1E1" Offset="0"/>
                <GradientStop Color="#EDEDED" Offset="0.20"/>
                <GradientStop Color="#EDEDED" Offset="0.80"/>
                <GradientStop Color="#E3E3E3" Offset="1"/>
            </LinearGradientBrush>
            <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
                <!--<Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>-->
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
                <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
                <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
                
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="True" Width="{TemplateBinding Width}">
                                <Track x:Name="PART_Track" IsDirectionReversed="true"
                                       IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource scroll_thumb_style}" Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <!--<Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                        <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                        <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ScrollBar}">
                                    <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                            <ColumnDefinition Width="0.00001*"/>
                                            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                        </Grid.ColumnDefinitions>
                                        <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
                                        <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                            <Track.DecreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <Thumb Style="{StaticResource scroll_thumb_style}" Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
                                            </Track.Thumb>
                                        </Track>
                                        <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>-->
                </Style.Triggers>
            </Style>
        </Window.Resources>
        <Grid>
            <ScrollViewer Template="{DynamicResource ScrollViewerControlTemplate1}" VerticalScrollBarVisibility="Visible">
                <Grid>
                    <Button Content=" tes" Height="1500"/>
                </Grid>
            </ScrollViewer>
        </Grid>
    </Window>
    

    2017年12月29日 6:09

全部回复

  • Hi,

    问题出在下面的代码里。宽度不要写死。

      <Style x:Key="scroll_thumb_style" TargetType="Thumb">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Rectangle Width="8" Fill="#3296fa" RadiusX="5" RadiusY="5">
                            </Rectangle>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    尝试下面的样式。

      <Style x:Key="scroll_thumb_style" TargetType="Thumb">
                <Setter Property="OverridesDefaultStyle" Value="true" />
                <Setter Property="IsTabStop" Value="false" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
                                <Border
                                    x:Name="Bg"
                                    Margin="2"
                                    Background="{StaticResource ThumbBackground}"
                                    CornerRadius="4"
                                    SnapsToDevicePixels="True" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Bg" Property="Background" Value="{StaticResource MouseOverForeground}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="Bg" Property="Opacity" Value="0.5" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Sincerely,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年12月29日 9:11
    版主
  • Hi,

    问题出在下面的代码里。宽度不要写死。

      <Style x:Key="scroll_thumb_style" TargetType="Thumb">
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Rectangle Width="8" Fill="#3296fa" RadiusX="5" RadiusY="5">
                            </Rectangle>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    尝试下面的样式。

      <Style x:Key="scroll_thumb_style" TargetType="Thumb">
                <Setter Property="OverridesDefaultStyle" Value="true" />
                <Setter Property="IsTabStop" Value="false" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
                                <Border
                                    x:Name="Bg"
                                    Margin="2"
                                    Background="{StaticResource ThumbBackground}"
                                    CornerRadius="4"
                                    SnapsToDevicePixels="True" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Bg" Property="Background" Value="{StaticResource MouseOverForeground}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="Bg" Property="Opacity" Value="0.5" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Sincerely,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    n你好,Bob 

       你所提供的样式,那个下拉条太粗了,我想要把它调整细一点应该怎么办呢,如果设置margin的话,还是会有空白出现。

    

    2018年1月2日 3:15