如何将样式应用于.Net Maui 中的特定项目？

Question

问题：

不是所有的弹出菜单都需要应用样式，只有特定的 flyout.Please 帮帮我需要为所有弹出菜单应用样式，只为某个 flyout.Please 帮助我 *

截图：

需要为第一个应用样式，而不是为所有应用样式

代码：

<Shell
    
    x:Class="RakeshProj.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:RakeshProj"
    FlyoutBackgroundColor="Gray">
    <!--<Shell.FlyoutHeader>
        <Grid>
            <Image Source="dotnet_bot.png"
          HeightRequest="142"
          VerticalOptions="Center"
          WidthRequest="230"
          HorizontalOptions="Center" />
        </Grid>
    </Shell.FlyoutHeader>-->
    <Shell.Resources>
        <Style TargetType="Label"
       Class="FlyoutItemLabelStyle">
            <Setter Property="TextColor" 
            Value="White" />
        </Style>
    </Shell.Resources>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"  >

        <ShellContent Title="Settings"
                      Icon="gear_solid.svg"
                      x:Name="ShellContent1_1"
                      ContentTemplate="{DataTemplate local:MainPage}" 
                      />

        <ShellContent Title="Remove Ads"
                      Icon="unlock_solid.svg"
                      x:Name="ShellContent2_1"
                      ContentTemplate="{DataTemplate local:MainPage}" />
        <ShellContent Title="Usage tips"
                      Icon="circle_question_solid.svg"
                      x:Name="ShellContent3_1"
                      ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>..................

Answer 1

大多数 Maui 问题都可以通过查找 Xamarin.Forms 文档或教程来回答。

在这种情况下，Intro to XF Style, section Create a Style请参阅此代码段：

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

用这个 xaml 来使用它：

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

说明：x:Key="..." 提供了一种仅在需要它的项目上引用样式的方法。带有 x:Key 的样式只会影响通过 Style="{StaticResource ...}".

明确提及它的项目

更新

有一个相关的 Maui 文档：Style apps using XAML。

我没有花时间找到等效的例子，但上面的代码在毛伊岛可以工作。

Answer 2

Snice ShellContent 没有提供textcolor 属性，我们可以自定义class ShellContent 并添加一个新的 BindableProperty 来表示它的文字颜色应该使用 .

创建一个新的 class 名称 MyShell 继承自 ShellContent ，并创建一个新的 BindableProperty 名称 TextColor .

   public class MyShell : ShellContent
   {
       public static readonly BindableProperty TextColorProperty =
  BindableProperty.Create("TextColor", typeof(Color), typeof(MyShell), null);


       public Color TextColor
       {
           get { return (Color)GetValue(TextColorProperty); }
           set { SetValue(TextColorProperty, value); }
       }
   }

使用 MyShell 代替 xaml 中的 ShellContent 并在 TextColor 属性.[=32= 上赋值]

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"  >
        <local:MyShell
            TextColor="Red"           
            FlyoutIcon="dotnet_bot.svg"
            Title="11111"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
        
        <local:MyShell
            TextColor="Blue"
            FlyoutIcon="dotnet_bot.svg"          
            Title="22222"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />

        <local:MyShell
            TextColor="Green"
            FlyoutIcon="dotnet_bot.svg"           
            Title="22222"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
    </FlyoutItem>

定义 Shell.ItemTemplate 并自定义 Label(TextColor)。

   <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       TextColor="{Binding TextColor}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

如何将样式应用于.Net Maui 中的特定项目？

How to apply style to the certain item in .Net Maui?

.net

c#

asp.net

xaml

maui

问题：

截图：

代码：