UWP Template10菜单“IsOpen”时隐藏FontIcon元素答案

【问题标题】：UWP Template10 Hide FontIcon element when the menu "IsOpen"UWP Template10菜单“IsOpen”时隐藏FontIcon元素
【发布时间】：2017-05-01 06:56:48
【问题描述】：

我有以下 xaml 构造。

<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>

当菜单“IsOpen”时，FontIcon 元素应该被折叠。如果菜单不是“IsOpen”，则 FontIcon 元素应该是可见的。

groove 音乐应用有这样的行为（见groove music app with opened menu 中的图片）。绑定的参数有哪些？ UWP Template10 Hide hamburger button when menu is open 中描述了隐藏汉堡按钮的说明。

我猜这是 template10 的行为。我在 template10 的 Shell.xaml 页面中尝试了以下操作。

<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>

TextBlock txt-1 显示 HamburgerMenu 的 IsOpen 属性的正确状态，而 TextBlock txt-2 为空。

【问题讨论】：

标签： binding uwp winrt-xaml template10 hamburger-menu

【解决方案1】：

您可以使用 IValueConverter 将 IsOpen 转换为可见性

  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;
  }


}

本文介绍了 IValueConverters 以及如何在 XAML 中使用它们

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

【讨论】：

值转换器不是问题。我想知道，如何将它所依赖的 FontIcon 的可见性属性设置为父 Controls:HamburgerMenu.IsOpen 状态？
您应该能够绑定到 ElementName，例如 Visibility="{Binding ElementName=MyHamburgerMenu, Path=IsOpen, Converter = {StaticResource MyVisibilityConverter}}"/>
嗨，肯，感谢您的努力。我已经扩展了上面的问题描述。

【解决方案2】：

所以它起作用了。将绑定更改为 x:bind 并将其引用到“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>

并使用可反转的 BooleanToVisibilityConverter，例如 that

【讨论】：