How to ignore button to capture click of buttons inside the button that we ignore in Template10?

Question

I want to click a combobox inside a template10 HamburgerMenu literal button. How do I do that.

<Controls:HamburgerMenu x:Name="MyHamburgerMenu" PaneWidth="272">

    <Controls:HamburgerMenu.PrimaryButtons>
        <!--  user potrait  -->
        <Controls:HamburgerButtonInfo ButtonType="Literal" ClearHistory="True">
            <RelativePanel Margin="52,4,12,4">
                <Ellipse
                    x:Name="Potrait"
                    Width="100"
                    Height="100"
                    Margin="4"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.AlignTopWithPanel="True"
                    Stroke="Black">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="ms-appx:///Assets/child potrait.jpg" Stretch="UniformToFill" />
                    </Ellipse.Fill>
                </Ellipse>
                <ComboBox
                    x:Name="User"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.Below="Potrait">
                    <ComboBoxItem Content="Amir" IsSelected="True" />
                    <ComboBoxItem Content="Aishah" />
                    <ComboBoxItem Content="Alia" />
                </ComboBox>
                <ComboBox
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.Below="User">
                    <ComboBoxItem Content="Matematik" IsSelected="True" />
                    <ComboBoxItem Content="Bahasa Malaysia" />
                    <ComboBoxItem Content="Bahasa Inggeris" />
                </ComboBox>
            </RelativePanel>
        </Controls:HamburgerButtonInfo>

https://i.sstatic.net/cwl7F.png

I want to click the combobox under the potrait. Right now, when i click anywhere near the potrait(including the combobox), hamburger pane collapse.

Thanks.

Answer 1

when i click anywhere near the potrait(including the combobox), hamburger pane collapse.

The "issue" of describing above is HamburgerMenu's feature in Template 10. The following code simply explains this feature.

var escape = new Func<bool>(() =>
{
  if (DisplayMode == SplitViewDisplayMode.CompactOverlay
      || DisplayMode == SplitViewDisplayMode.Overlay)
        IsOpen = false;
    if (Equals(ShellSplitView.PanePlacement, SplitViewPanePlacement.Left))
     {
          ShellSplitView.Content.RenderTransform = new TranslateTransform { X = 48 + ShellSplitView.OpenPaneLength };
           focus(FocusNavigationDirection.Right);
           ShellSplitView.Content.RenderTransform = null;
         }
             else
        {
           ShellSplitView.Content.RenderTransform = new TranslateTransform { X = -48 - ShellSplitView.OpenPaneLength };
           focus(FocusNavigationDirection.Left);
           ShellSplitView.Content.RenderTransform = null;
       }
     return true;
});

The escape function will be executed when you touch hamburg content for collapsing hamburger pane.

I have tried to handle your issue directly by setting IsOpen as true when your commbobox PointerEntered just like the following code.

private bool canCloseHamburgerMenu = true;
private void User_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    canCloseHamburgerMenu = false;
}

private void User_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    canCloseHamburgerMenu = true;
}

private void MyHamburgerMenu_IsOpenChanged(object sender, ChangedEventArgs<bool> e)
{
    var hm = sender as HamburgerMenu;
    if ((hm.DisplayMode == SplitViewDisplayMode.CompactOverlay || hm.DisplayMode == SplitViewDisplayMode.Overlay) && e.NewValue == false)
    {
        //hm.IsOpen = canCloseHamburgerMenu == false ? true : false;
    }
}

But it throws stack over flow exception. I found the reason in the source code.

partial void InternalIsOpenChanged(ChangedEventArgs<bool> e)
{
    UpdateIsPaneOpen(e.NewValue);
    UpdateHamburgerButtonGridWidthToFillAnyGap();
    UpdateControl();
}

When I changed IsOpen property the InternalIsOpenChanged method will be executed and reset IsOpen to false and then MyHamburgerMenu_IsOpenChanged event will be activated. So the thread goes into an infinite loop.

The class of HamburgerMenu is sealed. So you could not inherit and rewrite it's method. You could custom new hamburgerMenu by using SplitView.