Is Selector in Avalonia Style - xaml

I have a baseButtonStyle, which should apply to all Buttons and all derived types. It works well for all Buttons (excluding derived).
<Style x:Key="BaseButtonStyle" Selector="is Button" >
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{StaticResource SecondaryFontBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource BlueButtonNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource BlueButtonNormalBackgroundBrush}"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Margin" Value="10"/>
</Style>
Now I have an AdditionalTextButton derived from Button.
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using System;
namespace VW7OrbMachineAvalonia1.Components.Controls
{
public class AdditionalTextButton : Button
{
Type IStyleable.StyleKey => typeof(AdditionalTextButton);
/// <summary>
/// Bottom left displayed Text
/// </summary>
public string BottomLeftText
{
get { return (string)GetValue(BottomLeftTextProperty); }
set { SetValue(BottomLeftTextProperty, value); }
}
public static readonly StyledProperty<String> BottomLeftTextProperty =
AvaloniaProperty.Register<AdditionalTextButton, String>("BottomLeftText");
}
}
My understanding of the style behavior of Avalonia is, that the BaseButtonStyle should apply to to AdditionalTextButton because of the is Button Selector. But this does not happen.
Beside that, I have another style which should apply to all AdditionaltextButtons. This also works fine.
<Style x:Key="additionalTextButtonStyle" Selector="is vwaui:Additionaltextbutton">
<Setter Property="FontSize" Value="22"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" TextWrapping="Wrap" Text="{TemplateBinding BottomLeftText}"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I get the result, that the AdditionalTextButton is styled by the BaseButtonStyle AND by the AdditionalTextButtonStyle? Setters from AdditionalTextButtonStyle should overwrite setters from BaseButtonStyle.

The problem is that your is selector syntax is wrong. If you change it to be:
Selector=":is(Button)"
and
Selector=":is(vwaui|Additionaltextbutton)"
Then this should work as expected.

Avalonia doesn't have the concept of inheriting styles directly. The area that Avalonia diverges from WPF, UWP, etc the most is its styling system. Avalonia's styling system is more similar to CSS.
So to achieve this you can use classes.
for example say you declare in XAML 3 buttons:
<Button />
<Button Classes="buttonStyle1" />
<Button Classes="buttonStyle1 buttonStyle2" />
you can then add styles like:
<Style Selector="Button">
<Setter Property="FontSize" Value="12" />
</Style>
<Style Selector="Button.buttonStyle1">
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style Selector="Button.buttonStyle2">
<Setter Property="Foreground" Value="Red" />
</Style>
This way you can compose or inherit several styles at once.
You can also override the template in a style if you want to significantly change the look.

Related

Style reference works on UWP but not on Android or Wasm

I have defined a Style as a UserControl's resource.
...
<UserControl.Resources>
<Style x:Key="BottomBarButton" TargetType="Button">
<Setter Target="Background" Value="Transparent"/>
<Setter Target="BorderThickness" Value="1"/>
<Setter Target="HorizontalAlignment" Value="Stretch"/>
<Setter Target="VerticalAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
...
and it's used
...
<Button Grid.Column="0" Style="{StaticResource BottomBarButton}">
...
</Button>
<Button Grid.Column="1" Style="{StaticResource BottomBarButton}">
...
</Button>
...
This work on UWP, but the style does not apply on Android or Wasm. These are the only tested platforms
Must use Property instead of Target.
<Style x:Key="BottomBarButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
You've defined the style named "ButtonStyle" but are referencing a style named "BottomBarButton" (which I'm guessing is defined elsewhere).
Tried this?
<Button Grid.Column="0" Style="{StaticResource ButtonStyle}">
...
</Button>
<Button Grid.Column="1" Style="{StaticResource ButtonStyle}">
...
</Button>

Using Same MahApps Button Style Twice in Single UserControl Isn't Working

