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.

User control missing buttons when placed on main window

I have the main window which consists of 2 columns (in a grid), on the left side there is a map (Microsoft Bing) and on the right side I want to create some sort of config panel.
I have created a UserControl that is meant to show some statistics and configure capabilities
This is how the user control is supposed to look, and This is how it looks like when I run the program. As you can see, labels,buttons and textboxes are missing from the top part.
Here is the usercontrol's code:
<UserControl x:Class="WEI.UserControls.MapTab"
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:WEI.UserControls"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="300" >
<Grid Background="AliceBlue">
<TabControl Margin="5" BorderBrush="Gainsboro">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="General">
<Grid>
<Button Margin="82,126,95,392" x:Name="setCoordinates" Content="Go to coordinate" FontSize="10" />
<Button Margin="82,190,95,328" x:Name="addMark" Content="Add mark" FontSize="10" />
<TextBox x:Name="Latitude" Margin="41,52,173,479"/>
<TextBox x:Name="Longitude" Margin="161,53,54,478"/>
<Label Content="Latitude" Margin="41,18,173,513" />
<Label Content="Longitude" Margin="160,17,54,513" />
<Separator/>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="88,348,95,83">
<TextBlock TextWrapping="Wrap" Margin="-1" Text="" VerticalAlignment="Center" Height="130" />
</Border>
<Label Content="Active targets" HorizontalAlignment="Left" Margin="96,299,0,0" VerticalAlignment="Top"/>
</Grid>
</TabItem>
<TabItem Header="Statistics" >
</TabItem>
<TabItem Header="Details" />
</TabControl>
</Grid>
</UserControl>

How do you specify a custom ListBoxItem template that will popup any usercontrol

I am trying to write a custom ListBox that will popup a user specifed control at runtime. I have made a custom RadioButton that I want to have display a popup when the user selects one of the buttons in the list
Here Is the xaml for the custom ListBox control. I am trying to use my custom radio button as the ListboxItem:
<ListBox
x:Class="PopUp.SystemAccessPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:PopUp"
d:DataContext="{d:DesignInstance local:PanelButton}"
mc:Ignorable="d"
>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<local:PanelButton
x:Name="Button1"
Foreground="{TemplateBinding Foreground}"
GroupName="{Binding GroupName}"
ButtonText="{Binding ButtonText}"
Margin="0,0,0,20"
/>
<Popup
x:Name="PART_Popup"
IsOpen="{Binding IsChecked, ElementName=Button1}"
PlacementTarget="{Binding ElementName=Button1}"
Placement="Absolute"
VerticalOffset="{Binding AbsoluteYPlacement}"
HorizontalOffset="{Binding AbsoluteXPlacement}"
local:BaseExtendedPopup.ClosesOnInput="True"
>
<ContentPresenter/>
</Popup>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBox.Template>
<ControlTemplate>
<Border
BorderThickness="0"
Padding="1,1,1,1"
Background="Transparent"
Name="theBorder"
SnapsToDevicePixels="True"
>
<ItemsPresenter
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
/>
</Border>
<!--
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
</ControlTemplate.Triggers>
-->
</ControlTemplate>
</ListBox.Template>
</ListBox>
And here I how i want the control to be used:
<usr:SystemAccessPanel Foreground="Pink" Background="Aqua">
<usr:PanelButton
ButtonText="What"
ImageWidth="50"
ImageHeight="50"
Width="40"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl2/>
</usr:PanelButton>
<usr:PanelButton
ButtonText="The Hell"
ImageWidth="45"
Height="20" Width="100"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl1/>
</usr:PanelButton>
</usr:SystemAccessPanel>
However All I end up with is a PaneButton as a Popup =S. What do i need to do to have my usercontrol be in the popup?

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>