WPF,学习滚动条样式

时间:2015-05-05 19:26:09

标签: c# wpf xaml

我目前正处于(对我来说相当陡峭)WPF和样式的学习曲线。我设法将我在应用程序中使用的大多数控件设置为样式,但现在我正在敲墙:我想设置滚动条的样式。

我阅读了很多关于这个主题的文档

所以是时候练习了。我之前的实验是如何在控件上设置样式,运行应用程序,查看我创建的可怕创作,然后从那里开始。

我似乎无法开始使用滚动条。

例如,当我在我的Styles.xaml中添加以下样式时(在我的Window.Resources中正确引用,Buttons,TextBlocks,Groupboxes等所有其他样式,以这种方式正常工作)

<Style TargetType="{x:Type 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="{x:Type Thumb}"> 
                <Border 
                    CornerRadius="0"
                    Background="Chartreuse"
                    BorderBrush="Red"
                    BorderThickness="15" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当我运行我的应用程序时,它没有以任何方式反映出来。我尝试了几种样式(使用TargetType Thumb,TargetType RepeatButton等复制粘贴示例)。

我是否需要滚动查看器+滚动条+重复按钮+拇指的完整样式定义才能获得我的第一个视觉效果?

我想从更改拇指和滚动条本身开始,只是外观。我不知道如何开始,然后从随机博客中复制/粘贴300行xaml,这导致我完全迷失...

希望一些WPF风格的魔术师可以指出我正确的方向。如上所述:最好是一步一步的缓慢路线,这样我才能真正让自己相信我明白我在做什么:)。

2 个答案:

答案 0 :(得分:3)

因此,如果我们去查看default style templates,您会看到一个难以参考的内容;

Thumb Style="{StaticResource ScrollBarThumb}"

因此,您可以使用多种方式之一覆盖x:Key资源,或者您可以设置包含Thumb的整个样式模板的样式并将其合并到那里。如果你想要一个参考(虽然是针对Silverlight),我可以把你的源代码发送给我几年前做的很多主题之一你可以深入研究,如果你喜欢,因为它没有NDA,你可以查看输出here。一旦你了解了xaml,你就不会在乎SL,WPF,WP等等......

无论如何,为了立即修复你,你可以在实例上覆盖那个资源,比如(伪);

<ScrollViewer>
   <ScrollViewer.Resources>
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type 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="{x:Type Thumb}"> 
                <Border 
                    CornerRadius="0"
                    Background="Chartreuse"
                    BorderBrush="Red"
                    BorderThickness="15" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
   </ScrollViewer.Resources>
</ScrollViewer>

希望这会有所帮助,欢呼。

答案 1 :(得分:1)

问题是Scrollbar为Thumb定义了一种样式并将其设置为本地值。因此,您无法使用自己的样式更改它,因为本地值优先于隐式样式。

您可以在此处查找优先级列表: https://msdn.microsoft.com/en-us/library/ms743230%28v=vs.110%29.aspx

要编辑样式,您有两个选择:

第一个是使用密钥ScrollBarThumbVerticalScrollBarThumbHorizontal覆盖资源。

第二种方法是将默认模板复制到您自己的滚动条并直接编辑这些样式。 Scrollbar的默认模板大约有250行代码,但是,您可以安全地忽略所有触发器,这些触发器占代码的大约一半。找到你的方法需要一些时间,但我相信这是一个很好的学习经历。