前言

.NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用。
使用 .NET MAUI，可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。

.NET MAUI 是一款开放源代码应用，是 Xamarin.Forms 的进化版，从移动场景扩展到了桌面场景，并从头重新生成了 UI 控件，以提高性能和可扩展性。 如果以前使用过 Xamarin.Forms 来生成跨平台用户界面，那么你会注意到它与 .NET MAUI 有许多相似之处。 但也有一些差异。 通过使用 .NET MAUI，可使用单个项目创建多平台应用，但如果有必要，可以添加特定于平台的源代码和资源。 .NET MAUI 的主要目的之一是使你能够在单个代码库中实现尽可能多的应用逻辑和 UI 布局。

一、问题描述

Maui缺乏UI库，不具有美观性，如何才能自定义设置全局样式，使控件具有统一风格呢。

二、解决方案

我们可以在xaml中设置 Style样式，本文以 button 为例子。

三、软件开发（源码）

3.1 局部样式设置

文件名：MO1001Page.xaml
备注：TargetType控件名，Property为属性名。这里将按钮长宽设置为 60*40，边角椭圆度 6，字体大小Small

    <ContentPage.Resources>
        <Style TargetType="Button">
            <Setter Property="WidthRequest" Value="60" />
            <Setter Property="HeightRequest" Value="40" />
            <Setter Property="CornerRadius" Value="6" />
            <Setter Property="FontSize" Value="Small" />
        </Style>
    </ContentPage.Resources>

按钮的使用

<!--标题栏目-->
<Frame BackgroundColor="{StaticResource Gray100}" CornerRadius="0">
    <StackLayout>
        <Grid ColumnDefinitions="60,*,60">
            <Label Text="条形码" VerticalTextAlignment="Center" TextColor="{StaticResource GycMainText}" FontSize="Small" />
            <Frame BorderColor="Black" CornerRadius="5" Padding="3" Margin="5" Grid.Column="1">
                <Entry HorizontalOptions="FillAndExpand" Placeholder="请输入条码号" Text="{Binding BarCode, Mode=TwoWay}" FontSize="Small" Margin="0,0,0,0"/>
            </Frame>
            <Button Grid.Column="2" Text="确定" BackgroundColor="{StaticResource GycBrand}" Clicked="OnPaperDataClicked" />
        </Grid>
    </StackLayout>
</Frame>

这样按钮就变成了我们预设的样式。

3.2 全局样式设置

刚刚显示的效果，仅限与当前page页面生效。如果要整个项目都生效，我们可以把代码移动到 App.xaml文件中

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!--全局样式-->
            <Style TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor" Value="LightBlue" />
                <Setter Property="BarTextColor" Value="Black" />
            </Style>
            <Style TargetType="Label" x:Key="NavigationTitleStyle">
                <Setter Property="FontAttributes" Value="Bold" />
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="TextColor" Value="Black" />
            </Style>

            <Style TargetType="Button">
                <Setter Property="WidthRequest" Value="60" />
                <Setter Property="HeightRequest" Value="40" />
                <Setter Property="CornerRadius" Value="6" />
                <Setter Property="FontSize" Value="Small" />
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

四、项目展示