none
[UWP] AppBarButton click event not always firing RRS feed

  • Question

  • I have some AppBarButtons in my main window TopAppBar.CommandBar. I'm using PathIcon to define the AppBarButton.Icon. The problem I am having is that the button will only become active or highlighted if the mouse entered into the button from the bottom of the control. The click event will only fire if the button is in the highlighted state. There is nothing special that I'm doing as far as describing the buttons.

           <CommandBar  x:Name="cmdBarMain"  
                         Background="Transparent"
                         FlowDirection="RightToLeft" OverflowButtonVisibility="Collapsed" IsDynamicOverflowEnabled="False" HorizontalContentAlignment="Right">
                <CommandBar.Content>
                    <TextBlock x:Name="tbProfile" Margin="12,14" HorizontalAlignment="Center" Foreground="Black"/>
                </CommandBar.Content>
                
                <AppBarToggleButton x:Uid="ScrollLock" Click="BtnScrollLock_Checked" x:Name="btnScrollLock" Grid.Column="1" Foreground="#FF43434E" ToolTipService.ToolTip="Scroll lock" Visibility="Collapsed">
                            <AppBarToggleButton.Icon>
                                <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="M10,13.0624961853027L8.46093940734863,13.546875 7.98730516433716,14.0644540786743 7.8125,14.6875 8.4375,15.828125 10,16.3125038146973 11.5390682220459,15.828125 12.1875,14.6875 11.5390682220459,13.546875 10,13.0624961853027z M10,1.49999618530273L8.63575077056885,1.70800352096558 7.52345085144043,2.27343320846558 6.77442932128906,3.10839629173279 6.50001525878906,4.12500381469727 6.50001525878906,6.3749885559082 13.4375,6.3749885559082 13.4375,4.1874885559082 13.1992206573486,3.13475704193115 12.4687528610229,2.28124380111694 11.3632831573486,1.708979845047 10,1.49999618530273z M10,0L12.1250066757202,0.329101383686066 13.8750095367432,1.22656106948853 15.0625114440918,2.55761241912842 15.5000114440918,4.1874885559082 15.5000114440918,6.43749237060547 19.9375152587891,6.43749237060547 20,6.9999885559082 20,19.0625 0,19.0625 0,6.93750381469727 0.0625038146972656,6.3749885559082 4.50000762939453,6.3749885559082 4.50000762939453,4.1874885559082 4.93750762939453,2.55761241912842 6.12500667572021,1.22656106948853 7.87500429153442,0.329101383686066 10,0z" />
                            </AppBarToggleButton.Icon>
                        </AppBarToggleButton>
                        <AppBarButton x:Name="btnFullScreen" Grid.Column="3" Foreground="#FF43434E" x:Uid="FullScreen"  Click="btnFullScreen_Click">
                            <AppBarButton.Icon>
                                <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="M7.24122524261475,11.8743715286255L8.12497425079346,12.7581186294556 2.13421630859375,18.7500019073486 6.24999046325684,18.7500019073486 6.24999046325684,20 0,20 0,13.7500085830688 1.24999821186066,13.7500085830688 1.24999821186066,17.8667221069336 7.24122524261475,11.8743715286255z M12.758768081665,11.8743562698364L18.7499713897705,17.8667259216309 18.7499713897705,13.7500085830688 19.9999694824219,13.7500085830688 19.9999694824219,20 13.749979019165,20 13.749979019165,18.7500019073486 17.8657779693604,18.7500019073486 11.8749809265137,12.7581043243408 12.758768081665,11.8743562698364z M13.749979019165,0L19.9999694824219,0 19.9999694824219,6.24999046325684 18.7499713897705,6.24999046325684 18.7499713897705,2.1332311630249 12.7587175369263,8.12564182281494 11.8749685287476,7.24188899993896 17.8657054901123,1.24999821186066 13.749979019165,1.24999821186066 13.749979019165,0z M0,0L6.24999046325684,0 6.24999046325684,1.24999821186066 2.13426518440247,1.24999821186066 8.12500190734863,7.24188899993896 7.24125289916992,8.12564182281494 1.24999821186066,2.13323163986206 1.24999821186066,6.24999046325684 0,6.24999046325684 0,0z" />
                            </AppBarButton.Icon>
                        </AppBarButton>
                <AppBarButton x:Name="btnOpenMenu" Grid.Column="0" Foreground="#FF43434E" Click="btnOpenMenu_Click">
                    <AppBarButton.Icon>
                        <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,16.6949424743652L19.9960536956787,16.6949424743652 19.9960536956787,20 0,20 0,16.6949424743652z M0,8.34812831878662L19.9960536956787,8.34812831878662 19.9960536956787,11.6531858444214 0,11.6531858444214 0,8.34812831878662z M0,0L19.9960536956787,0 19.9960536956787,3.30505657196045 0,3.30505657196045 0,0z" />
                    </AppBarButton.Icon>
                </AppBarButton>
    
            </CommandBar>


    If my reply solves your issue, please mark it as the answer


    Tuesday, November 13, 2018 8:33 PM

