Wpf ScrollBar自定义样式

<Style x:Key="ScrollBar_style" TargetType="ScrollBar">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="ScrollBar">                        <Grid Width="15">                            <Border Width="13" HorizontalAlignment="Center" CornerRadius="5" Background="#33555555">                            </Border>                            <Track HorizontalAlignment="Center" Name="PART_Track" Width="{TemplateBinding Width}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}"                                    Value="{TemplateBinding Value}"  IsDirectionReversed="true">                                    <Track.DecreaseRepeatButton>                                        <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineUpCommand"  />                                    </Track.DecreaseRepeatButton>                                    <Track.IncreaseRepeatButton>                                        <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineDownCommand" />                                    </Track.IncreaseRepeatButton>                                    <Track.Thumb>                                        <Thumb Style="{StaticResource scroll_thumb_style}" >                                         </Thumb>                                    </Track.Thumb>                          </Track>                                                   </Grid>                                            </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

这里用到了两个其它的样式，其中 scroll_background 定义Track.DecreaseRepeatButton 、 Track.IncreaseRepeatButton的背景

<ControlTemplate x:Key="scroll_background" TargetType="RepeatButton">            <Border Background="Transparent">            </Border>        </ControlTemplate>

scroll_thumb_style定义Thumb的外观

<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="13" Fill="#7D7D7D" RadiusX="5" RadiusY="5">                        </Rectangle>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

这里的Thumb的Height是自动的大小，如果想自己设定Thumb的Height，直接设置时没有效果的，必须要将Track的ViewportSize设置为NaN即 ViewportSize="NaN"

上面的例子中只定义了A，D-F区域，B、C即向上滑动和向下滑动的那妞被去掉，如果要加上，只需要在Grid里面添加上既可以了

<Grid.RowDefinitions>                            <RowDefinition Height="15" />                            <RowDefinition Height="*" />                            <RowDefinition Height="15" />                        </Grid.RowDefinitions>                        <!--<Border Grid.RowSpan="3">                            <Border.Background>                                <ImageBrush ImageSource="/images/scroll_line_background.png" />                            </Border.Background>                        </Border>-->                        <Border Grid.RowSpan="3">                            <Border.Background>                                <ImageBrush ImageSource="/images/scroll_background.png" />                            </Border.Background>                        </Border>                        <RepeatButton Template="{StaticResource scroll_up}" Grid.Row="0" Command="ScrollBar.LineUpCommand" /><RepeatButton Template="{StaticResource scroll_down}" Grid.Row="2" Command="ScrollBar.LineDownCommand" />

最终运行结果

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。