0

アプリケーションに次のシェル フライアウト メニューがあります。

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

次のようにレンダリングされます。

スクリーンショット

各構成ページの下部に表示される 2 つのメニュー オプションのスタイルを変更する方法を見つけようとしています。

アップデート

以下のコメントに基づいて、下部にあるフライアウト メニュー オプションを次のように表示することができました。

新しいスクリーンショー

この 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 プロパティを調整することです。それを行う方法はありますか?

4

1 に答える 1