Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

All Styles don't work.

See original GitHub issue

Code built on Microsoft Visual Studio Community 2019 Version 16.8.4

Describe the bug All Styles don’t work.

To Reproduce Steps to reproduce the behavior:

Create a new Avalonia Empty project
Add code to MainWindow.axaml

  <Window.Styles>
    <Style Selector="Button:pointerover">
      <Setter Property="Background" Value="Red"/>
    </Style>
    <Style Selector="TextBox:focus /template/ Border#border">
      <Setter Property="BorderBrush" Value="Red" />
    </Style>
    <Style Selector="TextBox:pointerover /template/ Border#border">
      <Setter Property="BorderBrush" Value="Red"/>
    </Style>
  </Window.Styles>

  <StackPanel>
    <Button Content="Test" />
    <TextBox Text="Some text" />
  </StackPanel>

Build the project
Start the project

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

4reactions

maxkatz6commented, Feb 2, 2021

Why Button doesn’t work: ContentPresenter inside of template changes background, not the whole button. This behavior is by design, otherwise it would break expected from WPF behavior. See https://github.com/AvaloniaUI/Avalonia/pull/2662#issuecomment-515764732 and related PR.

Why TextBox doesn’t work: There is no Border with name “border” in Fluent theme - https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml

Fixed styles:

<Style Selector="Button:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Red"/>
</Style>
<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
  <Setter Property="BorderBrush" Value="Red" />
</Style>
<Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
  <Setter Property="BorderBrush" Value="Red"/>
</Style>

3reactions

TesAnticommented, Sep 2, 2021

For those who don’t want their TextBox appearance change when focus changes(maybe you are making onscreen keyboard as me):

<Style Selector="TextBox">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#ccc" />
</Style>
<Style Selector="TextBox /template/ Border#PART_BorderElement">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#ccc" />
</Style>
<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#ccc" />
</Style>