I have a button in a WPF Borderless Dialog Window that doesn't change from MouseOver state to Normal State if the button is close (a few pixels away) to the edge of the Window when the Mouse is moved off the button towards the closest edge.
This only occurs if the borderless dialog is over the client area of the Window the invoked the dialog. If the mouse first moves over the client area of the borderless dialog, then the button state changes to normal.
I have tried several options: triggers, visual states, routed events, moving the button few pixels from the edge. The first three had no affect. The last one will sometimes work, but only if the button is far enough away from the edge. I have been able to consistently reproduce the issue even with the button 10 pixels away from the edge. Seems to depend on how fast the mouse moves.
Is there a way to solve this issue? We are looking to create dialogs with custom title bar and borders.
Below is a code sample that reproduces the issue. I am currently developing with Visual Studio 2013 and the application is being run on Windows 7 Professional 64-bit.
In the example below click on one of the buttons from the main window to bring up the borderless dialog. Then mouse over one of the blue buttons and it should change to yellow. If the mouse is moved off of the button to the client area of the dialog the mouse state changes to normal, however if the mouse is move left off of the button and off of the dialog the button stays in the mouse over state of yellow.
MainWindow.xaml
<Window x:Class="TransparentWindowMouseOverIssue.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" Background="Gray"><Grid HorizontalAlignment="Left" VerticalAlignment="Top"><Button Content="Show Dialog with main window as owner" Click="Button_Click" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" /><Button Content="Show Dialog with no owner" Margin="10,50,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click_1" /></Grid></Window>
MainWindow.xaml.cs
using System.Windows; namespace TransparentWindowMouseOverIssue { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { var dlg = new DialogWithButton {Owner = this}; dlg.Left = Left + 50; dlg.Top = Top + 100; dlg.ShowDialog(); } private void Button_Click_1(object sender, RoutedEventArgs e) { var dlg = new DialogWithButton(); dlg.Left = Left + 50; dlg.Top = Top + 100; dlg.ShowDialog(); } } }
DialogWithButton.xaml
<Window x:Class="TransparentWindowMouseOverIssue.DialogWithButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DialogWithButton" Height="300" Width="300" AllowsTransparency="True" WindowStyle="None"><Window.Resources><Style x:Key="ButtonUsingVisualStates" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal"><Storyboard><ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid"><EasingColorKeyFrame KeyTime="0" Value="Blue" /></ColorAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="MouseOver"><Storyboard><ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid"><EasingColorKeyFrame KeyTime="0" Value="Yellow" /></ColorAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Grid x:Name="ButtonGrid" Background="Blue" TextBlock.Foreground="White"><ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid></Grid></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="ButtonUsingTriggers" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="ButtonGrid" Background="Blue" TextBlock.Foreground="White"><ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ButtonGrid" Property="Background" Value="Yellow" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="ButtonUsingRoutedEvent" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="ButtonGrid" Background="Blue" TextBlock.Foreground="White"><ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid><ControlTemplate.Triggers><EventTrigger RoutedEvent="Button.MouseEnter"><BeginStoryboard><Storyboard><ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid"><EasingColorKeyFrame KeyTime="0" Value="Yellow" /></ColorAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="Button.MouseLeave"><BeginStoryboard><Storyboard><ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid"><EasingColorKeyFrame KeyTime="0" Value="Blue" /></ColorAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Button Style="{StaticResource ButtonUsingTriggers}" Content="ButtonUsingTriggers" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="26" Background="Blue" /><Button Style="{StaticResource ButtonUsingVisualStates}" Content="Button Using Visual States" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="26" Margin="0,40,0,0" /><Button Style="{StaticResource ButtonUsingRoutedEvent}" Content="Button Using Routed Events" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="26" Margin="0,80,0,0" /><Button Content="Close" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100" Height="26" Click="Button_Click" /></Grid></Window>
DialogWithButton.xaml.cs
using System.Windows; namespace TransparentWindowMouseOverIssue { /// <summary> /// Interaction logic for DialogWithButton.xaml /// </summary> public partial class DialogWithButton : Window { public DialogWithButton() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { Close(); } } }