Develop Reference

Unable to Set Slider RepeatButton Template in Avalonia

I'm trying to override Avalonia's Slider theme. It's working on the Slider as a whole, and the Thumb gets updated too, but for some reason I'm unable to apply custom theme to the RepeatButtons PART_DecreaseButton and PART_IncreaseButton
In this case, the background DOES get set to Green, but the template property isn't being applied. Why?
<Style Selector="local|MediaPlayer Slider.seekBar RepeatButton#PART_DecreaseButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Background" Value="Green" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Rectangle Height="11" /> <!-- Fill="#01FFFFFF" -->
<Border Padding="0" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource MediaPlayerSeekBarBorderBrush}"
Background="{DynamicResource MediaPlayerSeekBarDecreaseBrush}" Height="7"
IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
In contrast, the thumb is working
<Style Selector="local|MediaPlayer Slider.seekBar Thumb">
<Setter Property="Template">
<ControlTemplate>
<Border BorderThickness="1" Height="11" Width="9"
Background="{DynamicResource MediaPlayerThumbFillBrush}"
BorderBrush="{DynamicResource MediaPlayerThumbBorderBrush}" />
</ControlTemplate>
</Setter>
</Style>
Default Slider.xaml implementation is here.
EDIT: Here's a simple window to reproduce it.
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="HanumanInstitute.MediaPlayer.Avalonia.Sample.Window1"
Title="Window1" Width="400" Height="200">
<Window.Styles>
<Style Selector="Slider.seekBar RepeatButton#PART_DecreaseButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border Padding="0" BorderThickness="3,3,0,3" BorderBrush="Blue"
Background="Blue" Height="7"
IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Slider.seekBar Thumb">
<Setter Property="Template">
<ControlTemplate>
<Border Width="10" Height="30" Background="Gray" />
</ControlTemplate>
</Setter>
</Style>
</Window.Styles>
<Slider Classes="seekBar" VerticalAlignment="Center" />
</Window>

WPF - Change ContentTemplate in DataTrigger of RepeatButton

I got the following issue which I need some help with.
(The code is simplified to show the problem I'm having)
I got a repeat button with a contenttemplate and style:
<UserControl x:Class="SR.Testing.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" SnapsToDevicePixels="True">
<StackPanel>
<RepeatButton x:Name="IncreaseButton" ContentTemplate="{StaticResource ArrowUpNormal}" Style="{StaticResource IncreaseRepeatButtonStyle}" Click="IncreaseClick" />
</StackPanel>
</Border>
</Grid>
</UserControl>
This is the datatemplate and the style:
<Geometry x:Key="UpArrowGeometry">M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z</Geometry>
<DataTemplate x:Key="ArrowUpNormal">
<Path Width="18"
Height="10"
Stretch="Fill"
Data="{StaticResource UpArrowGeometry}"
Fill="DarkOrange"
SnapsToDevicePixels="True"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False" />
</DataTemplate>
<DataTemplate x:Key="ArrowUpDisabled">
<Path Width="18"
Height="10"
Stretch="Fill"
Data="{StaticResource UpArrowGeometry}"
Fill="Green"
SnapsToDevicePixels="True"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False" />
</DataTemplate>
<Style x:Key="IncreaseRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Height" Value="40" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource ArrowUpDisabled}" />
</Trigger>
</Style.Triggers>
</Style>
After starting the application, the repeatbutton looks as intended (darkorange):
However, when I disable the RepeatButton (via codebehind) with "IncreaseButton.IsEnabled = false;"
I expected my style trigger to turn the arrow green:
But instead I get this (Arrow stays orange and the background turns white/gray):
What is causing this behaviour and how do I fix this? Thanks!

The Background turns white/gray because there is a ControlTemplate trigger defined in the base style. To remove this you need to override the base style. But then you need to create a new template.
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<!-- Template -->
</Setter.Value>
</Setter>
Link to the base style with template
And the reason why the arrow stays orange is that you have set the template directly on the button. This overrides the property in the style and also the triggers. To fix this just add (and remove the property on the button)
<Setter Property="ContentTemplate" Value="{StaticResource ArrowUpNormal" />
to your style.

Style trigger property is not changing element's width in XAML

i am trying to trigger IsMouseOverproperty of an element and chnging the width in XAML and it's working but the problem is if i define the default or static width property in element's tag then this doesn't work. Why ?
Working code
<UserControl x:Class="IntelliVentory.UserControls.SideMenuBarControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:IntelliVentory.UserControls"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:userControls="clr-namespace:IntelliVentory.UserControls"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone2" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone3" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
</ItemsControl>
</Grid>
but if now i add width="40" property then this trigger property wont work on first ColorZone Element Name="colorZone1" it won't work .
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" width="40" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />

You need to set the default width in the style.
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Width" Value="40"/>
</Style.Setters>
</Style>

How to add an icon on a rectangle's border corner?

I would like to add an image on the upper-right corner of a rectangle (something that I'll use as a kind of toggle button eventually).
How can I do that?
This is the xaml:
<UserControl x:Class="EmulationScreenControl.RectangleSelectionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:emulationScreenControl="clr-namespace:EmulationScreenControl"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"></Rectangle>
</Border>
</Grid>

Just use a Grid to wrap both the Rectangle and the Image.
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Grid>
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
</Rectangle>
<Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Height="100" Source="http://www.citgroup.in/images/icon/wcf.png"/>
</Grid>
</Border>
</Grid>
Here it is:

The solution I found was by Template creation:
<ControlTemplate x:Key="TopRightTemplate" TargetType="{x:Type local:SizeChrome}">
<Grid SnapsToDevicePixels="True" HorizontalAlignment="Right" VerticalAlignment="Top">
<StackPanel
Margin="-50,-50,-20,5"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Horizontal">
<Image Cursor="Hand" ToolTip="Bla"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
Width="16" Height="16"
MouseLeftButtonUp="ToggleIsMultipleScreensSelection"
>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Cursor"
Value="Hand" />
</Trigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="false">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="NotMul" />
</DataTrigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="true">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="Mul" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Grid>
</ControlTemplate>

Can Mahapps MetroWindow Template Be Overridden?

I want to create a notification window using Mahapps.Metro. I defined a new Style for MetroWindow but when Show() is executed, application throws a null exception. If i remove the template override, i have no problem... Any ideas?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ctrl="clr-namespace:MyApp.Controls"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
<Style x:Key="ErrorPopup" TargetType="{x:Type Controls:MetroWindow}" BasedOn="{StaticResource {x:Type Controls:MetroWindow}}">
<Setter Property="BorderBrush" Value="{StaticResource ErrorPopupBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="300"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:MetroWindow}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="Red"/>
</Rectangle.Fill>
</Rectangle>
<Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Content="X" Padding="0,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Error Title" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<ContentPresenter Grid.Row="2" Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<Controls:MetroWindow x:Class="MyApp.Controls.NotificationPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
Style="{StaticResource ErrorPopup}" ButtonBase.Click="Button_Clicked" Title="Notification Title">
<Controls:MetroWindow.Content>
<TextBlock x:Name="_textContainer" Style="{StaticResource NotificationText}" Text="This is the text to display" TextAlignment="Left" TextWrapping="Wrap"/>
</Controls:MetroWindow.Content>
</Controls:MetroWindow>