All replies

  • Hi Jim,

    >> The problem I am having is that the button will only become active or highlighted if the mouse entered into the button from the bottom of the control.
    Sorry I can not reproduce this issue in my project, I tested your code and the actual result is the button will be highlighted no matter which side the mouse enters, and the click event can be fired every time, so I’m afraid you need provide more details such as your operating system, Visual Studio version and the target version of your project.
    It would be better if you can provide a simple demo to reproduce your problem.
    Thanks for your understanding.

    Regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, November 14, 2018 9:20 AM
    Moderator
  • VS 2017 15.8.0

    Target version Windows 10, version 1803 Build 17134

    Min version Windows 10 Fall Creators Update Build 16299

    OS, Microsoft Windows [Version 10.0.17134.407]


    If my reply solves your issue, please mark it as the answer

    Wednesday, November 14, 2018 4:06 PM
  • Hi Jim,

    I have the same environment as yours, but sorry I still cannot reproduce this issue. I am not sure if there are other codes that may affect this. When you simply use the code above in an empty new page, will you reproduce the same problem? 
    Regards

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    Thursday, November 15, 2018 6:06 AM
    Moderator
  • I uncovered the underlying problem. In my app I want to have the MainWindow background, which could be an image or a acrylic color, extend into the title bar. In App.xaml.cs I execute this bit of code:

    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;

    When this call is made the title bar does not show (the system menu buttons are still there) but the strange behavior of the AppBarButtons shows up.

    What I'm attempting to do here is extend the background color of a Canvas, which is hosted in a SplitView in the MainWindow, into the title bar. I don't necessarily want to hide the title bar, but the disappearance of the title bar and the strange button behavior seems to be a side effect. Setting TitleBar.ExtendViewIntoTitleBar = true seems to be the culprit. Removing that line of code restores normal AppBarButton behavior.

    One odd thing I noticed is that the value of TitleBar.ExtendViewIntoTitleBar sticks with the application as a persisted setting without any action on my part, i.e. after removing the line of code and then running the app the problem still persists. I had to uninstall the app to remove this "setting" in order to see the correct app behavior.



    If my reply solves your issue, please mark it as the answer

    Sunday, November 18, 2018 4:56 PM
  • Hi Jim,

    Sorry for the late reply.

    I could reproduce this issue now, in my test, this is because part of the AppBarButton is covered by the default TitleBar, as the screenshot show:

     

    AppBarButton will only be highlighted if the mouse is moved to the green area, and the Click event will be triggered. But not the yellow area.

    An alternative solution is to replace the <TopAppBar> with a < BottomAppBar> so that the commandBar will not be covered.

    Regards,

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, November 21, 2018 2:46 AM
    Moderator