Develop Reference

WPF (Bug) FocusVisualStyle doesn't work for Window with Template

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>

Control template make fancy button

Hi I want to make special shape for button with control template or with stmth another. Now my button looks like this but in fact there are three buttons not one. So I want to make for them one trigger like Mouse Over. But Idk how to make it ..
<Window x:Class="ExamWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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"
xmlns:local="clr-namespace:ExamWpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ControlTemplate x:Key="Buttons" TargetType="{x:Type Button}">
<Border Background="Black">
</Border>
</ControlTemplate>
<ControlTemplate x:Key="fancyButton" TargetType="{x:Type Button}">
<Border Name="Border" Background="RoyalBlue" BorderBrush="Black" BorderThickness="2" TextBlock.Foreground="White" TextBlock.FontWeight="Bold">
<Grid>
<ContentPresenter Margin="{TemplateBinding Padding}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="DarkBlue"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="fancyButtonL" TargetType="{x:Type Button}">
<Border Name="Border" Background="RoyalBlue" BorderBrush="Black" BorderThickness="2,2,0,2" TextBlock.Foreground="White" TextBlock.FontWeight="Bold">
<Grid>
<ContentPresenter Margin="{TemplateBinding Padding}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="DarkBlue"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="fancyButtonR" TargetType="{x:Type Button}">
<Border Name="Border" Background="RoyalBlue" BorderBrush="Black" BorderThickness="0,2,2,2" TextBlock.Foreground="White" TextBlock.FontWeight="Bold">
<Grid>
<ContentPresenter Margin="{TemplateBinding Padding}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="DarkBlue"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Canvas>
<Button Template="{StaticResource fancyButton}" Padding="105,10" Content="Regular button" Canvas.Left="225" Canvas.Top="37"/>
<Button Template="{StaticResource fancyButtonL}" BorderThickness="3" Padding="10" Content="Regular button" Canvas.Left="214" Canvas.Top="45" Height="18" Width="13"/>
<Button Template="{StaticResource fancyButtonR}" BorderThickness="3" Padding="10" Content="Regular button" Canvas.Left="522" Canvas.Top="45" Height="18" Width="13"/>
</Canvas>
</Grid>
</Window>
Button

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.

On click event to part of an image WPF

I've got an iPhone image that I'd like to place a click event on the home button.
How can I accomplish this with WPF? I've tried placing a button on the image but I didn't get the desired result.
What type of control do you use for your image?
<Window.Background>
<ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill">
</ImageBrush>
</Window.Background>

You can place the image in a suitable panel like Canvas or Grid and use invisible buttons as overlay.
In resources:
<Style x:Key="InvisibleButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent" BorderBrush="Red" BorderThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<Grid Width="150" Height="150">
<ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill"/>
<Button x:Name="TopLeft" Margin="0,0,100,100" Click="TopLeft_Click" Style="{StaticResource InvisibleButtonStyle}"/>
<Button x:Name="TopRight" HorizontalAlignment="Right" Click="TopRight_Click" Margin="0,0,0,100" Width="100" Style="{StaticResource InvisibleButtonStyle}"/>
<Button x:Name="BottomLeft" VerticalAlignment="Bottom" Click="BottomLeft_Click" Margin="0,0,100,0" Height="100" Style="{StaticResource InvisibleButtonStyle}"/>
<Button x:Name="BottomRight" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="BottomRight_Click" Margin="0,0,0,0" Width="100" Height="100" Style="{StaticResource InvisibleButtonStyle}"/>
</Grid>
Note I added a red border to the transparent button in order to highlight the clickable areas, in reality it would only be transparent background.

I've achieved this by doing the following:
<Canvas Height="30" VerticalAlignment="Top" Margin="0,394,0,0" Width="220">
<Button Content="" Canvas.Left="102" Canvas.Top="6" Background="Transparent" Width="16" BorderBrush="Transparent" Cursor="Hand" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Canvas>
Just have to set your margins and Canvas left and top positions to overlay the clickable area.

