Question

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>

Answer 1

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>