Change the background color of a focused TextBox to transparent using Avalonia

Question

I've tried to change the Background color of a focused TextBox to transparent in Avalonia.

The Textbox is in a Templated User Control and I want it to be fully transaparent since it's inside a border.

I've tried using styles and resources (a transparent brush), here's the code of the control

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:AIVA.CustomComponents"
        >
    
    <Style Selector="TextBox:focus-within">
        <Setter Property="Background" Value="{DynamicResource TransparentBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource TransparentBrush}" />
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Foreground" Value="Black" />
    </Style>
    
    <Design.PreviewWith>
        <Border Background="Aquamarine" Padding="100">
            <StackPanel>
                <controls:CustomInputField LabelText="ID" />
                <controls:CustomInputField/>
            </StackPanel>
        </Border>
        
    </Design.PreviewWith>

    <Style Selector="controls|CustomInputField">
        <Setter Property="Background" Value="Transparent"></Setter>
        <!-- Set Defaults -->
        <Setter Property="Template">
            <ControlTemplate>
                <Border
                    Width="350"
                    Height="25"
                    Margin="0,25,0,0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    BorderBrush="Black"
                    BorderThickness="0,0,0,2">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock
                            Width="100"
                            Height="26"
                            VerticalAlignment="Center"
                            FontFamily="Montserrat"
                            FontSize="18"
                            FontWeight="Medium"
                            Text="{TemplateBinding LabelText}"
                            TextAlignment="Left" />

                        <TextBox
                            x:Name="TextInput"
                            Width="250"
                            Height="26"
                            VerticalContentAlignment="Center"
                            Background="{DynamicResource TransparentBrush}"
                            BorderThickness="0,0,0,0"
                            FontSize="18"
                            FontWeight="Medium"
                            TextAlignment="Center"
                            Text="{TemplateBinding InputText}"
                            
                            >
                            
                        </TextBox>
                    </StackPanel>

                </Border>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

https://imgur.com/5QLtNeC

(Only the non-focused one keeps the transparent background)

Here are some styles thatI I've also tried

<Style Selector="TextBox.CustomInput">
        <Setter Property="Background" Value="{DynamicResource TransparentBrush}"></Setter>
        <Setter Property="BorderBrush" Value="{DynamicResource TransparentBrush}"></Setter>
        
    </Style>
    <Style Selector="TextBox.CustomInput:focus-within">
        <Setter Property="Background" Value="{DynamicResource TransparentBrush}"></Setter>
        <Setter Property="BorderBrush" Value="{DynamicResource TransparentBrush}"></Setter>
        
    </Style>

https://i.imgur.com/w8XxUvg.png

(There are 2 TextBoxes in this image)

I did my research and it has something to do with the Avalonia Fluent Theme, but I can't remove that package since some components need that to render correctly.

Any help would come in hand, thanks in advance.

Answer 1

By referring to the Documentation Selector with a pseudoclass doesn't override the default you need to override the TextBox default template

the following code will make what you want to achive

<Style Selector="TextBox:focus-within /template/ Border">
  <Setter Property="Background" Value="{DynamicResource TransparentBrush}" />
  <Setter Property="BorderBrush" Value="{DynamicResource TransparentBrush}" />
  <Setter Property="BorderThickness" Value="0"></Setter>              
</Style>

<Style Selector="TextBox:pointerover /template/ Border">
  <Setter Property="Background" Value="{DynamicResource TransparentBrush}" />
  <Setter Property="BorderBrush" Value="{DynamicResource TransparentBrush}" />
  <Setter Property="BorderThickness" Value="0"></Setter>
</Style>