使用 Avalonia 将焦点文本框的背景颜色更改为透明

Question

我尝试在 Avalonia 中将焦点文本框的背景颜色更改为透明。

文本框位于模板化用户控件中，我希望它完全透明，因为它位于边框内。

我尝试过使用样式和资源（透明画笔），这是控件的代码

<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

（只有不对焦的才保留透明背景）

以下是我也尝试过的一些款式

<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

（这张图中有2个文本框）

我做了研究，它与 Avalonia Fluent 主题有关，但我无法删除该包，因为某些组件需要它才能正确渲染。

任何帮助都会及时到来，提前致谢。

Answer 1

通过参考文档带有伪类的选择器不会覆盖默认值

以下代码将帮助您实现您想要的

<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>