该登录页面参考自油管上Xamarin教学视频
原视频链接 https://youtu.be/mJE3KCttm3Q
一.效果展示
1.静态图
2.动态图
??表示段落缩进
二.工程结构
三.代码展示
MainPage.xaml代码：
<?xml version="1.0" encoding="utf-8" ?>
<!--ContentPage内容页面类是用于显示单个视图的页面-->
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Login"
xmlns:ct="http://xamarin.com/schemas/2020/toolkit"
x:Class="Login.MainPage">
<!--下面这三行代码的意思是将该ContentPage页面的内容与MainViewModel类进行绑定-->
<!--ContentPage.BindingContext是绑定该ContentPage页面的内容-->
<ContentPage.BindingContext>
<vm:MainViewModel/>
</ContentPage.BindingContext>
<Grid>
<!--播放主页视频-->
<!--MediaElement是表示包含音频和/或视频的控件-->
<!--ShowsPlaybackControls表示设置是否显示媒体播放组件-->
<!--IsLooping表示是否设置视频是否循环播放-->
<!--Aspect表示设置图像的显示方式，Aspect="AspectFill"表示设置图像的显示方式：缩放图像以填充视图-->
<!--AutoPlay表示设置视频是否自动播放-->
<!--HorizontalOptions表示定义如何对元素进行水平布局-->
<!--VerticalOptions表示定义如何对元素进行水平布局-->
<ct:MediaElement x:Name="bgVideo" Source="ms-appx:///event.mp4" ShowsPlaybackControls="False"
IsLooping="True" Aspect="AspectFill" AutoPlay="True"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<!--设置图像下部分的透明度-->
<!--BoxView类是用于绘制纯色矩形的视图-->
<!--BoxView.Background表示设置背景-->
<!--LinearGradientBrush类是线性渐变画笔类-->
<!--StartPoint表示设置线性渐变的二维起始坐标-->
<!--EndPoint表示设置线性渐变的二维结束坐标-->
<!--GradientStop表示描述渐变中过渡点的位置和颜色-->
<!--Offset表示获取渐变停止点在渐变向量中的位置-->
<BoxView>
<BoxView.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#2E4159" Offset="0.9"/>
<GradientStop Color="#2E4159" Offset="1"/>
</LinearGradientBrush>
</BoxView.Background>
</BoxView>
<!--设置主界面的那几个显示文字的对话框-->
<!-- RowDefinitions="Auto,Auto,Auto"表示设置3行（因为有3个auto）,这三行的宽度都是auto类型即自适应控件宽度-->
<!--HeightRequest表示设置此元素的所需高度替代-->
<!--Margin表示设置该控件距离屏幕边缘-->
<!--RowSpacing表示设置网格中行之间的剩余空间量-->
<!--CarouselView类用于设置滚动视图-->
<!--IndicatorView是指标视图类-->
<!--IndicatorView表示设置主界面那几个页面导航的小按钮样式-->
<Grid RowDefinitions="Auto,Auto,Auto" HeightRequest="280" Margin="30,30,30,100" RowSpacing="40" VerticalOptions="End">
<CarouselView x:Name="cvOnboarding" IndicatorView="LandingIndicator" ItemsSource="{Binding Onboardings}" VerticalOptions="End">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="10">
<Label Text="{Binding Heading}" TextColor="White" FontSize="26" FontAttributes="Bold" WidthRequest="220" HorizontalOptions="Start"/>
<Label Text="{Binding Caption}" TextColor="White" FontSize="14" WidthRequest="220" HorizontalOptions="Start"/>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="LandingIndicator" Grid.Row="1" IndicatorsShape="Circle" IndicatorColor="#B8B8B8" SelectedIndicatorColor="#E7305E"/>
<!--设置Sign Up和Login in两个按钮-->
<StackLayout Grid.Row="2" Orientation="Horizontal" Spacing="20" VerticalOptions="End" >
<Button Text="Sign Up" Command="{Binding RegisterCommand}" HeightRequest="50" WidthRequest="145" BackgroundColor="#E7305E" TextColor="White" CornerRadius="25" FontAttributes="Bold"/>
<Button Text="Login in" Command="{Binding SignCommand}" HeightRequest="50" WidthRequest="145" BackgroundColor="White" TextColor="#2E4159" CornerRadius="25" FontAttributes="Bold"/>
</StackLayout>
</Grid>
</Grid>
</ContentPage>
MainPage.xaml.cs代码：
```csharp
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
using Xamarin.CommunityToolkit.UI.Views;
using Xamarin.Forms;
namespace Login
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
AnimateCarousel();
}
Timer timer;
private void AnimateCarousel()//页面控制，实现主界面那三个小视图轮番播放
{
//timer=new Timer(5000)表示设置一个定时器，间隔为5秒钟
//AutoReset = true表示该计时器在计数完5秒间隔之后，便会自动重置为0；AutoReset是计时器的自动重置属性，AutoReset设置一个布尔值，指示Timer是应该只引发一次 ( ) 还是重复 ( ) 引发Elapsed事件
//Enabled = true表示启用该定时器；若将Enabled设置为false,就会禁用该定时器
timer = new Timer(5000) { AutoReset = true ,Enabled=true};
//timer.Elapsed后边是一个委托，表示在5秒间隔达到后时执行该Elapsed函数
timer.Elapsed += (s, e) =>
{
if (bgVideo.CurrentState != MediaElementState.Playing)
{
bgVideo.Play();
}
//Device.BeginInvokeOnMainThread函数表示在设备主 (UI) 线程上调用操作
Device.BeginInvokeOnMainThread(() =>
{
if (cvOnboarding.Position == 2)
{
cvOnboarding.Position = 0;
return;
}
cvOnboarding.Position += 1;
});
};
}
}
}
MainViewModel.cs代码：
using System;
using System.Collections.Generic;
using System.Text;
namespace Login
{
public class MainViewModel
{
public MainViewModel()
{
Onboardings = GetOnboarding();
}
public List<Onboarding> Onboardings { get; set; }//Onboardings属性
private List<Onboarding> GetOnboarding()
{
return new List<Onboarding>()
{
new Onboarding { Heading ="Create events in minutes",Caption="From small birthday parties with friends to large community events"},
new Onboarding { Heading = "Your events in one place", Caption = "Manage all your events in one single place to always get a remionder" },
new Onboarding { Heading = "Explore events around you", Caption = "Select any evnet that interest you from a list of awesome events" }
};
}
}
public class Onboarding
{
public string Heading { get; set; }
public string Caption { get; set; }
}
}
APP.xaml代码：
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Login.App">
<Application.Resources>
</Application.Resources>
</Application>
APP.xaml.cs代码：
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Login
{
public partial class App : Application
{
public App()
{
InitializeComponent();
Device.SetFlags(new [] { "MediaElement_Experimental", "Brush_Experimental" });
MainPage = new MainPage();
}
protected override void OnStart()
{
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
