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>
Related
I have got the problem with FocusVisualStyle, I need to override TAB keyboard focus style, when i'm override Window.Template all controls styles FocusVisualStyle on the window stops working.
The problem XAML (Tab style doesn't work):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Style>
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Style>
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
Without Window.Style FocusVisualStyle works well (Tab style works):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
No msdn information founded. Could you please tell me any workarounds or am i missed something what's makes this behavior.
My environments:
.NET Framework 4.7.2 (same for older versions)
Windows 10 19042.685
Visual Studio 2019
Thanks.
UPDATE, working style below, thanks to arxont:
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to add AdornerDecorator. Change your window style:
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
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.
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>
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?
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>