Applied this style onto my own user control, which inherits from Button:

           <Style x:Key="FunctionButtonStyle" TargetType="uc:FunctionButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="uc:FunctionButton">
                    <RelativePanel x:Name="MyPanel" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                        <SymbolIcon Symbol="{TemplateBinding Symbol}" RelativePanel.AlignTopWithPanel="True" Margin="5">
                            <SymbolIcon.RenderTransform>
                                <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5"/>
                            </SymbolIcon.RenderTransform>
                        </SymbolIcon>
                        <TextBlock Text="{TemplateBinding Content}" RelativePanel.AlignBottomWithPanel="True" Margin="5" FontSize="10"/>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="MyPanel"/>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="MyPanel.Background" Value="Black"/>
                                        <Setter Target="ContentPresenter.BorderBrush" Value="#323232"/>
                                        <Setter Target="ContentPresenter.Foreground" Value="#00B7EB"/>
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="MyPanel" />
                                    </Storyboard>
                                    
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        
                    </RelativePanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="75"/>
        <Setter Property="Height" Value="45"/>
    </Style>

Applied this style onto my user control but the mouse over color not take effect, or the mouse over event never occurs.

CodePudding user response：

You need to call:

VisualStateManager.GoToState(this, "PointerOver", useTransitions: true);

on a PointerEntered handler, and

VisualStateManager.GoToState(this, "Normal", useTransitions: true);

on a PointerExited handler.