UWP Template10 FontIcon Element ausblenden, wenn das Menü "IsOpen"

Question

Ich habe das folgende XAML-Konstrukt.

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

Wenn das Menü "IsOpen", das FontIcon-Element sollte zusammengebrochen werden. Wenn das Menü nicht "IsOpen" ist, sollte das FontIcon-Element sichtbar sein.

Die Groove Music App hat ein solches Verhalten (siehe Bild in groove music app with opened menu). Welche sind die Parameter für die Bindung? Eine Erklärung zum Verbergen der Hamburger-Taste ist in UWP Template10 Hide hamburger button when menu is open beschrieben.

Ich denke, dass es ein Template10 Verhalten ist. Ich habe Folgendes in der Shell.xaml-Seite von template10 versucht.

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

Der Textblock txt-1 zeigt den korrekten Zustand der IsOpen Eigenschaft HamburgerMenu während des Textblock txt-2 leer ist.

Answer 1

So funktioniert es zu konvertieren. Ändern Sie die Bindung zu x: bind und verweisen Sie auf "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> 

und verwenden eine umkehrbare BooleanToVisibilityConverter wie that

Answer 2

Sie könnten eine IValueConverter verwenden, um die IsOpen zu einer Sichtbarkeit

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


} 

Dieser Artikel erklärt IValueConverters und wie verwenden, um sie in Ihrem XAML

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