Search code examples
bindinguwpwinrt-xamltemplate10hamburger-menu

UWP Template10 Hide FontIcon element when the menu "IsOpen"


I have the following xaml construct.

<Controls:HamburgerMenu x:Name="MyHamburgerMenu">
  <Controls:HamburgerMenu.PrimaryButtons>
    <Controls:HamburgerButtonInfo x:Name="searchButton">
      <FontIcon x:Name="searchButtonIcon" Width="48"
                                  Height="48"
                                  Glyph="&#xE094;"
                                  Visibility="{Binding IsOpen, ???"/>
      <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find"/>
    <Controls:HamburgerButtonInfo x:Name="searchButton">
  </Controls:HamburgerMenu.PrimaryButtons>
</Controls:HamburgerMenu>

When the menu "IsOpen", the FontIcon element should be collapsed. If the menu not "IsOpen", the FontIcon element should be visible.

The groove music app has such a behaviour (see image in groove music app with opened menu). Which are the parameters for the binding? An explanation for hiding the hamburger button is described in UWP Template10 Hide hamburger button when menu is open.

I guess that it's a template10 behaviour. I tried the following within the template10's Shell.xaml page.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <TextBlock x:Name="txt-1" Text="{Binding IsOpen, ElementName=MyHamburgerMenu}" Grid.Row="0"/>
  <Controls:HamburgerMenu x:Name="MyHamburgerMenu" Grid.Row="1">
    <Controls:HamburgerMenu.PrimaryButtons>
      <Controls:HamburgerButtonInfo>
        <TextBlock x:Name="txt-2" Text="{Binding IsOpen, ElementName=MyHamburgerMenu}"/>
      </Controls:HamburgerButtonInfo>
    </Controls:HamburgerMenu.PrimaryButtons>
  </Controls:HamburgerMenu>
</Grid>

The TextBlock txt-1 displays the correct state of the HamburgerMenu's IsOpen property whereas the TextBlock txt-2 is empty.


Solution

  • So it works. Change the binding to x:bind and reference it to "MyHamburgerMenu".

    <Controls:HamburgerMenu x:Name="MyHamburgerMenu">
      <Controls:HamburgerMenu.PrimaryButtons>
        <Controls:HamburgerButtonInfo x:Name="searchButton">
          <SymbolIcon Width="48"
                      Height="48"
                      Symbol="Find"
                      Visibility="{x:Bind MyHamburgerMenu.IsOpen, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=false}"/>
          <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find"/>
        </Controls:HamburgerButtonInfo>
      </Controls:HamburgerMenu.PrimaryButtons>
    </Controls:HamburgerMenu>
    

    and use a invertable BooleanToVisibilityConverter like that