主页 / coding / 问题 / 78983341
Accepted
tridy
Asked: 2024-09-14 02:20:51 +0800 CST

造型 Avalonia 滑块控制

  • 772

我想要设置 Avalonia Slider Control 的尺寸和颜色样式。

从视觉上看，它似乎可以工作，但它会停止滑动功能，我尝试查看Slider 源代码以找出如何正确执行此操作，但无法弄清楚。这是我正在使用的代码：

<Border BorderThickness="1" BorderBrush="DarkGray" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Slider Width="200" Height="100" Margin="10" Minimum="120" Maximum="255" Value="210">
        <Slider.Styles>
            <Style Selector="Slider:horizontal">
                <Setter Property="MinWidth" Value="40" />
                <Setter Property="MinHeight" Value="20" />
                <Setter Property="Template">
                    <ControlTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" MinHeight="20" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="1" Height="6" Margin="6,0" VerticalAlignment="Center"
                                    Background="Orange" />
                            <Track Name="PART_Track" Grid.Row="1" Orientation="Horizontal">
                                <Thumb Name="thumb" MinWidth="20" MinHeight="20">
                                    <Thumb.Template>
                                        <ControlTemplate>
                                            <Ellipse Width="18" Height="18" StrokeThickness="3"
                                                     Stroke="Crimson" Fill="Green" />
                                        </ControlTemplate>
                                    </Thumb.Template>
                                </Thumb>
                            </Track>
                        </Grid>
                    </ControlTemplate>
                </Setter>
            </Style>
        </Slider.Styles>
    </Slider>
</Border>

带有呈现的 XAML 的窗口

看上去和预期的一样，但实际上并没有滑动。甚至没有设置初始值。

xaml

1 个回答

  1. Best Answer

    您遇到的问题是，您覆盖了模板，但未包含所有模板组件，因此现在缺少了一些东西。您不应该只为更改样式而设置控件模板。Avalonia 有一个强大的“向下钻取”选择器系统，允许您通过使用继承父选择器来设置模板中的任何样式^。通过在选择器前面加上该符号，您可以嵌套样式。

    <Style Selector="Slider:horizontal">
    <Setter Property="MinWidth" Value="40" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="Background" Value="Orange"/>
    <Setter Property="Foreground" Value="Orange"/>

    <Style Selector="^ Track">
        <Style Selector="^ RepeatButton Border">
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="Height" Value="6"/>
        </Style>
                        
        <Style Selector="^ Thumb">
            <Setter Property="Height" Value="18"/>
            <Setter Property="Width" Value="18"/>
            <Setter Property="BorderBrush" Value="Crimson"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="Background" Value="Green"/>
        </Style>
    </Style>

</Style>

    在上面我没有设置 :hover 伪类的样式，但我认为这应该可以为您提供执行此操作所需的信息。

    滑块的轨道实际上是一个 RepeatButton，单击它即可使其发挥作用。有两个这样的按钮，分别位于 Thumb 的两侧，因此，如果您希望两侧的样式不同，则必须通过其名称（例如 PART_IncreaseButton 和 PART_DecreaseButton）分别进行选择^ RepeatButton#PART_DecreaseButton Border。

    • 1

相关问题