CODEWITHSUNDEEP
xamlavaloniaui
Relaxo
Relaxo

Reputation: 95

Is Selector in Avalonia Style

I have a baseButtonStyle, which should apply to all Buttons and all derived types. It works well for all Buttons (excluding derived).

<Style x:Key="BaseButtonStyle" Selector="is Button" >
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{StaticResource SecondaryFontBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource BlueButtonNormalBorderBrush}"/>
    <Setter Property="Background" Value="{StaticResource BlueButtonNormalBackgroundBrush}"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Padding" Value="10"/>
    <Setter Property="Margin" Value="10"/>
</Style>

Now I have an AdditionalTextButton derived from Button.

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using System;

namespace VW7OrbMachineAvalonia1.Components.Controls
{

    public class AdditionalTextButton : Button
    {

        Type IStyleable.StyleKey => typeof(AdditionalTextButton);

        /// <summary>
        /// Bottom left displayed Text
        /// </summary>
        public string BottomLeftText
        {
            get { return (string)GetValue(BottomLeftTextProperty); }
            set { SetValue(BottomLeftTextProperty, value); }
        }

        public static readonly StyledProperty<String> BottomLeftTextProperty =
            AvaloniaProperty.Register<AdditionalTextButton, String>("BottomLeftText");
    }
}

My understanding of the style behavior of Avalonia is, that the BaseButtonStyle should apply to to AdditionalTextButton because of the is Button Selector. But this does not happen.

Beside that, I have another style which should apply to all AdditionaltextButtons. This also works fine.

<Style x:Key="additionalTextButtonStyle" Selector="is vwaui:Additionaltextbutton">
    <Setter Property="FontSize" Value="22"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom"  TextWrapping="Wrap" Text="{TemplateBinding BottomLeftText}"/>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"  TextWrapping="Wrap" Text="{TemplateBinding Content}"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
</Style>

How can I get the result, that the AdditionalTextButton is styled by the BaseButtonStyle AND by the AdditionalTextButtonStyle? Setters from AdditionalTextButtonStyle should overwrite setters from BaseButtonStyle.

Upvotes: 0

Views: 2353

Answers (2)

Grokys
Grokys

Reputation: 16526

The problem is that your is selector syntax is wrong. If you change it to be:

Selector=":is(Button)"

and

Selector=":is(vwaui|Additionaltextbutton)"

Then this should work as expected.

Upvotes: 3

DanUK86
DanUK86

Reputation: 33

Avalonia doesn't have the concept of inheriting styles directly. The area that Avalonia diverges from WPF, UWP, etc the most is its styling system. Avalonia's styling system is more similar to CSS.

So to achieve this you can use classes.

for example say you declare in XAML 3 buttons:

<Button />
<Button Classes="buttonStyle1" />
<Button Classes="buttonStyle1 buttonStyle2" />

you can then add styles like:

<Style Selector="Button">
     <Setter Property="FontSize" Value="12" />
</Style>

<Style Selector="Button.buttonStyle1">
     <Setter Property="FontWeight" Value="Bold" />
</Style>

<Style Selector="Button.buttonStyle2">
     <Setter Property="Foreground" Value="Red" />
</Style>

This way you can compose or inherit several styles at once.

You can also override the template in a style if you want to significantly change the look.

Upvotes: 0

Related Questions