UWP : Button Style PointerOver Color Not working Properly

Indudhar Gowda 426 Reputation points
2020-03-25T18:59:15.453+00:00

UWP : Button Style PointerOver Color Not working Properly

  1. I Have a Button with Style <VisualState x:Name="PointerOver"> With Background Red
  2. For the same Button I have Button Flyout

Requirement : PointerOver Effect Should there until Fly out is Exited. (i.e BackGroud Color Red Should be There Until Flyout is Closed)

In the Below Gif who can see Red Color Disappears, But I need that Red Color until Flyout is exited.

5961-red.gif

Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Richard Zhang-MSFT 6,936 Reputation points
    2020-03-26T02:04:10.167+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    Button control cannot do this. Because for Button, there is only one click process. The PointerOver state refers to the movement of the cursor within the Button. Once moved out, the PointerOver state cannot be maintained.

    According to your needs, you can try to use ToggleButton. Compared to Button, ToggleButton has a Check state, which can be maintained after selection.

    xaml

    <Page.Resources>
         <Flyout x:Name="MyFlyout" Closed="MyFlyout_Closed"/>
    </Page.Resources>
    
    <Grid>
        <ToggleButton x:Name="TestButton" Click="TestButton_Click"
                  Content="Click Me" FlyoutBase.AttachedFlyout="{StaticResource MyFlyout}"/>
    </Grid>
    

    xaml.cs

    private void TestButton_Click(object sender, RoutedEventArgs e)
    {
        if (!MyFlyout.IsOpen)
        {
            FlyoutBase.ShowAttachedFlyout(TestButton);
        }
    }
    
    private void MyFlyout_Closed(object sender, object e)
    {
        TestButton.IsChecked = false;
    }
    

    In terms of style, you can modify the default style:

    <VisualState x:Name="Checked">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
        </Storyboard>
    </VisualState>
    

    Thanks.


0 additional answers

Sort by: Most helpful