MAUI 框架入门学习04 如何统一处理控件样式

1.如何统一处理某类控件的样式

1.1例如,当n多个Label 控件，希望它的宽度或者高度显示成一至时，通常的方法是单独给每个控件设置自己的属性。这样固然可行，但代码量多且不容易维护。

1.2 所以我们可以通过MAUI 框架提供的处理机制，来统一处理控件的样式。它就是通过同一样式进行标记。类似css样式统一处理的方式。

 1.2.1 第一步，设置资源标签。首先这个资源标签的意思就是说，当前的页面最外层是一个ContentPage 对象，那么我们需要给当前的页面设置统一样式时，就需要通过当前页面ContentPage对像资源来定义样式。

 1.2.2 第二步，在这个Resources （资源）属性中，通过Style 标签来设置样式

• Style 中有一个TargetType属性，设置它的意思就是，当前这个页面要统一控制的样式是针对那一类控件。

 1.2.3 第三步，通过 Setter 标签来设置控件的样式。

• Property 设置控件属性，就是我们要设置控件的高还是宽 
• Value 就是设置具体宽高的值

 1.3 这样就实现了把共同的属性抽离出来，通过统一样式对象进行处理。

样式未抽离前

样式抽离后

 2. 统一处理控件样式的模板

上面只是介绍处理当前页面的样式，那如果是多个页面也需要统一进行样式处理的话。就涉及到样式模板的概念了。也就是把统一的样式做成一个模板，供多个页面进行使用。 

2.1 例如，把控件设置成一个正方形，并且所有的页面都能使用到该样式模板。

能自定义模板使用的控件，该控件要具备一个ControlTemplate 属性。这个属性就是这个控件的模板。

2.1.1 例如，下面这个是当前RadioButton 控件的默认样式 ，我们想把这个样式模板改了，搞成一个另外一种样式模板。当然了不管它的样式模板如何改变，它最终还是RadioButton，只是显示的模板样式不一样而已。

 2.1.2 第一步，要明确，是需要通过修改ControlTemplate 属性才能达到目的。

• ControlTemplate 是接收一个对象的，不能传字符串进去。
• 由于需要在RadioButton 内部进行处理，所以需要写一个完整的闭合标签。并且它的写法同文章开头的写法一样，在当前对象内部是通过当前的对象.出来属性。

2.1.3 然后在ControlTemplate 模板对象中，就可以自由定义 RadioButton 模板样式了。例如设置成一个矩形

• Rectangle 设置成矩形
• Fill 矩形填充的颜色
• WidthRequest 宽度
• HeightRequest 高度
• 如果要显示文字，通过Lable 进行控制文字显示，并且当前Lable要获取RadioButton 定义的内容，就要通过TemplateBinding  Content来获取
• 在ControlTemplate 模板对象中，要通设置Grid来程现多个控件，因为Grid可以包含n多个控件。如果不设置Grid，由于ControlTemplate 模板内容中只能放一个控件，会出现报错的现象。
•  显示效果，已经由原来的圈形样式模板，变成了一个矩形的样式模板了
•  如果要调整Label字体显示的位置，是需要通过设置布局属性来达到目的。例如要让字体显示在中间。
•  修改后的效果，就显示在正中间了。但它最终还是一个RadioButton 控件，只不过它的模板样式变了而已。
• 然后就可以把那块定义样式模板的代码抽离出来，为所有的RadioButton 自定义模板使用，之后再讲这块怎么抽成一个模板，如何导入使用。目前只是介绍基础的知识，知道自定义模板是怎么回事。并且按照这样规定来定义模板即可实现效果。

 代码文件 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
    <ContentPage.Resources>
        <Style TargetType="Label">
            <Setter Property="WidthRequest" Value="40"></Setter>
            <Setter Property="HeightRequest" Value="40"></Setter>
        </Style>
    </ContentPage.Resources>
    <Grid>
        <!--定义行-->
        <Grid.RowDefinitions>
            <!--定义具体多少行,行可以指定高度-->
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="40" ></RowDefinition>
            
        </Grid.RowDefinitions>
        <!--定义列-->
        <Grid.ColumnDefinitions>
            <!--定义具体多少列，列可以指定宽度，列不能指定高度,也没有高度-->
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label BackgroundColor="Red" Grid.Row="1" Grid.Column="1"></Label>
        <Label BackgroundColor="BurlyWood" Grid.Row="0" Grid.Column="0"></Label>
        <Label BackgroundColor="YellowGreen" Grid.Row="2" Grid.Column="2"></Label>
        <Label BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0"></Label>
        <RadioButton  Content="学习" Grid.Row="0" Grid.Column="1">
            <RadioButton.ControlTemplate>
                <ControlTemplate>
                    <Grid>
                        <Rectangle Fill="Green" WidthRequest="30" HeightRequest="30"></Rectangle>
                        <Label Text="{TemplateBinding Content}"
                               VerticalTextAlignment="Center" 
                               HorizontalTextAlignment="Center"
                               TextColor="White"></Label>
                    </Grid>
                </ControlTemplate>
            </RadioButton.ControlTemplate>
        </RadioButton>
    </Grid>
 
</ContentPage>