I have a series of button styles (add, edit, delete, etc.) that make use of the MahApps Metro cirucular button style but apply specific images to the button style. When I use any of the styles only once in a UserControl they work just fine and I get the anticipated look from the styles. However, when I use the styles more than once in a single UserControl, only one of the style instances acts as behaved, the others drop the image I am expecting to see.
I have tried naming the specific control instances (in case it was some sort of lifetime management issue) that are using the styles to see if this would fix the issue but it did not. I also tried creating multiple buttons that use the same style properties but do not use the style and that DID work and the buttons showed correctly, but I don't want to go that route as that would defeat the purpose of the styles.
Below is my code for the resource dictionary where I define the button styles. Please note that I have only shown the style for the add button as the other ones are basically the exact same I just change the image type and tool tip. That's why there is the circular button base that I use to define the majority of the style properties.
<!--Reference Dictionaries-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--Circular Control Button Base-->
<Style x:Key="CircularControlButtonBase" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource GrayBrush1}"/>
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<!--IsMouseOver Trigger-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush4}"/>
<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!--IsEnabled Trigger-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Metro.Brushes.Badged.DisabledBackgroundBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--Add Button-->
<Style TargetType="Button" x:Key="AddButton" BasedOn="{StaticResource CircularControlButtonBase}">
<Setter Property="ToolTip" Value="Add"/>
<!--Icon Image-->
<Setter Property="Content">
<Setter.Value>
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<iconPacks:PackIconMaterial Kind="Plus"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And I consume the styles like this.
<UserControl x:Class ="TestClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--The image on this button won't come through.-->
<Button Style="{DynamicResource AddButton}"/>
<!--The image on this button will come through.-->
<Button Style="{DynamicResource AddButton}"/>
</UserControl>
I would expect that the the plus sign image would come through on both buttons, instead of just the last button in the xaml code. Any help would be appreciated.
The IconPacks control inside your style will be only created once. You can use the IconPacks control inside the ControlTemplate and bind to the content which is the enum value to avoid this issue:
<Style x:Key="AddButton"
BasedOn="{StaticResource CircularControlButtonBase}"
TargetType="Button">
<Setter Property="ToolTip" Value="Add"/>
<Setter Property="Content" Value="{x:Static iconPacks:PackIconMaterialKind.Plus}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconMaterial Width="20" Height="20" Kind="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
</StackPanel>
Namespace are:
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

ControlTemplate Trigger

<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="6" Padding="2" BorderBrush="Black" BorderThickness="2,1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code above is currently what I have for my text box. What do I put in the ControlTemplate.Trigger in order for my border to change from its color black to Blue or increase the Border size when it is clicked on. I have tried a few things without any luck. This includes style.Triggers and events. Please post the code that goes between the ControlTemplate.Trigger.
This assumes you want to border to be changed when you have it focused, since clicking a textbox focuses it. There is no OnClick property available, this changes the border of a textbox once you have it focused.
<Trigger Property="IsKeyboardFocusWithin"
Value="True">
<Setter Property="BorderBrush"
TargetName="Border"
Value="Blue"/>
</Trigger>
Edit:
To simply remove focus, add the following MouseDown event handler to your Window or Page:
MouseDown="Window_MouseDown"
And in your code behind:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
Keyboard.ClearFocus();
}
This will correctly remove focus from your TextBox and thus unset the trigger to have a black bar again.

How Can I Create a Bound List of RadioButtions with ToolTips in Xaml?

I want to create a list of logically related RadioButtons. The RadioButtons are bound for MVVM use. There's ToolTips on each RadioButtons.
Here is a Style that creates a group of logically related RadioButtons by using a ListBox. MyClass contains two String properties: MyName and MyToolTip. The style will display the list of RadioButtons including properly functioning individual ToolTips. This is an all bound, all Xaml solution for MVVM use.
Example usage:
ListBox Style="{StaticResource radioListBox}" ItemsSource="{Binding MyClasses}" SelectedValue="{Binding SelectedMyClass}"/>
Style:
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}" Content="{Binding MyName}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding MyToolTip}" />
</Style>
</Setter.Value>
</Setter>
</Style>

XAML UserControl datatrigger

I have a UserControl in XAML with a couple of buttons....
When the "VideoEnable" property in my C# code change to true I want to change the color of a button.
The following code compiles but crashes and I can't find a right solution
<UserControl.Triggers>
<DataTrigger Binding="{Binding VideoEnable}" Value="true">
<Setter Property="Button.Background" Value="Green" TargetName="VideoButton" />
<Setter Property="Grid.Background" Value="Blue" TargetName="videoGrid" />
</DataTrigger>
</UserControl.Triggers>
Now i have tried with the following code, it does not crash but the background does not change :s
<UserControl.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Videos}" Value="true">
<Setter Property="Button.Background" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
public string Videos
{
get { return m_videos; }
set
{
m_videos = value;
NotifyPropertyChanged("Videos");
}
}
Ok, I found the problem...
This is my button
<Button DataContext="{Binding LensesBtn}" Margin="0,5,0,0" FontSize="14" FontWeight="Bold" Height="40" Opacity="0.8" HorizontalAlignment="Stretch" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Button.Background>#dbebf9</Button.Background>
<Button.BorderBrush>PowderBlue</Button.BorderBrush>
<Button.BorderThickness>4</Button.BorderThickness>
Lenses
</Button>
When I delete the DataContext, Style and Background properties it all works....
But i really need this properties
any tips?
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Videos" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
this is the example you need if your code is valid.
you can also add a converter in order to check the background and other properties.