MAUI framework Android entry development 05 content template style optimization

1. Optimize the template display style

1.1 Style effect

1.2 Page Code

<?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"
             xmlns:s="clr-namespace:MauiApp1.Models"
             x:Class="MauiApp1.MainPage" Background="LightGray">
    <ContentPage.Resources>
        <Style TargetType="RadioButton" x:Key="NavButtonStyle">
            <Setter Property="WidthRequest" Value="70"/>
            <Setter Property="HeightRequest" Value="90"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="Margin" Value="5,10"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="VerticalOptions" Value="Center"/>
            <Setter Property="HorizontalOptions" Value="Center"/>
            <Setter Property="ControlTemplate">
                <ControlTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="30" />
                        </Grid.RowDefinitions>
                        <Rectangle Fill="Yellow"
                                   Stroke="#8de9ff" StrokeThickness="1"
                                   RadiusX="20" RadiusY="20" WidthRequest="50" HeightRequest="50"
                                   IsVisible="{TemplateBinding IsVisible}"/>
                        <Label Text="{TemplateBinding Value}" FontFamily="Iconfont" FontSize="30"
                               TextColor="{TemplateBinding TextColor}"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"></Label>
                        <Label Text="{TemplateBinding Content}" Grid.Row="1"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               TextColor="White"
                               FontSize="13"></Label>
                    </Grid>
                </ControlTemplate>
            </Setter>
            <Style.Triggers>
                <Trigger TargetType="RadioButton" Property="IsChecked" Value="True">
                    <Setter Property="TextColor" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <!--定义模板-->
        <DataTemplate x:Key="DI1">
            <Grid Margin="0,10,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Label Text="{Binding Header}" VerticalOptions="Center" HorizontalOptions="Start"/>
                <Switch VerticalOptions="Center" HorizontalOptions="End" ThumbColor="#DDD" OnColor="#3673ff"
                        IsToggled="{Binding IsOpen}"/>

                <Grid HeightRequest="40" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <Label Text="&#xe634;" FontFamily="IconFont" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Text="&#xe634;" FontFamily="IconFont" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Slider Grid.Column="1" Value="{Binding Value1}" Minimum="0" Maximum="1" VerticalOptions="Center"
                    ThumbColor="#DDD" MinimumTrackColor="Orange"/>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="DI2">
            <Grid Margin="0,15,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Label Text="{Binding Header}" VerticalOptions="Center" HorizontalOptions="Start"/>

                <Button VerticalOptions="Center" HorizontalOptions="End" HeightRequest="28" WidthRequest="65" CornerRadius="14"
                    Text="&#xeabd;  编辑" FontFamily="IconFont" BorderWidth="0" Padding="0" FontSize="12"
                    Command="{Binding EditCommand}" Margin="0,10" StyleClass="test">
                    <Button.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#62c8f9" Offset="0"/>
                            <GradientStop Color="#4477f7" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
                <Grid HeightRequest="40" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <Label Text="&#xe634;" FontFamily="IconFont" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Text="&#xe634;" FontFamily="IconFont" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Slider Grid.Column="1" Value="{Binding Value1}" Minimum="0" Maximum="1" VerticalOptions="Center"
                    ThumbColor="#DDD" MinimumTrackColor="Orange"/>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="DI3">
            <Grid Margin="0,15,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Label Text="{Binding Header}" VerticalOptions="Center" HorizontalOptions="Start" Margin="0,10"/>

                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="40"/>
                    </Grid.RowDefinitions>
                    <Label Text="冷" FontFamily="IconFont" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Text="暖" FontFamily="IconFont" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Slider Grid.Column="1" Value="{Binding Value1}" Minimum="0" Maximum="1" VerticalOptions="Center"
                    ThumbColor="#DDD" MinimumTrackColor="Orange"/>

                    <Label Grid.Row="1" Text="&#xe634;" FontFamily="IconFont" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Grid.Row="1" Text="&#xe634;" FontFamily="IconFont" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Slider Grid.Row="1" Grid.Column="1" Value="{Binding Value2}" Minimum="0" Maximum="1" VerticalOptions="Center"
                    ThumbColor="#DDD" MinimumTrackColor="Orange"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    <Grid Margin="0,30,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="120"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid Margin="10">
            <Label Text="&#xe601;" FontFamily="Iconfont" VerticalOptions="Center" TextColor="White"/>
            <HorizontalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="一楼客厅" TextColor="White"/>
                <Label Text="&#xe601;" FontFamily="Iconfont" TextColor="White" VerticalOptions="Center" FontSize="10"/>
            </HorizontalStackLayout>
        </Grid>
        <ScrollView  HorizontalScrollBarVisibility="Never" Grid.Row="1">
            <CollectionView ItemsSource="{Binding NavList}" >
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Horizontal"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <RadioButton Content="{Binding Text}" Value="{Binding Icon}" Style="{StaticResource NavButtonStyle}"></RadioButton>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>
        <CollectionView Grid.Row="2" ItemsSource="{Binding LighConrrols}">
            <CollectionView.ItemTemplate>
                <s:LightItemTemplateSelector DI1="{StaticResource DI1}" DI2="{StaticResource DI2}" DI3="{StaticResource DI3}" />
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

 From: The first introduction of .NET MAUI framework on the whole network has been completed, with enterprise-level WPF actual combat (C#/blazor/xamarin/parking lot project + general framework + data acquisition and monitoring / database) B0858_哔哩哔哩_bilibili