UWP Template10 Hide FontIcon element when the menu "IsOpen"

Question

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.

score 0 · Answer 1 · answered May 01 '17 at 10:58

0

You could use an IValueConverter to convert the IsOpen to a visibility

  public class BooleanToVisibilityConverter : IValueConverter
{

  public object Convert(object value, Type targetType, object parameter, string language)
  {
      return (!(bool)value) ? Visibility.Visible : Visibility.Collapsed;
  }

  public object ConvertBack(object value, Type targetType, object parameter, string language)
  {
      return value;
  }


}

This article explains IValueConverters and how to use them in your XAML

https://learn.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Data.IValueConverter

answered May 01 '17 at 10:58

Ken Tucker

4,126
1
18
24

The valueconverter is not the problem. I want to know, how to set the FontIcon's visibility property that it depends to the parent Controls:HamburgerMenu.IsOpen state? – Uwe Eichkorn May 02 '17 at 06:15
You should be able to Bind to an ElementName for example Visibility="{Binding ElementName=MyHamburgerMenu, Path=IsOpen, Converter = {StaticResource MyVisibilityConverter}}"/> – Ken Tucker May 02 '17 at 11:20
Hi Ken, thanks for your effort. I have extended the problem description above. – Uwe Eichkorn May 03 '17 at 06:20

score 0 · Accepted Answer · edited May 23 '17 at 12:18

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

UWP Template10 Hide FontIcon element when the menu "IsOpen"

2 Answers2