Shell 动态隐藏弹出菜单中的 Shell 项
Shell dynamically hide ShellItem in Flyout Menu
是否有解决方案可以将 IsVisible
动态设置为 ShellItem
?我必须解决以下问题:我有一个包含 ShellItem
的弹出菜单,一个是登录,另一个是注销。
<ShellItem x:Name="LoginItem" Route="login" Title="{resources:Translate Login}" Icon="icon_LogIn.png" >
<ShellContent ContentTemplate="{DataTemplate views:Account.LoginPage}"/>
</ShellItem>
<ShellItem x:Name="LogoutItem" Route="Logout" Title="{resources:Translate Logout}" Icon="icon_logOut.png" >
<ShellContent ContentTemplate="{DataTemplate views:Account.SignOutPage}"/>
</ShellItem>
现在不必在弹出菜单中同时显示它们。如果用户已登录,则只有注销项应该可见。如果用户未登录,则只有“登录”项应该可见。正如我所见,弹出菜单是建立在应用程序启动的基础上的,然后再也不会了,那么我该如何实现呢?而且没有ShellItem.Behavior
等等
另外,ShellItem
和 FlyoutItem
有什么区别?
在您的 AppShell.xaml.cs 中创建并管理一个 属性 来反映已验证状态 IsUserAuthenticated
以绑定到 IsVisible
。
InvertedBoolConverter is from Xamarin.CommunityToolkit package
<Shell.Resource>
<ResourceDictionary>
<xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
</ResourceDictionary>
</Shell.Resource>
<ShellItem x:Name="LoginItem" Route="login" Title="{resources:Translate Login}" Icon="icon_LogIn.png"
IsVisible="{Binding IsUserAuthenticated,
Converter={StaticResource InvertedBoolConverter}}">
<ShellContent ContentTemplate="{DataTemplate views:Account.LoginPage}"/>
</ShellItem>
<ShellItem x:Name="LogoutItem" Route="Logout" Title="{resources:Translate Logout}" Icon="icon_logOut.png"
IsVisible="{Binding IsUserAuthenticated}">
<ShellContent ContentTemplate="{DataTemplate views:Account.SignOutPage}"/>
</ShellItem>
相关问题
您可以使用 <Shell.FlyoutHeaderTemplate>
添加自定义菜单项,然后使用绑定到 hide/show 菜单。
第 1 步。实现 InverseBoolConverter class
namespace MyMobileApp.Converters
{
public class InverseBoolConverter : Xamarin.Forms.IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
}
}
第 2 步:在 AppShell.xaml class.Then 中添加 InverseBoolConverter 引用,在顶部添加 xmlns:converter="clr-namespace:MyMobileApp.Converters"
(在 Shell 标记内)。然后在 <ResourceDictionary>
标签之后添加 <converter:InverseBoolConverter x:Key="cvInverse"></converter:InverseBoolConverter>
。
第 3 步:在 AppShell.xaml 中的 </FlyoutItem>
标记之后添加以下代码。
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="White">
<!--Header-->
<StackLayout Orientation="Horizontal" BackgroundColor="LightGray" Padding="20" IsVisible="{Binding IsUserLogedin}">
<Label Text="Watchlist" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding WatchlistCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="Logout" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="End" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LogoutCommand}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
<StackLayout Orientation="Horizontal" BackgroundColor="LightGray" Padding="20" IsVisible="{Binding IsUserLogedin, Converter={StaticResource cvInverse}}">
<Label Text="Register" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RegisterCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="Login" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="End" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoginCommand}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
第 4 步:在 AppShell.xaml.cs class
中实现绑定
public Xamarin.Forms.Command LoginCommand { get; }
public Xamarin.Forms.Command RegisterCommand { get; }
public Xamarin.Forms.Command LogoutCommand { get; }
public Xamarin.Forms.Command WatchlistCommand { get; }
private bool _isUserLoggedIn;
public bool IsUserLogedin
{
get => _isUserLoggedIn;
set => SetProperty(ref _isUserLoggedIn, value);
}
public AppShell()
{
InitializeComponent();
LoginCommand = new Xamarin.Forms.Command(MenuClicked);
RegisterCommand = new Xamarin.Forms.Command(MenuClicked);
LogoutCommand = new Xamarin.Forms.Command(MenuClicked);
WatchlistCommand = new Xamarin.Forms.Command(MenuClicked);
BindingContext = this;
}
private async void MenuClicked(object obj)
{
}
protected bool SetProperty<T>(ref T backingStore, T value, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = "", System.Action onChanged = null)
{
if (System.Collections.Generic.EqualityComparer<T>.Default.Equals(backingStore, value))
return false;
backingStore = value;
onChanged?.Invoke();
OnPropertyChanged(propertyName);
return true;
}
是否有解决方案可以将 IsVisible
动态设置为 ShellItem
?我必须解决以下问题:我有一个包含 ShellItem
的弹出菜单,一个是登录,另一个是注销。
<ShellItem x:Name="LoginItem" Route="login" Title="{resources:Translate Login}" Icon="icon_LogIn.png" >
<ShellContent ContentTemplate="{DataTemplate views:Account.LoginPage}"/>
</ShellItem>
<ShellItem x:Name="LogoutItem" Route="Logout" Title="{resources:Translate Logout}" Icon="icon_logOut.png" >
<ShellContent ContentTemplate="{DataTemplate views:Account.SignOutPage}"/>
</ShellItem>
现在不必在弹出菜单中同时显示它们。如果用户已登录,则只有注销项应该可见。如果用户未登录,则只有“登录”项应该可见。正如我所见,弹出菜单是建立在应用程序启动的基础上的,然后再也不会了,那么我该如何实现呢?而且没有ShellItem.Behavior
等等
另外,ShellItem
和 FlyoutItem
有什么区别?
在您的 AppShell.xaml.cs 中创建并管理一个 属性 来反映已验证状态 IsUserAuthenticated
以绑定到 IsVisible
。
InvertedBoolConverter is from Xamarin.CommunityToolkit package
<Shell.Resource>
<ResourceDictionary>
<xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
</ResourceDictionary>
</Shell.Resource>
<ShellItem x:Name="LoginItem" Route="login" Title="{resources:Translate Login}" Icon="icon_LogIn.png"
IsVisible="{Binding IsUserAuthenticated,
Converter={StaticResource InvertedBoolConverter}}">
<ShellContent ContentTemplate="{DataTemplate views:Account.LoginPage}"/>
</ShellItem>
<ShellItem x:Name="LogoutItem" Route="Logout" Title="{resources:Translate Logout}" Icon="icon_logOut.png"
IsVisible="{Binding IsUserAuthenticated}">
<ShellContent ContentTemplate="{DataTemplate views:Account.SignOutPage}"/>
</ShellItem>
相关问题
您可以使用 <Shell.FlyoutHeaderTemplate>
添加自定义菜单项,然后使用绑定到 hide/show 菜单。
第 1 步。实现 InverseBoolConverter class
namespace MyMobileApp.Converters
{
public class InverseBoolConverter : Xamarin.Forms.IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return !(bool)value;
}
}
}
第 2 步:在 AppShell.xaml class.Then 中添加 InverseBoolConverter 引用,在顶部添加 xmlns:converter="clr-namespace:MyMobileApp.Converters"
(在 Shell 标记内)。然后在 <ResourceDictionary>
标签之后添加 <converter:InverseBoolConverter x:Key="cvInverse"></converter:InverseBoolConverter>
。
第 3 步:在 AppShell.xaml 中的 </FlyoutItem>
标记之后添加以下代码。
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="White">
<!--Header-->
<StackLayout Orientation="Horizontal" BackgroundColor="LightGray" Padding="20" IsVisible="{Binding IsUserLogedin}">
<Label Text="Watchlist" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding WatchlistCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="Logout" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="End" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LogoutCommand}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
<StackLayout Orientation="Horizontal" BackgroundColor="LightGray" Padding="20" IsVisible="{Binding IsUserLogedin, Converter={StaticResource cvInverse}}">
<Label Text="Register" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RegisterCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="Login" TextColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="End" VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoginCommand}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
第 4 步:在 AppShell.xaml.cs class
中实现绑定public Xamarin.Forms.Command LoginCommand { get; }
public Xamarin.Forms.Command RegisterCommand { get; }
public Xamarin.Forms.Command LogoutCommand { get; }
public Xamarin.Forms.Command WatchlistCommand { get; }
private bool _isUserLoggedIn;
public bool IsUserLogedin
{
get => _isUserLoggedIn;
set => SetProperty(ref _isUserLoggedIn, value);
}
public AppShell()
{
InitializeComponent();
LoginCommand = new Xamarin.Forms.Command(MenuClicked);
RegisterCommand = new Xamarin.Forms.Command(MenuClicked);
LogoutCommand = new Xamarin.Forms.Command(MenuClicked);
WatchlistCommand = new Xamarin.Forms.Command(MenuClicked);
BindingContext = this;
}
private async void MenuClicked(object obj)
{
}
protected bool SetProperty<T>(ref T backingStore, T value, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = "", System.Action onChanged = null)
{
if (System.Collections.Generic.EqualityComparer<T>.Default.Equals(backingStore, value))
return false;
backingStore = value;
onChanged?.Invoke();
OnPropertyChanged(propertyName);
return true;
}