【愚公系列】2022年12月 MAUI在线课堂项目-首页页面设计
【摘要】 前言.NET MAUI是日益流行的Xamarin.Forms工具箱的演变，该工具箱本月已经有6年历史了。多年来， UPS，Ernst＆Young和Delta等公司一直在利用.NET上Xamarin的移动专业知识来推动其业务发展。从一开始就有些。它在帮助小型企业最大化其95％以上代码共享的开发投资并击败竞争对手进入市场方面也非常成功。.NET MAUI将这一成功扩展到了移动设备上，从而囊括了...
前言
.NET MAUI是日益流行的Xamarin.Forms工具箱的演变，该工具箱本月已经有6年历史了。多年来， UPS，Ernst＆Young和Delta等公司一直在利用.NET上Xamarin的移动专业知识来推动其业务发展。从一开始就有些。它在帮助小型企业最大化其95％以上代码共享的开发投资并击败竞争对手进入市场方面也非常成功。.NET MAUI将这一成功扩展到了移动设备上，从而囊括了桌面设备，这是在两者之间构建多平台应用程序的最佳方法，尤其是我们的新设备（例如新的Surface Duo）。
.NET MAUI简化了.NET开发人员的选择，提供了一个单一堆栈来支持所有现代工作负载：Android，iOS，macOS和Windows。每个平台和UI控件的本机功能都可以通过一个简单的跨平台API触手可及，您可以在提供不妥协的用户体验的同时共享比以前更多的代码。
一、首页页面设计
HomeView.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YG.MauiLesson.Views.HomeView">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="23"/>
<RowDefinition Height="23"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="200"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2" Background="#4f51c0" Margin="0"/>
<!--头-->
<Grid VerticalOptions="Center" Margin="15,0" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Label
Text="晚上好, 愚公!"
FontSize="18"
TextColor="White" FontAttributes="Bold" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label Text="博学不穷，笃行不倦！今天你想学点什么?" TextColor="#99FFFFFF" FontSize="13"
Grid.Row="1"/>
<Label Text="" FontFamily="IconFont" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center"
TextColor="White" FontSize="18"/>
</Grid>
<!--搜索-->
<Grid Grid.Row="1" Grid.RowSpan="2" Margin="15,0">
<Frame CornerRadius="10" BorderColor="#DDD" Margin="0,1"/>
<!--TextBox-->
<Entry BackgroundColor="Transparent" Placeholder="搜索你喜欢的课程" Margin="30,1,10,1"
VerticalOptions="Center"/>
<Label Text="" FontFamily="IconFont" VerticalOptions="Center" HorizontalOptions="Start" Margin="10,0"
FontSize="14"/>
</Grid>
<!--旋转木马-->
<CarouselView Grid.Row="3" ItemsSource="{Binding CarouselItems}" PeekAreaInsets="5" Margin="0">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Frame BorderColor="Transparent" BackgroundColor="#4f51c0"
CornerRadius="5" HeightRequest="80" Margin="10,0" Padding="0">
<VerticalStackLayout VerticalOptions="Center" Margin="10,0,50,0">
<Label Text="{Binding Title}" FontAttributes="Bold" TextColor="White"
FontSize="12" HorizontalOptions="Start" VerticalOptions="Center" Margin="0,5"/>
<Label Text="{Binding Description}" TextColor="#99FFFFFF" HorizontalOptions="Start"
FontSize="10"/>
</VerticalStackLayout>
</Frame>
<Ellipse Stroke="#66FFFFFF" StrokeThickness="8" WidthRequest="70" HeightRequest="70"
HorizontalOptions="End" VerticalOptions="End" Margin="0,0,-20,-15"/>
<Ellipse Stroke="#33FFFFFF" StrokeThickness="8" WidthRequest="60" HeightRequest="60"
HorizontalOptions="End" VerticalOptions="Start" Margin="0,-20,-20,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<!--正在直播-->
<Grid Grid.Row="4" Margin="15,0">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="正在直播" VerticalOptions="Center"/>
<ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Never" Grid.Row="1">
<!--附加属性-->
<!--CollectionView ListView-->
<HorizontalStackLayout BindableLayout.ItemsSource="{Binding Teachers}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HeightRequest="70" WidthRequest="60">
<Frame HeightRequest="50" WidthRequest="50" CornerRadius="25" BorderColor="PaleVioletRed">
<Frame BackgroundColor="White" BorderColor="Transparent" WidthRequest="50"
HeightRequest="50" CornerRadius="25" Padding="0" Margin="2">
<Image Source="{Binding Avatar}" />
</Frame>
</Frame>
<Label Text="{Binding Name}" Background="PaleVioletRed" TextColor="White" FontSize="11"
HorizontalTextAlignment="Center" VerticalOptions="End" WidthRequest="40"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
</ScrollView>
</Grid>
<!--课程分类-->
<Grid Grid.Row="5" Margin="15,0">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="课程分类" VerticalOptions="Center"/>
<!--FlexLayout-->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Frame Background="#4f51c0" WidthRequest="55" HeightRequest="53" Padding="12"
HorizontalOptions="Center">
<Image Source="Images/dotnet_bot.svg" />
</Frame>
<Label Text=".NET" HorizontalOptions="Center"/>
</VerticalStackLayout>
</Grid>
</Grid>
<!--课程推荐-->
<Grid Grid.Row="6" Margin="15,0">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="课程推荐" VerticalOptions="Center"/>
<CollectionView ItemsSource="{Binding Courses}" Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid HeightRequest="70">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Frame Padding="0" WidthRequest="50" HeightRequest="50">
<Image Source="{Binding Cover}" HeightRequest="50" WidthRequest="50"/>
</Frame>
<VerticalStackLayout Grid.Column="1">
<Label Text="{Binding Classify}" TextColor="#888" Margin="10,0"/>
<Label Text="{Binding Name}" Margin="0,3"/>
<Grid Margin="10,0">
<HorizontalStackLayout>
<Label Text="{Binding StudyCount}" FontSize="10"></Label>
<Label Text="人正在学习" FontSize="10" TextColor="#888"></Label>
</HorizontalStackLayout>
<HorizontalStackLayout HorizontalOptions="End">
<Label Text="{Binding Favorite}" FontSize="10"/>
<Label Text="收藏" FontSize="10" TextColor="#888"/>
</HorizontalStackLayout>
</Grid>
</VerticalStackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</Grid>
</ScrollView>
</ContentView>
HomeView.xaml.cs
using YG.MauiLesson.ViewModels;
namespace YG.MauiLesson.Views;
public partial class HomeView : ContentView
{
public HomeView()
{
InitializeComponent();
this.BindingContext = new HomeViewModel();
}
}
HomeViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using YG.MauiLesson.Models;
namespace YG.MauiLesson.ViewModels
{
internal class HomeViewModel
{
public List<CarouselItemModel> CarouselItems { get; set; } = new List<CarouselItemModel>();
public List<TeacherItemModel> Teachers { get; set; } = new List<TeacherItemModel>();
public List<CourseItemModel> Courses { get; set; } = new List<CourseItemModel>();
public HomeViewModel()
{
for (int i = 0; i < 5; i++)
{
CarouselItems.Add(new CarouselItemModel()
{
Title = "XXXXXX课程",
Description = "拓展技术视野，加强技术深度，蜕变架构师"
});
}
for (int i = 0; i < 10; i++)
{
Teachers.Add(new TeacherItemModel()
{
Avatar = "Images/eleven.jpg",
Name = "愚公"
});
}
for (int i = 0; i < 20; i++)
{
Courses.Add(new CourseItemModel
{
Cover = "https://www.zhaoxiedu.net/file/11/dbc91389-5c84-40af-97dd-686279b0723c.jpg",
Name = "训练营VIP班",
Classify = ".NET",
StudyCount = 6212,
Favorite = 1204
});
}
}
}
}
二、效果
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）