Avalonia中Slider的RepeatButton PART_DecreaseButton自定义Template无法生效问题

问题原因 #

Avalonia默认Slider的内置控件模板中，PART_DecreaseButton和PART_IncreaseButton两个RepeatButton的Template属性是通过控件模板内的本地赋值设置的，根据Avalonia依赖属性优先级规则，本地值的优先级高于普通样式Setter，因此你在外部样式中设置的Template属性会被默认模板的本地值覆盖，无法生效。而Background属性没有在默认Slider模板内做本地赋值，所以样式设置可以正常生效。

解决方案 #

方案1：重写Slider完整ControlTemplate #

自定义Slider的控件模板，在模板内部直接修改两个RepeatButton的Template，规避优先级冲突：

<Style Selector="Slider.seekBar">
  <Setter Property="Template">
    <ControlTemplate TargetType="Slider">
      <!-- 可参考默认Slider的模板结构，仅修改两个RepeatButton的Template部分即可 -->
      <Grid>
        <Track Name="PART_Track" Orientation="{TemplateBinding Orientation}">
          <Track.DecreaseButton>
            <RepeatButton Name="PART_DecreaseButton" Focusable="False">
              <RepeatButton.Template>
                <!-- 你的自定义DecreaseButton模板 -->
                <ControlTemplate>
                  <Grid>
                    <Border Padding="0" BorderThickness="3,3,0,3" BorderBrush="Blue"
                            Background="Blue" Height="7"
                            IsHitTestVisible="False" />
                  </Grid>
                </ControlTemplate>
              </RepeatButton.Template>
            </RepeatButton>
          </Track.DecreaseButton>
          <Track.Thumb>
            <!-- 你的自定义Thumb模板可直接保留原逻辑 -->
          </Track.Thumb>
          <Track.IncreaseButton>
            <RepeatButton Name="PART_IncreaseButton" Focusable="False">
              <!-- 同理自定义IncreaseButton模板 -->
            </RepeatButton>
          </Track.IncreaseButton>
        </Track>
      </Grid>
    </ControlTemplate>
  </Setter>
</Style>

方案2：使用!important提升样式优先级（Avalonia 11.0+支持） #

如果使用Avalonia 11.0及以上版本，可以在样式Setter后加!Important标记，强制提升样式优先级，覆盖本地值：

<Style Selector="Slider.seekBar RepeatButton#PART_DecreaseButton">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Background" Value="Black" />
    <!-- 添加!Important强制生效 -->
    <Setter Property="Template" !Important>
        <ControlTemplate>
            <Grid>
                <Border Padding="0" BorderThickness="3,3,0,3" BorderBrush="Blue"
                        Background="Blue" Height="7"
                        IsHitTestVisible="False" />
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

内容的提问来源于stack exchange，提问作者Etienne Charland