UWP : Button Style PointerOver Color Not working Properly

asked 2020-03-25T18:59:15.453+00:00
IDGO 426 Reputation points

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)
No comments
{count} votes

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

    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