question

IDGO-6443 avatar image
0 Votes"
IDGO-6443 asked IDGO-6443 published

UWP : Button Style PointerOver Color Not working Properly

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


windows-uwpwindows-uwp-xaml
red.gif (147.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

RichardZhang-MSFT avatar image
0 Votes"
RichardZhang-MSFT answered IDGO-6443 published

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.

· 12
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

        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,



0 Votes 0 ·

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

0 Votes 0 ·

I have Created 3 Styles
1. MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
2. MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver
3. MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue
4. 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..

0 Votes 0 ·

I have Created 3 Styles
1. MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
2. MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver
3. MoreOptionsButtonWithHoverStyleTest Background= Grey PointerOver = Blue
4. 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";  }







0 Votes 0 ·

I have Created 3 Styles

1. MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue
2. MoreOptionsButtonWithHoverStyle Background="Red" No PointerOver
3. 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.....

0 Votes 0 ·
 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";  }`
0 Votes 0 ·
 I have Created 3 Styles  

  1. MoreOptionsButtonWithFlyout Background= Grey PointerOver = Blue

  2. MoreOptionsButtonWithHoverStyle Background=&#34;Red&#34; No PointerOver

  3. 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";  }
    


0 Votes 0 ·
Show more comments