UWP : Button Style PointerOver Color Not working Properly I Have a Button with Style <VisualState x:Name="PointerOver"> With Background Red 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.

UWP : Button Style PointerOver Color Not working Properly

Accepted answer

Richard Zhang-MSFT 6,936

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.

Indudhar Gowda 426

       I tried IValueConverter with three Different Styles Creating a String Property..... still not able change Background Color after ClosingFlyOut

    switch ((string) value)
            {
                case "True":
                    return resourceDictionary["MoreOptionsButtonWithFlyout"] as Style;
                case "False":
                    return resourceDictionary["MoreOptionsButtonWithHoverStyle"] as Style;
                case "ClosingFlyOut":
                    return resourceDictionary["MoreOptionsButtonWithHoverStyleTest"] as Style;
                default:
                    return resourceDictionary["MoreOptionsButtonWithHoverStyle"] as Style;
            }

Any other Alternatives so that we can achieve in Button itself,

Richard Zhang-MSFT 6,936 Reputation points

2020-03-26T05:25:21.15+00:00

Sorry I don't quite understand, what does this have to do with IValueConverter? In addition, the Button control alone cannot achieve the effect you need, because when Flyout appears, the Button has completed the click action
Indudhar Gowda 426 Reputation points

2020-03-26T05:41:16.913+00:00
I have Created 3 Styles

MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue

MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver

MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue

List item

I Have Created a Property and Binded to Button`

Above is what I have done.....Everything is Working except the last FlyoutClosed Changing BackGround..

Indudhar Gowda 426

I have Created 3 Styles

MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver
MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue
List item

I Have Created a Property and Binded to Button.

    <Button  Name="ButtonTest" Command="{Binding MoreOptionCommand}" VerticalAlignment="Stretch"     Style="{Binding ShowFlyoutstyle, Converter={StaticResource BoolToButtonStyleConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  FontSize="30"
                                    FontWeight="Bold">       <Button.Flyout>  <Flyout Placement="Bottom" Closed="{x:Bind Closing}"

          private void Closing()     {      ShowFlyoutstyle = "ClosingFlyhover";  }

Indudhar Gowda 426

I have Created 3 Styles

MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver

MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue

<Button  Name="ButtonTest" Command="{Binding MoreOptionCommand}" VerticalAlignment="Stretch"     Style="{Binding ShowFlyoutstyle, Converter={StaticResource BoolToButtonStyleConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  FontSize="30"
                                FontWeight="Bold">       <Button.Flyout>  <Flyout Placement="Bottom" Closed="{x:Bind Closing}"

      private void Closing()     {      ShowFlyoutstyle = "ClosingFlyhover";  }

I Have Created a Property and Binded to Button Above is what I have done.....

Indudhar Gowda 426

I have Created 3 Styles  
 1. MoreOptionsButtonWithFlyout                   Background= Grey            PointerOver = Blue
 2. MoreOptionsButtonWithHoverStyle             Background="Red"         No PointerOver
 3. MoreOptionsButtonWithHoverStyleTest        Background= Grey             PointerOver = Blue


  I Have Created a Property and Binded to Button`      

    <Button  Name="ButtonTest" Command="{Binding MoreOptionCommand}" VerticalAlignment="Stretch"     Style="{Binding ShowFlyoutstyle, Converter={StaticResource BoolToButtonStyleConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  FontSize="30"
                                    FontWeight="Bold">       <Button.Flyout>  <Flyout Placement="Bottom" Closed="{x:Bind Closing}"

          private void Closing()     {      ShowFlyoutstyle = "ClosingFlyhover";  }`

Indudhar Gowda 426

I have Created 3 Styles

MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver

MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue

<Button  Name="ButtonTest" Command="{Binding MoreOptionCommand}" VerticalAlignment="Stretch"     Style="{Binding ShowFlyoutstyle, Converter={StaticResource BoolToButtonStyleConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  FontSize="30"
                                FontWeight="Bold">       <Button.Flyout>  <Flyout Placement="Bottom" Closed="{x:Bind Closing}"

      private void Closing()     {      ShowFlyoutstyle = "ClosingFlyhover";  }

Indudhar Gowda 426 Reputation points

2020-03-26T08:11:26.72+00:00
Above is what I have done.....Everything is Working except the last FlyoutClosed Changing BackGround..

Any Other Solution which can solve this problem with Button itself..like adding attached property checked to Button...or any other...
Richard Zhang-MSFT 6,936 Reputation points

2020-03-26T08:27:05.367+00:00

I may understand what you mean wrong. Are you dynamically switching Button.Style when you click a button? Can you provide a minimum runnable demo that will help me analyze your problem

Indudhar Gowda 426

Thanks for the Support Richard... I was able complete the behaviour in Button itself ..Its working Perfectly.

 private void ButtonTest_OnPointerEntered(object sender, PointerRoutedEventArgs e)
        {
            var myBrush = new SolidColorBrush(ColorHelper.FromArgb(255, 46, 146, 250));
            var grids = FindVisualChildren<Grid>(ButtonTest);
            foreach (var grid in grids)
            {
                if (grid.Name == "RootGrid")
                {
                    grid.Background = myBrush;
                }
            }
        }

Indudhar Gowda 426

           private void ButtonTest_OnPointerExited(object sender, PointerRoutedEventArgs e)
                {
                    var myBrush = new SolidColorBrush(ColorHelper.FromArgb(255, 226, 222, 222));
                    var grids = FindVisualChildren<Grid>(ButtonTest);
                    foreach (var grid in grids)
                    {
                        if (grid.Name == "RootGrid")
                        {
                            grid.Background = myBrush;
                        }
                    }
                }

Indudhar Gowda 426

   private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
        {
            if (depObj == null) yield break;
            for (var i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
            {
                var child = VisualTreeHelper.GetChild(depObj, i);
                if (child is T dependencyObject)
                {
                    yield return dependencyObject;
                }    
                foreach (var childOfChild in FindVisualChildren<T>(child))
                {
                    yield return childOfChild;
                }
            }
        }

Share via

UWP : Button Style PointerOver Color Not working Properly

0 additional answers

Your answer