Since you need a part of image to be clickable, I would suggest this solution.
C/P from link...
<Canvas>
<Image Source="background.png"/>
<Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/>
<Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/>
</Canvas>

C# WPF ComboBox Mouse over color

When the mouse hover over my ComboBox, I get an awful blue/lightblue pair of color for the backgroung of my ComboBox.
I tried the solutions here :ComboBox Mouse over color, WPF Combobox Mouse Over, How to style ComboBox Background on Mouse Hover? or WPF combobox default hover color on togglebutton, but it doesn't change anything, I still get the default colors while hovering.
Any suggestions ?
Thank you all in advance,
Demasiado.
Here is the XAML code :
<Window x:Class="Homepage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<Window.Resources>
<Storyboard x:Key="TileZoomIn">
<ThicknessAnimation Storyboard.TargetProperty="Margin" From="10" To="1" Duration="0:0:0.1"/>
</Storyboard>
<Storyboard x:Key="TileZoomOut">
<ThicknessAnimation Storyboard.TargetProperty="Margin" From="1" To="10" Duration="0:0:0.1"/>
</Storyboard>
<DropShadowEffect x:Key="DropShadowEffect" BlurRadius="20" Opacity="1" ShadowDepth="0" Color="White"/>
</Window.Resources>
<Grid ShowGridLines="True">
<ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="40,-180,0,256" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
<ComboBox Margin="25" Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
</ComboBox>
</ComboBox>
</Grid>
</Window>

Your problem arises from ButtonChrome in the ToggleButton's template. Remove it from the ToggleButton.
ComboBox -> ToggleButton -> ButtonChrome
Steps :
1) Open Expression Blend and edit a copy of ComboBox's Style , This will give you the Style of the ComboBox + it's Template and all it's TemplateParts , Among them is the problematic ToggleButton.
2) Locate the ToggleButton and it's Style called "ComboBoxReadonlyToggleButton" .
3) In "ComboBoxReadonlyToggleButton" replace the Themes:ButtonChrome with a Border (like shown in the 3'rd block of code below.)
The ComboBox's default template (Simplified !):
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Popup x:Name="PART_Popup">
.....
</Popup>
<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
<ContentPresenter ... />
</Grid>
</ControlTemplate>
The toggle button Style + Template (Simplified !).
<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Themes:ButtonChrome x:Name="Chrome" ....>
<Grid>
<Path x:Name="Arrow" />
</Grid>
</Themes:ButtonChrome>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What you need to do is to override the default ComboBox template and edit the toggle button's style by replacing ButtonChrome with a Border :
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<Path x:Name="Arrow" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>

you can override SystemColors.HighlightBrushKey within the ComboBox scope:
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
the entire XAML can be something like this:
<Grid>
<ComboBox Margin="25" Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
<ComboBox.ItemsSource>
<Binding Path="Collection" Source="{StaticResource viewmodel}"/>
</ComboBox.ItemsSource>
</ComboBox>
</Grid>
A followup to your comment:
ignore the viewmodel and my ItemSource you should use your own, this was just for the demonstration.
as for your comment about
I could not get anything to work
i would suggest that you will create a new project and test only this XAML (with your ItemSource of course) and see if you can get the result you want.
when you will get that, you can move to your real project and see where the styles changes and where is the problem exists.
EDIT#2:
In order to change the color of the ToggleButton i think is best to override the entire ComboBox Style.
i used the
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
The rest of the code and style taken from here.
i would recommend you to read this as well.

There it no item in my ComboBox in the test project. I just hover the mouse over it and the whole control is blue.
Here is the .cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// Logique d'interaction pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
Here is the xaml :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="42,38,0,184" Background="Red" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
<ComboBox Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
</ComboBox>
</ComboBox>
</Grid>
</Window>

Redefine your comboxItem Template in your window resources
<Style TargetType="{x:Type ComboBoxItem}"
BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}">
<ContentPresenter Margin="{TemplateBinding Margin}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background"
Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>