3

I'm trying to override Avalonia's Slider theme. It's working on the Slider as a whole, and the Thumb gets updated too, but for some reason I'm unable to apply custom theme to the RepeatButtons PART_DecreaseButton and PART_IncreaseButton

In this case, the background DOES get set to Green, but the template property isn't being applied. Why?

<Style Selector="local|MediaPlayer Slider.seekBar RepeatButton#PART_DecreaseButton">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Background" Value="Green" />
    <Setter Property="Template">
        <ControlTemplate>
            <Grid>
                <Rectangle Height="11" /> <!-- Fill="#01FFFFFF" -->
                <Border Padding="0" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource MediaPlayerSeekBarBorderBrush}"
                        Background="{DynamicResource MediaPlayerSeekBarDecreaseBrush}" Height="7"
                        IsHitTestVisible="False" />
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

In contrast, the thumb is working

<Style Selector="local|MediaPlayer Slider.seekBar Thumb">
    <Setter Property="Template">
        <ControlTemplate>
            <Border BorderThickness="1" Height="11" Width="9"
                    Background="{DynamicResource MediaPlayerThumbFillBrush}"
                    BorderBrush="{DynamicResource MediaPlayerThumbBorderBrush}" />
        </ControlTemplate>
    </Setter>
</Style>

Default Slider.xaml implementation is here.

EDIT: Here's a simple window to reproduce it.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="HanumanInstitute.MediaPlayer.Avalonia.Sample.Window1"
        Title="Window1" Width="400" Height="200">
    <Window.Styles>
        <Style Selector="Slider.seekBar RepeatButton#PART_DecreaseButton">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Background" Value="Black" />
            <Setter Property="Template">
                <ControlTemplate>
                    <Grid>
                        <Border Padding="0" BorderThickness="3,3,0,3" BorderBrush="Blue"
                                Background="Blue" Height="7"
                                IsHitTestVisible="False" />
                    </Grid>
                </ControlTemplate>
            </Setter>
        </Style>
        <Style Selector="Slider.seekBar Thumb">
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Width="10" Height="30" Background="Gray" />
                </ControlTemplate>
            </Setter>
        </Style>
    </Window.Styles>
    <Slider Classes="seekBar" VerticalAlignment="Center" />
</Window>
Etienne Charland
  • 3,424
  • 5
  • 28
  • 58

0 Answers0