编程语言
首页 > 编程语言> > c#-带有三角拇指的自定义WPF滑块

c#-带有三角拇指的自定义WPF滑块

作者:互联网

我的目标是制作一个像这样的滑块:

Desired Slider

问题是,当我将滑块移至最大值时,三角形的点将不会到达最大值处的顶部,而是这样保持:

Max value

我认为这是因为Thumb的位置受到其大小的限制,因此它不能超出滑块的限制….但是就我而言,这正是我想要实现的目标!我试图更改Thumb的高度,但这可能对顶部有所帮助,但是这将是滑块底部的问题.

我的代码中缺少什么?

到目前为止,我的代码是:

狡猾的人

<Slider Grid.Row="1"
        Grid.Column="1"
        Maximum="1000" 
        Orientation="Vertical" 
        HorizontalAlignment="Center"
        Margin="20,0,20,20"
        Height="150" 
        Style="{DynamicResource LampadaSliderStyle}" />

重复按钮样式:

<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Rectangle Fill="Transparent"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

拇指样式:

<Style x:Key="LampadaThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="Width" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Canvas SnapsToDevicePixels="true">                        
                    <Path Data="M8.1965079,-17.994989 L28.196667,-28.213333 28.196333,-8.213772 z" 
                          Fill="Black" 
                          Height="20" 
                          Canvas.Left="23.197" 
                          Stretch="Fill" 
                          Canvas.Top="9.768" 
                          Width="20"/>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

滑块样式:

<Style x:Key="LampadaSliderStyle" TargetType="{x:Type Slider}">
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <UniformGrid x:Name="TrackBackground" 
                                     Rows="6" 
                                     Columns="0">
                            <Rectangle Fill="Red" />
                            <Rectangle Fill="Orange" />
                            <Rectangle Fill="Yellow" />
                            <Rectangle Fill="LightGreen" />
                            <Rectangle Fill="Green" />
                            <Rectangle Fill="DarkGreen" />
                        </UniformGrid>
                        <Canvas Margin="-1,-6">
                            <Rectangle x:Name="PART_SelectionRange" 
                                               Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
                                               Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" 
                                               StrokeThickness="1.0" 
                                               Visibility="Hidden" 
                                               Width="4.0"/>
                        </Canvas>
                        <Track x:Name="PART_Track">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb x:Name="Thumb" Style="{DynamicResource LampadaThumbStyle}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我通过编辑默认模板来制作它们.

解决方法:

您可以做的最简单的调整是将上边距设置为10(即路径高度的一半),以便将轨道背景放得足够低,以使三角形尖端匹配:

<UniformGrid x:Name="TrackBackground" Rows="6" Columns="0" 
             Margin="0,10,0,0">
     <!-- ... -->
</UniformGrid>

您在1个以上的位置拥有UniformGrid,因此请对其进行相应的编辑.

标签:customization,slider,wpf,c
来源: https://codeday.me/bug/20191119/2037010.html