Needed Help regarding pointerOver is not working Properly in Winui3

Question

246906-code.txtWhen we mouse over on button, sometimes border is getting highlighted and sometimes not.

Please see the attachment for the code snippet for button style:

Answer 1

Hello,

Welcome to Microsoft Q&A!

I checked your code. Please change the style a little bit. Put all the controls into a ContentPresenter instead of using a Grid as the root control.

You could use the following style. Please note to remove all the ASTERISK before keywords background and root. There is no change for the animation code so I did not post them.

 <Style x:Key="Style_Button_Common_Navigation_Overlay" TargetType="Button">   
                    <Setter Property="**Background" Value="Transparent" />  
                    <Setter Property="BorderBrush" Value="Gray"/>  
                    <Setter Property="Foreground" Value="Green" />  
                    <Setter Property="HorizontalAlignment" Value="Left" />  
                    <Setter Property="VerticalAlignment" Value="Top" />  
                    <Setter Property="FontSize" Value="8" />  
                    <Setter Property="FontWeight" Value="Normal" />  
                    <Setter Property="Margin" Value="20,21,21,0" />  
                    <Setter Property="Visibility" Value="Visible" />  
                    <Setter Property="Opacity" Value="1" />  

    <Setter Property="UseSystemFocusVisuals" Value="True" />  
                    <Setter Property="Template">  
                        <Setter.Value>  
                            <ControlTemplate TargetType="Button">  
                                <ContentPresenter x:Name="ContentPresenter"  
                                              AutomationProperties.AccessibilityView="Raw"  
                                              **Background="{TemplateBinding **Background}"  
                                              **BackgroundSizing="{TemplateBinding **BackgroundSizing}"  
                                              BorderBrush="{TemplateBinding BorderBrush}"  
                                              ContentTemplate="{TemplateBinding ContentTemplate}"  
                                              CornerRadius="{TemplateBinding CornerRadius}"  
                                              Tag="{TemplateBinding Tag}"  
                                              ContentTransitions="{TemplateBinding ContentTransitions}"   
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">  
                                    <ToolTipService.ToolTip>  
                                        <ToolTip Content="{TemplateBinding Tag}"   
                                                     FontFamily="arial" FontSize="8"  
                                                     Placement="Right" HorizontalOffset="7"  
                                                     Foreground="White" **Background="Gray" CornerRadius="10"></ToolTip>  
                                    </ToolTipService.ToolTip>  
     <VisualStateManager.VisualStateGroups>  
    //...animation code.  
     </VisualStateManager.VisualStateGroups>  
                                         <ContentPresenter.Content>  
      
                                        <Grid x:Name="**RootGrid" >  
      
                                            <Border x:Name="SharedBorder"  
                                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
                                        BorderBrush="{TemplateBinding BorderBrush}"  
                                        BorderThickness="{TemplateBinding BorderThickness}"/>  
      
                                            <StackPanel Orientation="Horizontal"   
                                        Padding="5,5,10,5"  
                                        HorizontalAlignment="Center"  
                                        VerticalAlignment="Center">  
                                                <Path Data="{StaticResource Icon_Path_Data_OverlayButton}" Width="18" Height="18" Fill="White"/>  
                                            </StackPanel>  
                                        </Grid>  
      
                                    </ContentPresenter.Content>  
                    </ContentPresenter>  
                            </ControlTemplate>  
                        </Setter.Value>  
                    </Setter>  
                </Style>    

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.