UWP Template10 菜单时隐藏FontIcon元素"IsOpen"

Question

我有以下 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 中的图像）。绑定的参数是什么？ .

中描述了隐藏汉堡包按钮的解释

我猜这是一个 template10 行为。我在模板 10 的 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 为空。

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


}

本文介绍了 IValueConverter 以及如何在您的 XAML

中使用它们

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

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

并使用像 that

这样的可逆 BooleanToVisibilityConverter

UWP Template10 菜单时隐藏FontIcon元素"IsOpen"

UWP Template10 Hide FontIcon element when the menu "IsOpen"

binding

winrt-xaml

hamburger-menu

uwp

template10