? 設計??

我準備用 .NET Maui 實現一個非常有意思的 "前往太空" 的程序。第一步，需要圖片素材，我使用了 Aan Ragil 的一組非常棒的 Dribbble 素材圖片。

當然，你也可以在最下面的鏈接進行下載。

? 實現??

這個應用程序的完整源代碼可以在 Github 上訪問并下載。我們總共需要做三個頁面。

? 初始化項目??

我創建了一個空的 .NET Maui 程序。然后，我禁用了每個頁面上的導航欄，然后設置了背景顏色，主要是修改了 App.xaml 文件。

<!--?Content?Page?Style?-->
<Style?TargetType="ContentPage"?ApplyToDerivedTypes="True"><Setter?Property="NavigationPage.HasNavigationBar"?Value="False"?/><Setter?Property="BackgroundColor"?Value="{StaticResource?PageBackgroundColor}"?/><Setter?Property="Padding"?Value="0"/>
</Style><!--?Navigation?Page?-->
<Style?TargetType="NavigationPage"?ApplyToDerivedTypes="True"><Setter?Property="BackgroundColor"?Value="{StaticResource?PageBackgroundColor}"?/>
</Style>

對于安卓設備， 使用 Android LifeCycle 事件讓狀態欄變為半透明。

builder.UseMauiApp<App>().ConfigureFonts(fonts?=>{fonts.AddFont("Montserrat-Medium.ttf",?"RegularFont");fonts.AddFont("Montserrat-SemiBold.ttf",?"MediumFont");fonts.AddFont("Montserrat-Bold.ttf",?"BoldFont");}).ConfigureLifecycleEvents(events?=>{
#if?ANDROIDevents.AddAndroid(android?=>?android.OnCreate((activity,?bundle)?=>?MakeStatusBarTranslucent(activity)));static?void?MakeStatusBarTranslucent(Android.App.Activity?activity){activity.Window.SetFlags(Android.Views.WindowManagerFlags.LayoutNoLimits,?Android.Views.WindowManagerFlags.LayoutNoLimits);activity.Window.ClearFlags(Android.Views.WindowManagerFlags.TranslucentStatus);activity.Window.SetStatusBarColor(Android.Graphics.Color.Transparent);}
#endif});

為了讓視圖覆蓋底部，每個頁面使用了 IgnoreSafeArea 屬性。

<ContentPage>?<Grid?IgnoreSafeArea="{OnPlatform?Android=False,?iOS=True}">?</Grid>?
</ContentPage>

為了簡單起見，我沒有使用 MVVM 模式，而是普通的 Maui UI 結構。創建了一個 **Planet **類來保存有關行星的信息，并創建了一個?PlanetService?服務。

初始頁

接下來是初始頁面，我把它分成了兩部分。

上部分由每個行星的單獨圖像組成的。我使用了 HorizontalOptions、VerticalOptions、TranslationX、TranslationY、WidthRequest 和 HeightRequest 控制每個圖像的位置和大小。

<Image?Source="earth.png"?VerticalOptions="Start"?HorizontalOptions?="Center"?TranslationX="-48"?TranslationY="148"?WidthRequest="96"?HeightRequest="96"/>

下部分，我沒有使用 Frame 控件，而是使用了更輕量的 Border 控件。

<Border
Padding="24,32"
BackgroundColor="{StaticResource?FrameBackgroundColor}"
Stroke="{StaticResource?BorderColor}"
HorizontalOptions="Fill"
VerticalOptions="End"
Margin="20">
<Border.StrokeShape><RoundRectangle?CornerRadius="24"/>
</Border.StrokeShape><VerticalStackLayoutSpacing="16"><LabelHorizontalOptions="Center"HorizontalTextAlignment="Center"Style="{StaticResource?IntroPageHeaderStyle}"Text="Hello!"/><LabelHorizontalOptions="Center"HorizontalTextAlignment="Center"LineBreakMode="WordWrap"Style="{StaticResource?IntroPageTextStyle}"Text="Want?to?know?and?explain?all?things?about?the?planets?in?the?Milky?Way?galaxy?"/><ButtonStyle="{StaticResource?ButtonStyle}"Text="Explore?Now"HorizontalOptions="Center"Margin="0,12,0,6"Clicked="ExploreNow_Clicked"/></VerticalStackLayout></Border>

看一下第一個頁面的效果。

看起來還不錯吧！我們還可以設置淡入的效果，加一些動畫。

protected?override?async?void?OnAppearing(){base.OnAppearing();if?(this.AnimationIsRunning("TransitionAnimation"))return;var?parentAnimation?=?new?Animation();//Planets?AnimationparentAnimation.Add(0,?0.2,?new?Animation(v?=>?imgMercury.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.1,?0.3,?new?Animation(v?=>?imgVenus.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.2,?0.4,?new?Animation(v?=>?imgEarth.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.3,?0.5,?new?Animation(v?=>?imgMars.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.4,?0.6,?new?Animation(v?=>?imgJupiter.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.5,?0.7,?new?Animation(v?=>?imgSaturn.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.6,?0.8,?new?Animation(v?=>?imgNeptune.Opacity?=?v,?0,?1,?Easing.CubicIn));parentAnimation.Add(0.7,?0.9,?new?Animation(v?=>?imgUranus.Opacity?=?v,?0,?1,?Easing.CubicIn));//Intro?Box?AnimationparentAnimation.Add(0.7,?1,?new?Animation(v?=>?frmIntro.Opacity?=?v,?0,?1,?Easing.CubicIn));//Commit?the?animationparentAnimation.Commit(this,?"TransitionAnimation",?16,?3000,?null,?null);}

差不多完成了，我們看一下在手機上最后的效果，非常酷！

你可以在下面的地址找到它的源代碼和素材信息。

https://github.com/naweed/MauiPlanets

https://dribbble.com/shots/15592060-Planet-Mobile-App

END