Hello,
Welcome to our Microsoft Q&A platform!
Do you want to achieve the result like following screenshot?
Click after
If so, you can put Expander
to MenuItem
. Here is Expander 's document.
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">
<Shell.MenuItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Label Text="Name"
FontAttributes="Bold"
FontSize="Medium" />
<Image Source="expand.png"
HorizontalOptions="End"
VerticalOptions="Start">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source"
Value="collapse.png" />
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="icon_about.png"
Aspect="AspectFill"
HeightRequest="120"
WidthRequest="120" />
<Label Grid.Column="1"
Text="Details"
FontAttributes="Italic" />
</Grid>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
If you use Expander
,please add Forms.SetFlags("Expander_Experimental");
to OnCreate
method of MainActivity.cs
.
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
//add here
Forms.SetFlags("Expander_Experimental");
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
}
}
Here is my use image.
Here is my AppShell.xaml
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppShell.Views" xmlns:controls="clr-namespace:AppShell"
Title="AppShell"
Shell.ItemTemplate="{StaticResource FlyoutTemplateSelector}"
x:Class="AppShell.AppShell">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<!--
Default Styles for all Flyout Items
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
-->
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="LightBlue"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyleSeparator" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="#ffffff" />
<Setter Property="Label.HeightRequest" Value="30" />
<Setter Property="Label.BackgroundColor" Value="#bcbcbc" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="labelWihteStyle" TargetType="Label">
<Setter Property="Label.TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="#bcbcbc" />
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
<Setter Property="Label.HeightRequest" Value="30" />
<Setter Property="BackgroundColor" Value="#ff00bc" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<DataTemplate x:Key="FlyoutItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.75*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Icon}"
HeightRequest="45"
Margin="20,0,0,0"
FontSize="30"
TextColor="Black"
VerticalTextAlignment="Center" />
<Label Grid.Column="1"
Text="{Binding Title}"
TextColor="Black"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="FlyoutHeaderTemplate">
<StackLayout Orientation="Vertical">
<Label HeightRequest="35"
Margin="20,0,0,0"
Text="{Binding Title}"
TextColor="Black"
VerticalTextAlignment="Center" >
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</DataTemplate>
<controls:FlyoutItemTemplateSelector
x:Key="FlyoutTemplateSelector"
NavigationHeaderTemplate="{StaticResource FlyoutHeaderTemplate}"
NavigationItemTemplate="{StaticResource FlyoutItemTemplate}" />
</ResourceDictionary>
</Shell.Resources>
<!--
When the Flyout is visible this defines the content to display in the flyout.
FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
https://learn.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
-->
<FlyoutItem x:Name="myBrowseItem" Title="myBrowseItem" >
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">
<Shell.MenuItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Label Text="Name"
FontAttributes="Bold"
FontSize="Medium" />
<Image Source="expand.png"
HorizontalOptions="End"
VerticalOptions="Start">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source"
Value="collapse.png" />
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="icon_about.png"
Aspect="AspectFill"
HeightRequest="120"
WidthRequest="120" />
<Label Grid.Column="1"
Text="Details"
FontAttributes="Italic" />
</Grid>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
<!--<MenuItem Text="Logout2" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">
</MenuItem>-->
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>
</Shell>
===================
Update======================
If you want to achieve the above answer, you can use nest expender like following code.
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppShell.Views" xmlns:controls="clr-namespace:AppShell"
Title="AppShell"
Shell.ItemTemplate="{StaticResource FlyoutTemplateSelector}"
x:Class="AppShell.AppShell">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<!--
Default Styles for all Flyout Items
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
-->
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="LightBlue"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyleSeparator" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="#ffffff" />
<Setter Property="Label.HeightRequest" Value="30" />
<Setter Property="Label.BackgroundColor" Value="#bcbcbc" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="labelWihteStyle" TargetType="Label">
<Setter Property="Label.TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="#bcbcbc" />
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
<Setter Property="Label.HeightRequest" Value="30" />
<Setter Property="BackgroundColor" Value="#ff00bc" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<DataTemplate x:Key="FlyoutItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.75*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Icon}"
HeightRequest="45"
Margin="20,0,0,0"
FontSize="30"
TextColor="Black"
VerticalTextAlignment="Center" />
<Label Grid.Column="1"
Text="{Binding Title}"
TextColor="Black"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="FlyoutHeaderTemplate">
<StackLayout Orientation="Vertical">
<Label HeightRequest="35"
Margin="20,0,0,0"
Text="{Binding Title}"
TextColor="Black"
VerticalTextAlignment="Center" >
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</DataTemplate>
<controls:FlyoutItemTemplateSelector
x:Key="FlyoutTemplateSelector"
NavigationHeaderTemplate="{StaticResource FlyoutHeaderTemplate}"
NavigationItemTemplate="{StaticResource FlyoutItemTemplate}" />
</ResourceDictionary>
</Shell.Resources>
<!--
When the Flyout is visible this defines the content to display in the flyout.
FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
https://learn.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
-->
<FlyoutItem x:Name="myBrowseItem" Title="myBrowseItem" >
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">
<Shell.MenuItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Label Text="Mail"
FontAttributes="Bold"
FontSize="Medium" />
<Image Source="expand.png"
HorizontalOptions="End"
VerticalOptions="Start">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source"
Value="collapse.png" />
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<StackLayout Margin="10,0,0,0" >
<Expander>
<Expander.Header>
<Grid>
<Label Text="Read"
FontSize="Body" />
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Text="Primary "
FontAttributes="Italic" />
<Label Grid.Row="1"
Text="Important "
FontAttributes="Italic" />
</Grid>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</StackLayout>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
<!--<MenuItem Text="Logout2" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">
</MenuItem>-->
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>
</Shell>
Best Regards,
Leon Lu
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.