Why do I need to reimplement a ResourceDictionary to access some of it's properties?

[Trevo525]

I am new to Avalonia UI, so my question might not be asked ideally. I will try to explain it through code and see if I can get my point across that way. We are using the Fluent theme. So, we created a Checkbox UserControl to implement some logic that has to do with validation, among other things:

<reactiveUi:ReactiveUserControl x:TypeArguments="configuration:CheckboxConfigEntryViewModel"
                                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"
                                xmlns:reactiveUi="http://reactiveui.net"
                                xmlns:configuration="clr-namespace:MyApp.ViewModels.Configuration.ConfigEntries"
                                mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
                                x:Class="MyApp.Views.Configuration.ConfigEntries.CheckboxConfigEntryView"
                                x:DataType="configuration:CheckboxConfigEntryViewModel"
                                Classes.DisabledConfigEntry="{Binding !IsEnabled}">
    <UserControl.Styles>
        <StyleInclude Source="/Styles/ConfigExpanderPanelStyles.axaml" />
    </UserControl.Styles>

    <ToolTip.Tip>
        <TextBlock x:Name="LblToolTip" />
    </ToolTip.Tip>
    <Grid HorizontalAlignment="Stretch"
          RowDefinitions="Auto,Auto"
          ColumnDefinitions="Auto,Auto,*">
        <CheckBox Grid.Row="0" Grid.Column="1"
                  x:Name="ChkPropertyValue"
                  IsThreeState="False"
                  AutomationProperties.Name="{Binding AutomationName}"
                  AutomationProperties.AutomationId="{Binding AutomationId}" />
        <TextBlock Grid.Row="0" Grid.Column="2"
                   x:Name="LblPropertyName"
                   Classes="ExpanderLbl" />
        <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
                   x:Name="LblValidationError"
                   Classes="ValidationError" />
    </Grid>
</reactiveUi:ReactiveUserControl>

I changed the height and width of the checkbox per a specification I was given by our design team, but then the checkbox was clipped on the right side. Using the devtools I can see where the issue comes from


I did a lot of testing in the DevTools and found that I can get it to look pretty close to what I want but I need to edit some values in the second Grid. So, I put a Styles in the Checkbox and tried to select that grid. I used lime as the background to show that I found the correct thing as well.

<CheckBox Grid.Row="0" Grid.Column="1" Height="16" Width="16"
            x:Name="ChkPropertyValue"
            IsThreeState="False"
            AutomationProperties.Name="{Binding AutomationName}"
            AutomationProperties.AutomationId="{Binding AutomationId}">
    <CheckBox.Styles>
        <Style Selector="CheckBox /template/ Grid#RootGrid Grid">
            <Setter Property="Background" Value="Lime" />
        </Style>
    </CheckBox.Styles>
</CheckBox>

It did not find it. I tried all sorts of things to find that control and couldn't find any luck. I did get it to work eventually by making a new ResourceDictionary, copying the contents from the Fluent theme repo and implementing that instead like the following:

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceInclude Source="/Controls/Checkbox.axaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

Then I can just edit the control directly. However, this brings with it two problems. It adds a whole new file with many more lines of code than I actually needed to change. Secondly, if the repo gets updated for the Fluent theme, we will not get that update because we are overwriting the entire thing.

So, my question is this, was there a selector that I am missing that would have let me select that grid or did I just fundamentally misunderstand something about Avalonia UI?

[stevemonaco]

Can you clarify your post?

First you say:

So, I put a Styles in the Checkbox and tried to select that grid. I used lime as the background to show that I found the correct thing as well.

Then show an example of a selector that does as such. Which works in my testing. Then you say:

It did not find it. I tried all sorts of things to find that control and couldn't find any luck.

???

For some general insight, selectors can fail to work as expected for a number of reasons. The biggest reasons are that devs don't read the underlying ControlTheme for the theme they're using nor do they understand setter precedence. It's similar to using an API that you haven't read the docs for. Themes are opinionated in arrangement of controls, colors, spacing, and sizes. When a design team dictates visual appearance based on their own widgets, they are immediately in conflict with preexisting themes. Exposing all of these in a configurable manner is very tedious for Theme devs and every indirection has a small impact. Fluent theme has something around 2k+ resources already, mostly color and brush-related.

For your issue, CheckBox in Fluent contains a fair number of hardcoded sizes. If your approach does require a replacement for sizing fixups, I would probably create a ControlTheme with BasedOn so you only need to replace the ControlTemplate and the MinHeight on the CheckBox. The rest of the setters/selectors shouldn't need redefined.

[Trevo525]

Either I needed the weekend to come at it with a fresh pair of eyes, or my computer needed to be turned off. It's working this morning.

I don't see anything about how to use BasedOn in the documentation. I'll try to give it a try. But, if you have a good example that uses it that would be greatly appreciated!

[stevemonaco]

I'm not sure if there are any docs for BasedOn. You can search this repository, filter for XML, and find examples like

Avalonia/src/Avalonia.Themes.Simple/Controls/Expander.xaml

Lines 84 to 92 in b66471b

	<ControlTheme x:Key="SimpleExpanderToggleButtonUpTheme"
	BasedOn="{StaticResource SimpleExpanderToggleButtonTheme}"
	TargetType="ToggleButton">
	<Style Selector="^ /template/ Path">
	<Setter Property="RenderTransform">
	<RotateTransform Angle="-90" />
	</Setter>
	</Style>
	</ControlTheme>

[Trevo525]

That's very helpful. Thank you for your time!