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
ero5w 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 | QuantFreedom
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
ero5w 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 | QuantFreedom
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
ero5w ago
ToggleButton IsChecked="{Binding ...}"?
Neo | QuantFreedom
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
ero5w ago
ah yeah, never sure when you need to use that
Neo | QuantFreedom
how long have you been working with avalonia? also is it your main way to create desktop apps or do you use maui
ero
ero5w 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 | QuantFreedom
this is what i have so far for developing my proof of concept
Honza K.
Honza K.5w 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.
Honza K.5w 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.
Want results from more Discord servers?
Add your server