XAML 在WPF中设计具有样式的垂直滚动条

lokaqttq 于 11个月前发布在其他

关注(0)|答案(2)|浏览(144)

这可能是一个非常容易做到或非常坚韧，但任何人都可以请建议我如何设计一个scrollviewer这样的形象

在设计领域，我是WPF的新手。我在Visual Studio Blend 2013中了解了这个设计，并且喜欢这个UI外观和感觉，请建议一种在xaml中或在UI中的代码后面编码的方法。
这是我的拇指方法

<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid x:Name="Grid">
                    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent" />
                    <Border x:Name="Rectangle1" CornerRadius="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto"  Background="LightGray" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Tag" Value="Horizontal">
                        <Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
                        <Setter TargetName="Rectangle1" Property="Height" Value="7" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

字符串
但是如何改变上下箭头。

xaml

来源：https://stackoverflow.com/questions/22060490/designing-a-verticle-scrollbar-with-style-in-wpf

2条答案

按热度按时间

vs3odd8k1#

我可以给予你的滚动条，我最近在我的一个样本项目，但我不想在它的拇指样本。所以，你可能要调整一点样本。
这里是风格：

<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid x:Name="Grid">
                    <Rectangle
                        Width="Auto"
                        Height="Auto"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Fill="Transparent" />
                    <Border
                        x:Name="ScrollBarRectangle"
                        Width="Auto"
                        Height="Auto"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Background="{TemplateBinding Background}"
                        CornerRadius="5" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Tag" Value="Horizontal">
                        <Setter TargetName="ScrollBarRectangle" Property="Width" Value="Auto" />
                        <Setter TargetName="ScrollBarRectangle" Property="Height" Value="7" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
    <Setter Property="Margin" Value="-5,0,0,0" />
    <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
    <Setter Property="Foreground" Value="#FF8C8C8C" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Width" Value="8" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid
                    x:Name="GridRoot"
                    Width="8"
                    Background="{TemplateBinding Background}">
                    <Track
                        x:Name="PART_Track"
                        Focusable="false"
                        IsDirectionReversed="true">
                        <Track.Thumb>
                            <Thumb
                                x:Name="ScrollBarThumb"
                                Background="{TemplateBinding Foreground}"
                                Style="{StaticResource ScrollThumbs}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton
                                x:Name="PageUp"
                                Command="ScrollBar.PageDownCommand"
                                Focusable="false"
                                Opacity="0" />
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                            <RepeatButton
                                x:Name="PageDown"
                                Command="ScrollBar.PageUpCommand"
                                Focusable="false"
                                Opacity="0" />
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="ScrollBarThumb" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter TargetName="GridRoot" Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="PART_Track" Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width" Value="Auto" />
                        <Setter Property="Height" Value="8" />
                        <Setter TargetName="ScrollBarThumb" Property="Tag" Value="Horizontal" />
                        <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />
                        <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

字符串

赞(0）回复(0）举报 11个月前

lymnna712#

最后，我找到了一个解决方案的工作，我做了它的帮助This site

的数据