Стиль нижней вкладки меню Xamarin Forms

Question

В моем приложении есть следующее меню Shell Flyout:

<?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:views="clr-namespace:UniversalCheckInApp.Views"
   x:Class="UniversalCheckInApp.AppShell">

<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
        <Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
    </StackLayout>
</Shell.FlyoutHeader>


<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
            <Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
                   HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
                   TextDecorations="Underline"/>
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>

<FlyoutItem Title="Configuration" >
    <ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" >
        <views:NetworkConfiguration />
    </ShellContent>

    <ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
        <views:FormFieldConfiguration />
    </ShellContent>
</FlyoutItem>

<FlyoutItem Title="Collect Data">
    <ShellContent x:Name="scCollectData" Title="Collect Data">
        <views:DataCollection />
    </ShellContent>
</FlyoutItem>


<FlyoutItem Title="About">
    <ShellContent x:Name="scAbout" Title="About">
        <views:About />
    </ShellContent>
</FlyoutItem>

Это выглядит следующим образом:

Я пытаюсь выяснить, как изменить стиль двух пунктов меню, отображаемых в нижней части каждой страницы конфигурации.

ОБНОВЛЕНИЕ

На основе приведенного ниже комментария Iудалось получить параметры всплывающего меню внизу, которые выглядят следующим образом:

с использованием этого 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:views="clr-namespace:UniversalCheckInApp.Views"
   x:Class="UniversalCheckInApp.AppShell"
   FlyoutBackgroundColor="#D0E1F9"
   BackgroundColor="#1E1F26"
   Shell.TabBarBackgroundColor="#1E1F26"
   Shell.TabBarTitleColor="#D0E1F9"
   Shell.TabBarUnselectedColor="White">


<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
        <Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
           VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
    </StackLayout>
</Shell.FlyoutHeader>


<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
            <Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
               HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
               TextDecorations="Underline"/>
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>

<FlyoutItem Title="Configuration" >
    <ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" >
        <views:NetworkConfiguration />
    </ShellContent>

    <ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
        <views:FormFieldConfiguration />
    </ShellContent>
</FlyoutItem>

<FlyoutItem Title="Collect Data">
    <ShellContent x:Name="scCollectData" Title="Collect Data">
        <views:DataCollection />
    </ShellContent>
</FlyoutItem>


<FlyoutItem Title="About">
    <ShellContent x:Name="scAbout" Title="About">
        <views:About />
    </ShellContent>
</FlyoutItem>

Теперь проблема заключается в том, что я хочу настроить свойства FontSize, FontAttributes и TextDecorations для выбранных и невыбранных элементов панели вкладок.Есть идеи, как это сделать?

Answer 1

Вы можете использовать Style для достижения этой цели.Вы можете обратиться к следующему коду:

<ShellContent Route="elephants"
                  Style="{StaticResource ElephantsShell}"
                  Title="Elephants"
                  Icon="elephant.png"
                   />  

Вы можете определить стиль в Shell.Resources

  <Shell.Resources>
    <Style x:Key="BaseStyle" 
           TargetType="Element">
        <Setter Property="Shell.BackgroundColor" 
                Value="#455A64" />
        <Setter Property="Shell.ForegroundColor" 
                Value="White" />
        <Setter Property="Shell.TitleColor" 
                Value="White" />
        <Setter Property="Shell.DisabledColor" 
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor" 
                Value="#95FFFFFF" />
    </Style>
    <Style TargetType="ShellItem" 
           BasedOn="{StaticResource BaseStyle}" />
    <Style x:Key="DomesticShell"
           TargetType="Element" 
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.BackgroundColor" 
                Value="#039BE6" />
    </Style>
    <Style x:Key="MonkeysShell" 
           TargetType="Element"
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.BackgroundColor" 
                Value="#689F39" />
    </Style>
    <Style x:Key="ElephantsShell" 
           TargetType="Element" 
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.BackgroundColor" 
                Value="#FF00FF" />
    </Style>
    <Style x:Key="BearsShell" 
           TargetType="Element" 
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.BackgroundColor"
                Value="#546DFE" />
    </Style>
    <Style x:Key="AboutShell" 
           TargetType="Element" 
           BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.BackgroundColor" 
                Value="#96d1ff" />
    </Style>       
</Shell.Resources>

Для более подробной информации, вы можете обратиться к официальному образцу https://github.com/xamarin/xamarin-forms-samples/blob/master/UserInterface/Xaminals/Xaminals/AppShell.xaml

Обновление:

Если вы хотите настроить свойства текста на панели вкладок для выбранных и невыбранных элементов (например, обычный TextColor и невыбранный цвет текста), вы можете использовать следующий код:

       <Setter Property="Shell.TabBarBackgroundColor"
        Value="#3498DB" />
       <Setter Property="Shell.TabBarTitleColor"
              Value="White" />
       <Setter Property="Shell.TabBarUnselectedColor"
              Value="#90EE90" />

TabBarTitleColor - это цвет для выбранного цвета, `TabBarUnselectedColor - это цвет для другой невыбранной вкладки.

Если вы не хотите изменять общий стиль оболочки (т. Е.цвет фона / переднего плана панели в верхней части, которая содержит это меню гамбургера, вы можете просто удалить следующий код:

    <Setter Property="Shell.BackgroundColor" 
            Value="#455A64" />
    <Setter Property="Shell.ForegroundColor" 
            Value="White" />

Таким образом, BaseStyle выглядит так:

      <Style x:Key="BaseStyle" 
           TargetType="Element">
        <Setter Property="Shell.TitleColor" 
                Value="Red" />
        <Setter Property="Shell.DisabledColor" 
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor" 
                Value="Green" />
       <Setter Property="Shell.TabBarBackgroundColor"
        Value="#3498DB" />
       <Setter Property="Shell.TabBarTitleColor"
              Value="White" />
       <Setter Property="Shell.TabBarUnselectedColor"
              Value="#90EE90" />
     </Style>