none
Mouse over event is not triggered after focus WPF RRS feed

  • Question

  • Hi, 

    I just started with WPF and I need a hand.

    I have a button style in application resources, app.xaml. Problem is after button is focused the shine effect will not trigger unless I click the button. If navigate with tab between all controls any of them will not trigger the hover efect.

    This is the XAML:

    <!--Rounded button style-->
            <Style x:Key="ButtonFocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border>
                                <Rectangle SnapsToDevicePixels="true" Margin="4" StrokeDashArray="1 2" StrokeThickness="1"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="RoundedButton" TargetType="{x:Type Button}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
                <Setter Property="Background" Value="#FFD1EDF7"/>
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="BorderThickness" Value="3"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="0,0,1,1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <ControlTemplate.Resources>
                                <Storyboard x:Key="ShowShine">
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                                <Storyboard x:Key="HideShine">
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </ControlTemplate.Resources>
                            <Border CornerRadius="5,5,5,5" BorderThickness="1,1,1,1" RenderTransformOrigin="0.5,0.5" x:Name="border" BorderBrush="#FFD1EDF7">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                                <Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5" x:Name="border1">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Border Grid.Row="0" CornerRadius="5,5,0,0">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="AliceBlue" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border Grid.Row="1" Opacity="0" x:Name="Shine" Width="Auto" Height="Auto" CornerRadius="5,5,5,5" Margin="-1,-1,-1,-1" Background="#FFD1EDF7"/>
                                        <ContentPresenter VerticalAlignment="Center"  Grid.RowSpan="2" HorizontalAlignment="Center" x:Name="contentPresenter"/>
                                    </Grid>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Opacity" TargetName="border1" Value="0.5"/>
                                    <Setter Property="Opacity" TargetName="border" Value="1"/>
                                    <Setter Property="Opacity" TargetName="contentPresenter" Value="0.5"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="RenderTransform" TargetName="border">
                                        <Setter.Value>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                <RotateTransform Angle="0"/>
                                                <TranslateTransform X="0" Y="0"/>
                                            </TransformGroup>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.ExitActions>
                                        <BeginStoryboard Storyboard="{StaticResource HideShine}" x:Name="HideShine_BeginStoryboard"/>
                                    </Trigger.ExitActions>
                                    <Trigger.EnterActions>
                                        <BeginStoryboard x:Name="ShowShine_BeginStoryboard" Storyboard="{StaticResource ShowShine}"/>
                                    </Trigger.EnterActions>
                                </Trigger>
                                <Trigger Property="IsFocused" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource ShowShine}"/>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard Storyboard="{StaticResource HideShine}"/>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    Thanks in advance!

    Friday, August 16, 2019 5:42 AM

Answers

  • Try replacing IsMouseOver and IsFocused triggers:

    <MultiTrigger>

        <MultiTrigger.Conditions>

            <Condition Property="IsMouseOver" Value="False"/>

            <Condition Property="IsFocused" Value="False"/>

        </MultiTrigger.Conditions>

        <MultiTrigger.EnterActions>

            <BeginStoryboard Storyboard="{StaticResource HideShine}" />

        </MultiTrigger.EnterActions>

        <MultiTrigger.ExitActions>

            <BeginStoryboard Storyboard="{StaticResource ShowShine}"/>

        </MultiTrigger.ExitActions>

    </MultiTrigger>

     

    • Marked as answer by Bogdan-Sorin Monday, August 19, 2019 7:22 AM
    Friday, August 16, 2019 4:58 PM

All replies

  • Try replacing IsMouseOver and IsFocused triggers:

    <MultiTrigger>

        <MultiTrigger.Conditions>

            <Condition Property="IsMouseOver" Value="False"/>

            <Condition Property="IsFocused" Value="False"/>

        </MultiTrigger.Conditions>

        <MultiTrigger.EnterActions>

            <BeginStoryboard Storyboard="{StaticResource HideShine}" />

        </MultiTrigger.EnterActions>

        <MultiTrigger.ExitActions>

            <BeginStoryboard Storyboard="{StaticResource ShowShine}"/>

        </MultiTrigger.ExitActions>

    </MultiTrigger>

     

    • Marked as answer by Bogdan-Sorin Monday, August 19, 2019 7:22 AM
    Friday, August 16, 2019 4:58 PM
  • Worked, thank you!

    Monday, August 19, 2019 7:22 AM