C#•4w ago

Avalonia Data Trigger

Does anyone know if you can do data triggers in avalonia what i want to do is change the background color of a button if it is selected or not or could i do this with a checkbox but i want to change the check box to a star or some type of shape ... the shape would start out not filled and if it is selected then it would be filled ... can you change the shape of a check box?

14 Replies

ero•4w ago

<Button ...>
  <Button.Styles>
    <Style Selector="Button:pointerover">
      <Setter Property="Background" Value="Red" />
    </Style>
  </Button.Styles>
</Button>

<Button ...>
  <Button.Styles>
    <Style Selector="Button:pointerover">
      <Setter Property="Background" Value="Red" />
    </Style>
  </Button.Styles>
</Button>

would this do what you're looking for?

Neo | QuantFreedomOP•4w ago

no ... i am looking to change the background if the button is clicked which would turn IsSelected to true then when it is clicked again it would change the background and would change IsSelected to false

ero•4w ago

so you're looking for ToggleButton i guess?

<ToggleButton.Styles>
  <Style Selector="ToggleButton:checked">
    <Setter Property="Background" Value="Red"/>
  </Style>
  <Style Selector="ToggleButton:not(:checked)">
    <Setter Property="Background" Value="Blue"/>
  </Style>
</ToggleButton.Styles>

<ToggleButton.Styles>
  <Style Selector="ToggleButton:checked">
    <Setter Property="Background" Value="Red"/>
  </Style>
  <Style Selector="ToggleButton:not(:checked)">
    <Setter Property="Background" Value="Blue"/>
  </Style>
</ToggleButton.Styles>

or omit the :not(:checked) bit, which will default to the default color you set on the button, when not checked

Neo | QuantFreedomOP•4w ago

oh wow ... i had no idea they had a built in toggle button but now the checked or unchecked needs to be bound to a bool If true then checked if false then unchecked

ero•4w ago

ToggleButton IsChecked="{Binding ...}"?

Neo | QuantFreedomOP•4w ago

i am so dumb ... i should read the documentation before i ask questions @ero do you know how to change the background of the togglebutton when the you hover your mouse over the button? if you do can you send me working code because i can only get the background to be trasnparent when it is unchecked When its checked it is blue and when you hover your mouse over it, it turns grey

    <UserControl.Styles>
        <Style Selector="ToggleButton:pointerover">
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:checked">
            <Setter Property="FontFamily" Value="{StaticResource FaSolid}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:unchecked">
            <Setter Property="FontFamily" Value="{StaticResource FaRegular}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
    </UserControl.Styles>

    <UserControl.Styles>
        <Style Selector="ToggleButton:pointerover">
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:checked">
            <Setter Property="FontFamily" Value="{StaticResource FaSolid}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:unchecked">
            <Setter Property="FontFamily" Value="{StaticResource FaRegular}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
    </UserControl.Styles>

nevermind i guess you are supposed to do it this way

    <UserControl.Styles>
        <Style Selector="ToggleButton:checked /template/ ContentPresenter">
            <Setter Property="FontFamily" Value="{StaticResource FaSolid}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:unchecked /template/ ContentPresenter">
            <Setter Property="FontFamily" Value="{StaticResource FaRegular}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
    </UserControl.Styles>

    <UserControl.Styles>
        <Style Selector="ToggleButton:checked /template/ ContentPresenter">
            <Setter Property="FontFamily" Value="{StaticResource FaSolid}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
        <Style Selector="ToggleButton:unchecked /template/ ContentPresenter">
            <Setter Property="FontFamily" Value="{StaticResource FaRegular}" />
            <Setter Property="Background" Value="Transparent" />
        </Style>
    </UserControl.Styles>

ero•4w ago

ah yeah, never sure when you need to use that

Neo | QuantFreedomOP•4w ago

how long have you been working with avalonia? also is it your main way to create desktop apps or do you use maui

ero•4w ago

i'm starting out :) i've done some work in wpf in the past, but wanna build something that's crossplatform i haven't looked at maui

Neo | QuantFreedomOP•4w ago

this is what i have so far for developing my proof of concept

Neo | QuantFreedomOP•4w ago

Honza K.•4w ago

you have to use template selector whenever in the default template they decided to change some properties of something that isn't shown in logical tree of the control, in case of a button, the background is set on a ContentPresenter and in case of :pointerover trigger, they're setting the background the same way you have to, they select the parent (button/toogle button), go into template selector and select ContentPresenter#PART_ContentPresenter (ContentPresenter type with PART_ContentPresenter name) and set the Background property to some value

Honza K.•4w ago

you can also select something by some of its property value https://docs.avaloniaui.net/docs/reference/styles/style-selector-syntax#by-property-match

Style Selector Syntax | Avalonia Docs

REFERENCE - Styles

Honza K.•4w ago

You can also apply classes to a control based on some condition, which can be pretty handy https://docs.avaloniaui.net/docs/basics/user-interface/styling/style-classes#conditional-classes

Style Classes | Avalonia Docs

You can assign an Avalonia UI control one or more style classes, and use these to guide style selection. Style classes are assigned in a control element using the Classes attribute. If you want to assign more than one class, then use a space-separated list.

Gaming

Programming

Avalonia Data Trigger