Needed Help regarding pointerOver is not working Properly in Winui3

Smrithi Surendran 61 Reputation points
2022-10-03T08:58:52.553+00:00

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:

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
731 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Roy Li - MSFT 32,486 Reputation points Microsoft Vendor
    2022-10-04T09:10:43.017+00:00

    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.

    1 person found this answer helpful.
    0 comments No comments