I have placed a popup on a button mouseover.Each time when i mouse over that button my custom designed popup is being showed perfectly.Butit doesn't point the button perfectly. How to do so ..?
Now my popup looks like
I want that arrow mark to point that help button How to acheive it..
Here is my code for the button and popup in xaml
<telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="444,56,0,0" Grid.Row="2" VerticalAlignment="Top"
Width="23" Height="23" BorderThickness="6" BorderBrush="#4E4E4E">
<Image Source="Images/help.png" />
<telerik:RadButton.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
<BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
and below is the custom usercontrol xaml which amn calling in popup
<UserControl
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:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WPFTest.UCToolTip"
mc:Ignorable="d" Height="231.493" Width="362.075"
Background="Transparent" >
<UserControl.Resources>
<Style TargetType="{x:Type Hyperlink}">
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
</UserControl.Resources>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="red" Margin="0,0,182,133">
</Grid>
<Polygon
Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,101" />
</Grid>
use this style for your Popup:
<Style TargetType="Popup">
<Style.Triggers>
<Trigger Property="IsOpen" Value="true">
<Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" />
<Setter Property="Placement" Value="Top" />
<Setter Property="VerticalOffset" Value="-5" />
<Setter Property="HorizontalOffset" Value="5" />
</Trigger>
</Style.Triggers>
</Style>
I think that Kylo pointed you to the right answer. If you get rid of the margin in the usercontrol it should work.
This is the code for the usercontrol.
<UserControl
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:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfTest.UCToolTip"
mc:Ignorable="d" Height="130" Width="180"
Background="Transparent" >
<UserControl.Resources>
<Style TargetType="{x:Type Hyperlink}">
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
</UserControl.Resources>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="red" Margin="0,0,0,32">
</Grid>
<Polygon Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,0" />
</Grid>
</UserControl>
And the code for the window.
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:uc="clr-namespace:WpfTest"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Popup">
<Style.Triggers>
<Trigger Property="IsOpen" Value="true">
<Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" />
<Setter Property="Placement" Value="Top" />
<Setter Property="VerticalOffset" Value="0" />
<Setter Property="HorizontalOffset" Value="145" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="300,175,0,0" Grid.Row="2" VerticalAlignment="Top"
Width="50" Height="23" BorderThickness="6" BorderBrush="#4E4E4E">
<Image Source="Images/help.png" />
<telerik:RadButton.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
<BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
<BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</telerik:RadButton.Triggers>
</telerik:RadButton>
<Popup x:Name="TooltipPopup" AllowsTransparency="True">
<StackPanel>
<uc:UCToolTip></uc:UCToolTip>
</StackPanel>
</Popup>
</Grid>
</Window>
Here is a small library with balloons for WPF that I think does what you want.
Usage:
<geometry:Balloon ConnectorAngle="25"
CornerRadius="15"
PlacementOptions="Bottom, Center"
PlacementTarget="{Binding ElementName=Target}">
<!-- content here -->
</geometry:Balloon>
Related
When I use the below block of code in a Window or control it works (I can see the button animation and the size of the button changes when I hover over it), but it does not work when I use it in the resource dictionary. I am creating a Prism app with mah apps window.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:b="http://schemas.microsoft.com/expression/2010/interactivity"
>
<!--// Merge Dic here //-->
<ContentControl x:Key="OperatorUIPreview"
Content="{StaticResource splashStyle}"/>
<ContentControl x:Key="OperatorUI.Home"
Background="Purple">
<Grid >
<Border
Background="#323345"
CornerRadius="10,10,0,0"
Margin="0,85,0,0">
<Grid >
<Button
x:Name="home1"
Background="Blue"
Style="{StaticResource DockBtnStyle}">
<Popup Width="70"
HorizontalOffset="-12"
PlacementTarget="{Binding ElementName=home1}"
IsOpen="{Binding ElementName=home1, Path=IsMouseOver, Mode=OneWay}"
Style="{StaticResource PopupStyle}">
<Grid>
<Border Style="{StaticResource border}">
<TextBlock Text="Home"
Style="{StaticResource PopupText}" />
</Border>
<Path Style="{StaticResource ArrowPath}"/>
</Grid>
</Popup>
</Button>
</Grid>
</Border>
</Grid>
</ContentControl>
</ResourceDictionary>
Style:
<Style x:Key="DockBtnStyle"
TargetType="Button">
<Setter Property="Height"
Value="50" />
<Setter Property="Width"
Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
BorderThickness="0"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<!--// Button Animation //-->
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Width)"
To="65"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="(Button.Height)"
To="65"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Width)"
To="50"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="(Button.Height)"
To="50"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
hi i want when user selected tabitem windows height change this is my code:
<Windows.Style>
<Style TargetType="Windows">
<Setter Property="Height" Value="220" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=tabc,Path=SelectedIndex, UpdateSourceTrigger=PropertyChanged, Mode=Twoway}" Value="1">
<Setter Property="Height" Value="400" />
</DataTrigger>
</Style.Triggers>
</Style>
</Windows.Style>
in visual studio when i change tab code work perfectly but when i compile my code not work
You could use a DoubleAnimation to set the Height of the window. This works as expected:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Style>
<Style TargetType="Window">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=tabc, Path=SelectedIndex}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="400" Duration="0:0:0" Storyboard.TargetProperty="Height" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="220" Duration="0:0:0" Storyboard.TargetProperty="Height" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid>
<TabControl x:Name="tabc">
<TabItem Header="1">
<TextBlock>first tab</TextBlock>
</TabItem>
<TabItem Header="2">
<TextBlock>second tab</TextBlock>
</TabItem>
</TabControl>
</Grid>
</Window>
I created a ribbon in WPF using .NET 4.0 framework. I am trying to make use of ToolTipTitle, ToolTipDescription and ToolTipFooterDescription. Since my tooltips will have hyperlinks, how can I make it so that when the mouse hovers over the tooltip, the tooltip stays open?
<rib:RibbonMenuButton ToolTipTitle="Title" ToolTipDescription="My Description" ToolTipFooterDescription="My Footer With a Link">
A good example of this functionality is with Microsoft Excel. When you hover over a ribbon button, an advanced tool tip will display to the user, and if the user hovers over the tooltip, it will remain open. I am trying to mimic that functionality.
I've updated my answer, the below is a well tested solution to my problem and will mimic Microsoft Office's tooltip generation:
First, create the popup control:
<Popup x:Class="WPF.Tooltip" AllowsTransparency="True"
x:Name="TT_Popup_Control"
xmlns:WPF="clr-namespace:Project_Namespace.WPF"
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:Project_Namespace"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="300">
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="5" />
<Setter Property="FontFamily" Value="Sans Serif" />
<Setter Property="FontSize" Value="11" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style TargetType="{x:Type TextBlock}" x:Key="WrappingStyle">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</Grid.Resources>
<Border BorderBrush="LightGray" BorderThickness="1,1,0,0">
<Border
BorderThickness="0,0,15,15"
BorderBrush="Transparent"
CornerRadius="0"
Margin="0"
>
<Border.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.8" ShadowDepth="5" Direction="-40" RenderingBias="Quality" />
</Border.Effect>
<StackPanel Background="#efefef">
<Grid Margin="5,0,5,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<!-- Title -->
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" FontWeight="Bold" Text="{Binding Title, ElementName=TT_Popup_Control}" />
<!-- Description -->
<TextBlock Grid.Column="0" Grid.Row="1">
<ContentPresenter Content="{Binding Image, ElementName=TT_Popup_Control}" />
</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1">
<ContentPresenter Content="{Binding Desc, ElementName=TT_Popup_Control}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
</TextBlock>
<Separator Grid.ColumnSpan="2" Grid.Row="2" />
<!-- Image -->
<TextBlock Grid.ColumnSpan="2" Grid.Row="3">
<Image Margin="0,0,10,0" Width="16" Source="pack://application:,,,/Path/To/Image/help_icon.png" />
<TextBlock Margin="0,-5,0,0">
<Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="{Binding Footer, ElementName=TT_Popup_Control}">Tell Me More</Hyperlink>
</TextBlock>
</TextBlock>
</Grid>
</StackPanel>
</Border>
</Border>
</Grid>
</Popup>
Next, create the code behind for this control. For those of you who want the C# equivalent, you can head here. This is where I got the reference for creating a control template.
Imports System.Windows
Namespace WPF
Public Class Tooltip
Public Shared ReadOnly TitleProperty As DependencyProperty = DependencyProperty.Register("Title", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly DescProperty As DependencyProperty = DependencyProperty.Register("Desc", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly FooterProperty As DependencyProperty = DependencyProperty.Register("Footer", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly ImageProperty As DependencyProperty = DependencyProperty.Register("Image", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Property Title As Object
Get
Return GetValue(TitleProperty)
End Get
Set(value As Object)
SetValue(TitleProperty, value)
End Set
End Property
Public Property Desc As Object
Get
Return GetValue(DescProperty)
End Get
Set(value As Object)
SetValue(DescProperty, value)
End Set
End Property
Public Property Footer As Object
Get
Return GetValue(FooterProperty)
End Get
Set(value As Object)
SetValue(FooterProperty, value)
End Set
End Property
Public Property Image As Object
Get
Return GetValue(ImageProperty)
End Get
Set(value As Object)
SetValue(ImageProperty, value)
End Set
End Property
Private Sub Hyperlink_RequestNavigate(sender As Object, e As Navigation.RequestNavigateEventArgs)
System.Diagnostics.Process.Start(e.Uri.ToString())
End Sub
End Class
End Namespace
The third step is to create the popup functionality, which is best done via styles. I created my style as a resource dictionary (you can call it PopupStyle.xaml, but you can also embed your style directly within the popup xaml control markup:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
xmlns:System="clr-namespace:System;assembly=mscorlib">
<Style x:Key="TT_Popup" TargetType="Popup">
<Setter Property="VerticalOffset" Value="20" />
<Setter Property="MaxWidth" Value="500" />
<Setter Property="MinWidth" Value="50" />
<Style.Triggers>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="OpenPopupStoryBoard" >
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:1.00" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<BeginStoryboard x:Name="ClosePopupStoryBoard">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.35" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseCaptured, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<BeginStoryboard x:Name="CloseImmediatelyPopupStoryBoard" >
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.0" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseOver, RelativeSource={RelativeSource Self}}" Value="False">
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="CloseImmediatelyPopupStoryBoard" />
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<PauseStoryboard BeginStoryboardName="ClosePopupStoryBoard" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<ResumeStoryboard BeginStoryboardName="ClosePopupStoryBoard" />
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
And finally, you must call your newly created ToolTip control in your Xaml markup like so:
<UserControl xmlns:WPF="clr-namespace:Project_Namespace.WPF"
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"
>
<UserControl.Resources>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="PopupStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Button x:Name="button_name" />
<!-- Tooltips -->
<WPF:Tooltip Style="{StaticResource TT_Popup}" PlacementTarget="{Binding ElementName=button_name}">
<WPF:Tooltip.Title>
Tooltip Title
</WPF:Tooltip.Title>
<WPF:Tooltip.Image>
<Image Source="pack://application:,,,/Path/To/Image.png" />
</WPF:Tooltip.Image>
<WPF:Tooltip.Desc>
Your Description here
</WPF:Tooltip.Desc>
<WPF:Tooltip.Footer>
www.example.com
</WPF:Tooltip.Footer>
</WPF:Tooltip>
</Grid>
</UserControl
So this may be a complicated way to achieve this functionality, however once implemented, these tooltips are much better than the default tooltips, especially if you require user interaction.
I'm trying to implement custom window chrome. I'm using Miscrosoft.Windows.Shell namespace. When I place button on title bar, it's transparent to events. Default button should have light blue background, when I hover mouse over it, but it doesn't have this effect. Another buttons that are not inside title bar fire events properly.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
Title="MainWindow" Height="600" Width="800" Background="#2D2D30" Name="MyWindow"
WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None">
<Window.Style>
<Style TargetType="Window">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="25" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="32" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Margin" Value="7,0,7,7"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyWindow, Path=WindowState}" Value="Maximized">
<Setter Property="Margin" Value="7,7,7,7"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel LastChildFill="False" Grid.Row="0" Height="32">
<Button DockPanel.Dock="Right" Width="32" Height="32"/>
</DockPanel>
<Border Background="#1E1E1E" Grid.Row="1">
<Button Width="100" Height="100"/>
</Border>
</Grid>
you should add the attached property "shell:WindowChrome.IsHitTestVisibleInChrome" = true, this should fix your bug.
I'm trying to create a ListBoxItem template, that will be with rounded border at selection.
I got this xaml, which doesn't work on selection:
<ListBox x:Name="filtersListBox" Grid.Row="1"
Background="Transparent" BorderThickness="0"
ItemsSource="{Binding FilterItems}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange"
Margin="2" Background="Transparent" Name="itemBorder"
Width="275" VerticalAlignment="Center"
FocusManager.IsFocusScope="True" Focusable="True">
<Border.Effect>
<DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/>
</Border.Effect>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="UIElement.IsFocused" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.25"
To="2"
Storyboard.TargetProperty="BorderThickness"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.25"
To="0"
Storyboard.TargetProperty="BorderThickness"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="{Binding Text}" Margin="10, 2"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So this is the ListBox that I'm working on.
The MouseEnter and MouseLeave events, work great!
However, the trigger of UIElement.IsFocused is not working.
Any advice would be very appreciated! :)
Thanks, Alex.
This is so easy to do, I'm quite surprised that nobody suggested this yet. Either define two DataTemplates or two ControlTemplates, one for the default look and one for the selected look. Then just add this Style (this first example uses DataTemplates):
<Style x:Key="SelectionStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="ContentTemplate" Value="{StaticResource DefaultTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
You would use it like this:
<ListBox ItemContainerStyle="{StaticResource SelectionStyle}" ... />
Here is the other example using two ControlTemplates (used in the same way):
<Style x:Key="SelectionStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template" value="{StaticResource DefaultTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template" value="{StaticResource SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
I'll leave you to define what you want the items to look like as you know that best. One last note... if you use this method (using ControlTemplates), make sure that you add a ContentPresenter so that the content of the items will still be shown. See the Control.Template Property page on MSDN for an example.
Have you tried setting Focusable property to true. By default the propery is false.
Take a look at this link:
http://msdn.microsoft.com/en-us/library/system.windows.uielement.focusable%28v=vs.110%29.aspx
If that doesnt help then maybe this approach will fit you more.
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="GotFocus" Handler="ListBoxItem_GotFocus"/>
<EventSetter Event="LostFocus" Handler="ListBoxItem_LostFocus"/>
</Style>
</ListBox.Resources>
Why dont you set the Template for ItemContainerStyle, then you can use the Trigger with property IsSelected = true. See code below:
<Window x:Class="WpfApplication7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<collections:ArrayList x:Key="StringArray">
<system:String>Hei</system:String>
<system:String>Hei</system:String>
<system:String>Hei</system:String>
<system:String>Hei</system:String>
</collections:ArrayList>
</Window.Resources>
<Grid>
<ListBox x:Name="filtersListBox" Grid.Row="1"
Background="Transparent" BorderThickness="0"
ItemsSource="{StaticResource StringArray}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange"
Margin="2" Background="Transparent" Name="itemBorder"
Width="275" VerticalAlignment="Center"
FocusManager.IsFocusScope="True" Focusable="True">
<Border.Effect>
<DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/>
</Border.Effect>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="itemBorder" Property="Background" Value="Blue"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange"
Margin="2" Background="Transparent" Name="itemBorder"
Width="275" VerticalAlignment="Center"
FocusManager.IsFocusScope="True" Focusable="True">
<Border.Effect>
<DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/>
</Border.Effect>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="UIElement.IsFocused" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.25"
To="2"
Storyboard.TargetProperty="BorderThickness"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.25"
To="0"
Storyboard.TargetProperty="BorderThickness"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="{Binding }" Margin="10, 2"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>