Style selectors not working in custom control.

[Shadowblitz16]

Describe the bug

I am using a custom control for a preview for my style.
However when I try to use the Button selector to select all buttons and add a padding and corner radius it doesn't update in the designer.

To Reproduce

• Create a new mvvm avalonia project called SMBX
• Paste this in Views/MainView.axaml

<Grid 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="SMBX.Views.MainView">
    <Grid RowDefinitions="Auto, *, Auto">
        <Menu>
            <MenuItem Header="File">
                <MenuItem Header="New..">
                    <MenuItem Header="Level"/>
                    <MenuItem Header="World"/>
                    <Separator/>
                    <MenuItem Header="Block"/>
                </MenuItem>
                <Separator/>
                <MenuItem Header="Open..">
                    <MenuItem Header="Level"/>
                    <MenuItem Header="World"/>
                </MenuItem>
                <Separator/>
                <MenuItem Header="Save"/>
                <MenuItem Header="Save As..">
                    <MenuItem Header="Level"/>
                    <MenuItem Header="World"/>
                </MenuItem>
                <Separator/>
                <MenuItem Header="Quit"/>
            </MenuItem>
        </Menu>
        <Canvas Grid.Row="1" Background="Black">
            
        </Canvas>
        <StackPanel Grid.Row="2" Orientation="Horizontal">
            <ToggleButton Content="Select"/>
            <ToggleButton Content="Erase"/>
            <Separator/>
            <ToggleButton Content="Blocks"/>
        </StackPanel>
    </Grid>
</Grid>

• Paste this in Views/MainView.axaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace SMBX.Views;

public partial class MainView : Grid
{
    public MainView()
    {
        InitializeComponent();
    }
}

• Paste this in Styles/Default.axaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:v="using:SMBX.Views">
    <Design.PreviewWith>
        <v:MainView Width="800" Height="450"/>
    </Design.PreviewWith>

    <!-- Add Styles Here -->
    <Styles>
        <Style Selector="Button">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/>
        </Style>
    </Styles>
</Styles>

Expected behavior

The Button's in the MainView in the Default style preview should have a padding of 3 and a corner radius of 3.

Avalonia version

11.1.0

OS

Linux

Additional context

No response

[Shadowblitz16]

I tested it and using a user control instead of deriving from Grid doesn't work either.

[Shadowblitz16]

This works for all controls..

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:v="using:SMBX.Views">
    <Design.PreviewWith>
         <v:MainView Width="800" Height="450" Theme="{StaticResource Slick}"/>
    </Design.PreviewWith>
    
    <ControlTheme x:Key="Slick" TargetType="v:MainView">
        <Style Selector="^">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#505050"/>
        </Style>
        <Style Selector="^:pointerover">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#606060"/>
        </Style>
        <Style Selector="^:pressed">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#404040"/>
        </Style>
    </ControlTheme>
    
</ResourceDictionary>

This does not work for all buttons...

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:v="using:SMBX.Views">
    <Design.PreviewWith>
         <v:MainView Width="800" Height="450" Theme="{StaticResource Slick}"/>
    </Design.PreviewWith>
    
    <ControlTheme x:Key="Slick" TargetType="v:MainView">
        <Style Selector="Button">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#505050"/>
        </Style>
        <Style Selector="Button:pointerover">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#606060"/>
        </Style>
        <Style Selector="Button:pressed">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="CornerRadius" Value="3"/> 
            <Setter Property="Background" Value="#404040"/>
        </Style>
    </ControlTheme>
    
</ResourceDictionary>

[stevemonaco]

This isn't a bug / issue and should be moved to discussion.

This isn't how you write a ControlTheme. You don't write them for an app view. In this case, you write them for a Button and you should write the ControlTemplate, too. They require a unique x:Key, generally the type for the default. Then you merge it.

Unfortunately, AvaloniaRider seems to ship its own project template content for "Avalonia Templated Control" which still uses the Avalonia 0.10.x approach (with Styles instead of ControlTheme). I just realized that about two days ago. Instead of using what's available in the official templates.

Spend time studying the Avalonia Simple and Fluent themes. There are also third-party ones. Start with Button and expand to more complex controls.

[Shadowblitz16]

@stevemonaco That's a terrible way to design themes.
You can't tell how controls are going to look together unless you use an app view.

I need a way to style controls and test them in an actual real world use case.
Not just a single element.

As far as I am concerned this should be a issue.
Avalonia's tools for theming are terrible and if this is a limitation of the library it should be fixed.

[stevemonaco]

There's no issue. I'm saying that your single control design approach is wrong.

You can still write normal app pages to test the entire look. This is what every control catalog does: Avalonia's own, plus over half a dozen other third-party styling libraries. However, this view should not be part of your styling library's project because if you do, it will get shipped in your package. I suggest you clone one a well-maintained one and actually play around with it for awhile to get some ideas.

Also, don't do this: public partial class MainView : Grid. Not all controls support bolting on XAML, AFAIK. Just derive from UserControl.

[Shadowblitz16]

@stevemonaco someone explain it to me on discord.

A theme is avalonia is a collection of styles for a signal control not a collection of controls with styles
He explained that's what a resource dictionary is.