The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
[UWP] Button's have limited PointerOver VisualState in NavigationView Header RRS feed

  • Question

  • I'm working on my UWP project, and when I put a button in the NavigationView Header template, it only has PointerOver VisualState when the mouse is only on the bottom 5 or so pixels as shown below. The dot represents where my mouse is on the button in the header.

    This is the code in my XAML:

    <NavigationView x:Name="NavigationView" Header="" SelectionChanged="{x:Bind mainViewModel.selectionChanged, Mode=OneWay}" Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}">
                <NavigationView.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Visibility="{Binding listsClicked}">
                            <Button Content="Food"/>
                        </StackPanel>

    The same issue occurs if I put a CommandBar in the header. How can I allow the PointerOver VisualState for the whole field of the Button?


    Wednesday, July 17, 2019 3:45 PM

Answers

  • Hi,

    In fact, your pointer didn't move to the button, but was blocked by the title bar.

    The relationship between them is like the one in the picture below.



    The reason for this is that you used

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

    But the title

    bar is not hidden, it is transparent. It still stays where it is and is at the top of all the elements.

    You have two ways to solve this problem.

    1. Change your UI layout and move down the actionable elements (like buttons)
    2. Use Window.Current.SetTitleBar(ele) to specify an element as the title bar so that it has the characteristics of the title bar while avoiding occlusion of the element.

    Best regards. 
    <small>I have a same answer at StackOverflow</small>

    Thursday, July 18, 2019 1:49 AM