On a default ScrollBar, when clicking above or below the Thumb, the scrollbar moves in the direction of where you clicked.
I have a custom scrollbar template and this feature doesn't work anymore. I had a look at the scrollbar reference source, but don't seem to find anything that does this. So, how does this work?
Any idea on what I could be missing in my control template?
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true" Background="Transparent" Opacity="0.01">
<Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.Thumb>
<Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.01" To="0.9" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.9" To="0.01" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you search for information on control templates, better look at the documentation on that rather than reference source, it is easier to read and offers some examples.
The area above and below the thumb of the ScrollBar are RepeatButtons. You have to add them to your Track with the DecreaseRepeatButton and IncreaseRepeatButton properties:
<Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
Of course you should style those buttons to fit your design. By the way, the Up and Down buttons on the ScrollBar work the same way, you would add two RepeatButtons to your Grid, one above the Track and one below, but using the ScrollBar.LineUpCommand and ScrollBar.LineDownCommand.
Related
I am currently working on my own Themes for all the wpf controls.
I can't really get the Checkbox Usercontrol working.
I'm trying to get a smooth color fade in / fade out when checking the checkbox.
This is the relevant part of my code in my ressource dictionary:
<Border x:Name="checkbox" CornerRadius="5" Width="18" Height="18" BorderThickness="1" BorderBrush="Black">
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
<Border.Style>
<Style TargetType="Border">
<!-- Animations (Color fade in and out) -->
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
The fade out works (Value=false), but the fade in never triggers. I added a "From" value to confirm / test this, it doesn't trigger at all.
All help would be much appreciated!
Kind Regards
The proper way is to use the EnterAction and ExitAction of the Trigger and to move the trigger from the Style to the ControlTemplate. Also note how the Border properties are wired to the templated parent to allow local values having an effect.
<CheckBox IsChecked="True" BorderThickness="1" BorderBrush="Black">
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<Border x:Name="checkbox"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Width="18" Height="18" >
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
here is what im doing
i have a Buttons.xaml style file for styling my menu button
<!-- Menu button -->
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Height" Value="20" />
<Setter Property="Width" Value="50" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="IsHitTestVisible" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border">
<Grid VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
<Rectangle x:Name="rectangle" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 0 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />
<Rectangle x:Name="rectangle1" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 5 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />
<Rectangle x:Name="rectangle2" Width="20" Height="2" Fill="{StaticResource DarkGrayBrush}" Margin="0 10 0 0" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0, 0.5" />
<ContentPresenter />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="{StaticResource FaintWhiteBrush}"/>
</Trigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="menuButton">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="100" To="0" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and here is my usercontrol view file
that has menu button itself with the styling and source name in my style that is supposed to be found by my event trigger when this button is clicked and slide out the grid
but its not finding it
<Grid>
<!-- Menu button -->
<Button x:Name="menuButton" Style="{StaticResource MenuButton}" />
<!-- Menu bar -->
<Grid x:Name="gridMenu" Background="White" Width="0" HorizontalAlignment="Left">
</Grid>
when i run this code above this is the error message i get
InvalidOperationException: Cannot find element 'menuButton' targeted by this EventTrigger.
thanks in advance
Triggers inside ControlTemplates (or DataTemplates) can only reference elements that are inside that template. The template doesn't "know" about anything outside of itself, so it can't interact with anything but its own parts.
If you want menuButton to interact with gridMenu, that has to be set up from a context/scope that knows about both of those things. In your case, this would be the UserControl where they are both declared.
If you wanted to implement something like this using an EventTrigger (with XAML only- no code), it would have to be done in the ControlTemplate of the Control that directly contained those two elements. Something like this:
<Control>
<Control.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Name="menuButton"/>
<Grid Name="gridMenu" Background="Green" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger SourceName="menuButton" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" From="100" To="0" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Control.Template>
</Control>
The above is an example showing how to place a trigger in a scope that contains both elements, so that one can affect another. It's not a finished solution, but it should give you an idea of what I mean.
Keep in mind that I've just copy/pasted your EventTriggers into my code. The triggers as you've written them only grow and then immediately shrink menuGrid, which I'm guessing isn't exactly what you want. You probably want it to grow, stay open, and then shrink at some later point. You'll need to work that out on your own (or ask another question), but assuming you want a second click of menuButton to close menuGrid, try using a ToggleButton instead of a normal Button and using EventTriggers in the Checked and Unchecked events.
One last thought: since you're making a UserControl you might want to consider declaring a Boolean property such as IsOpen and using that to trigger the menuGrid animation (via a DataTrigger) instead of having it triggered directly by Button click. This would let you open/close the menu from the Window that is housing the UserControl. All standard controls that have some sort of popup (such as ComboBox and Expander) have some such property that tells you the current state and allows you to change it from the outside.
I have an expander that is styled (the toggle button basically spins around) which is good for when the expander expands in an upwardley mobile direction.
However I now want it to move in a horizontal direction, but I cant figure out what I need to add/change.
The main thing I tried was the obvious ExpandDirection="Left" property on the expander but that had no effect
This is my XAML:
<UserControl.Resources>
<!--Import the value converter-->
<helpers:MultiplyConverter x:Key="MultiplyConverter" />
<!--The control template for a toggle button (this will be used for the expander button)-->
<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="ExpanderButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}" >
<Grid>
<Rectangle Fill="Transparent"
Grid.ColumnSpan="2"/>
<Ellipse Name="Circle"
Grid.Column="0"
Stroke="DarkGray"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Path x:Name="Arrow"
Grid.Column="0"
Data="M 1,1.5 L 4.5,5 8,1.5"
Stroke="#FF666666"
StrokeThickness="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="90"/>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<!--The triggers for the toggle button (will animate the rotation from pointing down to up and vice versa-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="270"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="90"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- MouseOver, Pressed behaviours-->
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Stroke"
Value="#FF3C7FB1"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#222"
TargetName="Arrow"/>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Stroke"
Value="#FF526C7B"
TargetName="Circle"/>
<Setter Property="StrokeThickness"
Value="1.5"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#FF003366"
TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--A style for the expander-->
<ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton x:Name="ExpanderButton"
DockPanel.Dock="Left"
Template="{StaticResource AnimatedExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="1.5,0">
</ToggleButton>
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
>
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ScrollViewer.Height>
<MultiBinding Converter="{StaticResource MultiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ScrollViewer.Height>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<!--The expandr which encapsulates the settings for the given image-->
<Expander Name="expanderImageSettings"
Margin="5"
HorizontalAlignment="Stretch"
Grid.Row="1"
ExpandDirection="Left"
Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
VerticalAlignment="Top">
<!--The main grid for all controls-->
<Grid Name="grdMain">
<ContentPresenter Name="FeatureContentPresenter" Grid.Row="1"/>
</Grid>
</Expander>
Any help would be most appreciated
I am trying to achieve something similar to iPhone message view. On a button click, a delete button would slide out for every message and on clicking "done" the delete buttons would slide in. I have been able to achieve that using mvvm except the sliding effect.
Here is the style I could write with my limited knowledge:
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
Here "ShowDeleteButton" is a bool property in the view model. This works fine. but the collapsing and "getting visible" is happening abruptly and very fast. I need some sliding animation.
Please note that as the delete buttons disappear, the rest of the controls should take up the rest of space and, as the button appear, the existing controls should shrink and give space to the buttons.
I tried with storyboard animation but even after a couple hours I am not able to figure out the strange errors it is throwing. Here is the code:
<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard BeginTime="0:0:1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard BeginTime="0:0:1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
Can someone please help the soul in distress?
regards
Old question... huh...
Anyway... forget about visibility. The trick is to animate Width/Height of the Control placed in Grid's Column/Row where the Column/Row has Width set to Auto. Uff :)
So here is a Grid named "container" with two columns. In the first column can be placed whatever you want, but you should align it to Right since you want it to move when your delete button is displayed. And in the second column there is a Control (representing your DeleteButton) Notice that first column has Width="*" and second column has Width="Auto"
<Grid Background="Purple" Width="350" Height="100">
<CheckBox Content="Show" IsChecked="{Binding Path=ShowDeleteButton}" Height="16" HorizontalAlignment="Left" Margin="12,12,0,0" Name="checkBox1" VerticalAlignment="Top" />
<Grid x:Name="container" Margin="40,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Name="content" Margin="0">
<Label Content="Look I'm flyin'!" Margin="0,30,10,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
</Grid>
<Control Grid.Column="1" Margin="0">
<Control.Template>
<ControlTemplate>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ShowDeleteButton}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)"
From="0" To="120" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)"
From="120" To="0" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
<Grid x:Name="flyout" Width="0">
<Rectangle Fill="Green"/>
<Label Content="I'm DELETE button" Margin="10,30,0,0" VerticalAlignment="Top"/>
</Grid>
</ControlTemplate>
</Control.Template>
</Control>
</Grid>
</Grid>
And the Control in Grid's second column has DataTrigger based on your ViewModel's property "ShowDeleteButton"
Since the Width of column where the Control is placed is Auto you can change the width of the Control using simple DoubleAnimation and you get desired behavior.
EDIT
Look at this if you want the flyout to be over everything else.
<Grid x:Name="LayoutRoot">
<Grid x:Name="container" Width="120" HorizontalAlignment="Right">
<Button x:Name="button" Content="In" Margin="0,13,7.5,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="HorizontalAlignment">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)"
From="0" To="120" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
<Grid x:Name="flyout" Width="120" Margin="0" HorizontalAlignment="Right">
<Rectangle Fill="Green"/>
<Label Content="This is some label" Margin="6.038,27,1.006,0" VerticalAlignment="Top"/>
<Button Content="Out" Margin="11.917,58,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="80.083">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)"
From="120" To="0" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Grid>
Please note that button "Out" can be clicked while it's moving. It should be probably disabled. I just did it like this because I wanted to do it simple and all in xaml. Sure you can use mahapps. Or you can just make it as fast as it is in MahApps and it's impossible to click it twice. :) I have looked at MahApps FlyOutDemo and my solution looks much simpler to me. And I don't need third party library.
I'm creating a wpf app that can be controlled by a remote control or a keyboard. I'm trying to create a ComboBox that when focus moves to it, the text will glow. By clicking ok on the remote (Or enter on the keyboard) the dropdown appears allowing the user to make their choice.
To make the keyboard navigation work I created a custom control which extends a combobox. Everything is working as it should but I'm having trouble styling it.
I want the ComboBox to be a textbox with the Glow effect mentioned above but I'm having trouble working out where to place the Triggers.
In the below Xaml I get an error that "FlowMenuComboBoxContentTemplateGlow" can't be found. I'm also having trouble working out what I need to bind to in the Textbox to show the Selected Item's text.
Can anyone help?
Thanks
<!--Flow Menu Text-->
<Style x:Key="FlowMenuText"
TargetType="TextBlock">
<Setter Property="Foreground"
Value="LightGray" />
<Setter Property="FontFamily"
Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
<Setter Property="FontSize"
Value="24" />
<Setter Property="TextOptions.TextHintingMode"
Value="Animated" />
</Style>
<!--Flow Menu KN ComboBox ContentTemplate-->
<DataTemplate x:Key="FlowMenuComboBoxContentTemplate">
<TextBlock Text="WHAT SHOULD I BIND TO?" Style="{DynamicResource FlowMenuText}">
<TextBlock.Effect>
<DropShadowEffect x:Name="FlowMenuComboBoxContentTemplateGlow" BlurRadius="8" Color="LightGray" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
<!--Flow Menu KNComboBox-->
<Style x:Key="FlowMenuComboBox"
TargetType="ComboBox">
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Popup x:Name="Popup" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
<ContentPresenter ContentTemplate="{DynamicResource FlowMenuComboBoxContentTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="true" Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<!-- THIS CURRENTLY THROWS AN ERROR
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxContentTemplateGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxContentTemplateGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Moving the triggers into the ItemTemplate and using relative source to to get the isFocused path of the comboboxitem fixed this issue.
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Border x:Name="FlowMenuComboBoxItemTemplatePosterGlow" Style="{DynamicResource PosterBorder}" BorderThickness="1" Opacity="0">
<Border.Effect>
<BlurEffect KernelType="Gaussian" Radius="3" />
</Border.Effect>
</Border>
<Grid Margin="5,5,5,5">
<TextBlock Text="{Binding}" Style="{DynamicResource FlowMenuText}">
<TextBlock.Effect>
<DropShadowEffect x:Name="FlowMenuComboBoxItemTemplateGlow" BlurRadius="8" Color="LightGray" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ComboBoxItem}},Path=IsFocused}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplatePosterGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplateGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplatePosterGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplateGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>