啟動初始化之 Splash 頁面
目的
學習重點
專案原始碼
專案使用到的圖片
實作方法
建立專案
-
-
-
-
-
-
-
-
-
-
開發前準備工作
建立資料夾
無
複製專案使用的圖片檔案
-
-
-
-
-
專案開發
建立 SplashPage 檢視 (View)
-
-
-
-
SplashPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="XFSplash.Views.SplashPage">
<ContentPage.Padding>
<OnPlatform
x:TypeArguments="Thickness"
iOS="0,20,0,0"
Android="0"
WinPhone="0,0"
/>
</ContentPage.Padding>
<Grid
>
<Image
Aspect="AspectFill"
>
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
iOS="SplashBG.jpg"
Android="SplashBG.jpg"
WinPhone="Assets/SplashBG.jpg"
/>
</Image.Source>
</Image>
<Grid
Margin="20,50,20,30"
>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label
Grid.Row="0" Grid.Column="0"
Text="多奇創意行動應用"
TextColor="White"
FontSize="40"
Opacity="0.3"
HorizontalOptions="Center" VerticalOptions="Center"
/>
<ProgressBar
Grid.Row="1" Grid.Column="0"
Progress="{Binding 處理進度百分比, Mode=TwoWay}"
/>
<Label
Grid.Row="2" Grid.Column="0"
HorizontalOptions="Center" VerticalOptions="Start"
Text="{Binding 處理訊息, Mode=TwoWay}"
TextColor="White"
FontSize="20"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Row="3" Grid.Column="0"
HorizontalOptions="End" VerticalOptions="Start"
Margin="0,0,0,0"
Text="{Binding 版本資訊, Mode=TwoWay}"
TextColor="Yellow"
/>
</Grid>
</Grid>
</ContentPage>
建立 SplashPageViewModel 檢視模型 (ViewModel)
-
-
-
-
SplashPageViewModel.cs
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace XFSplash.ViewModels
{
public class SplashPageViewModel : BindableBase, INavigationAware
{
#region Field
INavigationService _navigationService;
#endregion
#region ViewModel Property
#region 處理訊息
private string _處理訊息 = "系統執行中...";
public string 處理訊息
{
get { return _處理訊息; }
set { SetProperty(ref _處理訊息, value); }
}
#endregion
#region 處理進度百分比
private double _處理進度百分比 = 0;
public double 處理進度百分比
{
get { return _處理進度百分比; }
set { SetProperty(ref _處理進度百分比, value); }
}
#endregion
#region 版本資訊
private string _版本資訊 = "版本:1.2.4";
public string 版本資訊
{
get { return _版本資訊; }
set { SetProperty(ref _版本資訊, value); }
}
#endregion
#endregion
public SplashPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public async void OnNavigatedTo(NavigationParameters parameters)
{
await 系統初始化();
}
private async Task 系統初始化()
{
double fooPer = 0.0;
await Task.Delay(800);
for (int i = 0; i < 101; i++)
{
fooPer = i / 100.0;
處理進度百分比 = fooPer;
if (i < 40)
{
處理訊息 = "讀取本機資源中，請稍後";
await Task.Delay(170);
}
else if (i < 90)
{
處理訊息 = "更新網路上最新資源";
await Task.Delay(30);
}
else
{
處理訊息 = "即將完成";
await Task.Delay(120);
}
}
處理訊息 = "導航到首頁頁面";
await _navigationService.NavigateAsync("MainPage?title=恭喜您，已經完成 Splash 練習");
}
}
}
修改 MainPage.xaml 檢視
-
-
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="XFSplash.Views.MainPage"
Title="MainPage">
<Grid>
<Image
Aspect="AspectFill"
>
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
iOS="MainPageImg.jpg"
Android="MainPageImg.jpg"
WinPhone="Assets/MainPageImg.jpg"
/>
</Image.Source>
</Image>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="{Binding Title}" FontSize="30"
HorizontalTextAlignment="Center"
TextColor="#a64dff"
/>
</StackLayout>
</Grid>
</ContentPage>
修正進入點與註冊檢視
-
-
App.xaml.cs
using Prism.Unity;
using XFSplash.Views;
namespace XFSplash
{
public partial class App : PrismApplication
{
public App(IPlatformInitializer initializer = null) : base(initializer) { }
protected override void OnInitialized()
{
InitializeComponent();
NavigationService.NavigateAsync("SplashPage");
}
protected override void RegisterTypes()
{
Container.RegisterTypeForNavigation<MainPage>();
Container.RegisterTypeForNavigation<SplashPage>();
}
}
}
三個平台的執行結果螢幕截圖
Android
iOS
UWP
此時，請在 UWP 專案上，使用滑鼠右擊，選擇 
現在，您會看到下方對話窗，原來現在這台電腦上缺少了 
現在，請參考底下對話窗，開始安裝這個SDK，就可以開啟這個專案了。
(無法使用)的文字。