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

时间:2017-05-01 06:56:48

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

我有以下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>

当菜单&#34; IsOpen&#34;时,应折叠FontIcon元素。如果菜单不是&#34; IsOpen&#34;,则FontIcon元素应该是可见的。

凹槽音乐应用有这样的行为(见groove music app with opened menu中的图片)。 哪个是绑定的参数? UWP Template10 Hide hamburger button when menu is open中描述了隐藏汉堡包按钮的说明。

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

2 个答案:

答案 0 :(得分:0)

您可以使用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

答案 1 :(得分:0)

所以它有效。 将绑定更改为 x:bind 并将其引用到&#34; MyHamburgerMenu&#34;。

<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