How to add a switch in Xamarin Shell MenuItem

user_9302511 0
Viewed 1161

I want to have a switch in a menuItem of my AppShell.xaml (in addition to the usual text and icon). How can I do that while keeping the styles of the MenuItem ?

I used a DataTemplate in the Shell.MenuItemTemplate of my MenuItem but the result is just ugly as all the styles of the MenuItem are lost. The MenuItem created this way does not have the same font, text color, and font size than the other FlyoutItems and MenuItems of the Shell.

<MenuItem Text="MyMenuItem" Command="{Binding SwitchMode}">
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                <Label Text="{Binding Text}"/>
                <Switch IsToggled="{Binding IsModeActivated}"/>
            </StackLayout>
        </DataTemplate>
    </Shell.MenuItemTemplate>
xamarin.forms
1 Answers

Use element Shell.MenuItemTemplate with reference to DataTemplate defined in Resources.

Common/shared element property values can be defined in a "BaseStyle", while menu specific properties can be defined in styles based on the "BaseStyle":

<Shell.Resources>
  ...
  <Style x:Key="labelBaseStyle" TargetType="Label">
    <Setter Property="VerticalTextAlignment" Value="Center" />
  </Style>

  <Style x:Key="firstMenuLabelStyle" TargetType="Label" BasedOn="{StaticResource labelBaseStyle}">
    <Setter Property="FontAttributes" Value="Italic" />
  </Style>

  <Style x:Key="menuLabelStyle" TargetType="Label" BasedOn="{StaticResource labelBaseStyle}">
    <Setter Property="FontAttributes" Value="Bold" />
  </Style>

  <DataTemplate x:Key="firstMenuItemTemplate">
    <StackLayout ...
      <Label Style="{StaticResource firstMenuLabelStyle}" ...
  </DataTemplate>

  <DataTemplate x:Key="menuItemTemplate">
    <StackLayout ...
      <Label Style="{StaticResource menuLabelStyle}" ...
  </DataTemplate>
  ...
</Shell.Resources>
...
<MenuItem Text="MenuItem1" Shell.MenuItemTemplate="{StaticResource firstMenuItemTemplate}" />

<MenuItem Text="MenuItem2" Shell.MenuItemTemplate="{StaticResource menuItemTemplate}" />
user_89353800
Related