设计
我准备用 .NET Maui 实现一个非常有意思的 "前往太空" 的程序。第一步，需要图片素材，我使用了 Aan Ragil 的一组非常棒的 Dribbble 素材图片。
当然，你也可以在最下面的链接进行下载。
实现
这个应用程序的完整源代码可以在 Github 上访问并下载。我们总共需要做三个页面。
初始化项目
我创建了一个空的 .NET Maui 程序。然后，我禁用了每个页面上的导航栏，然后设置了背景颜色，主要是修改了 App.xaml 文件。
代码语言：javascript复制<!-- 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 事件让状态栏变为半透明。
代码语言：javascript复制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 ANDROID
events.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 属性。
代码语言：javascript复制<ContentPage>
<Grid IgnoreSafeArea="{OnPlatform Android=False, iOS=True}">
</Grid>
</ContentPage>为了简单起见，我没有使用 MVVM 模式，而是普通的 Maui UI 结构。创建了一个 **Planet **类来保存有关行星的信息，并创建了一个 PlanetService 服务。
初始页
接下来是初始页面，我把它分成了两部分。
上部分由每个行星的单独图像组成的。我使用了 HorizontalOptions、VerticalOptions、TranslationX、TranslationY、WidthRequest 和 HeightRequest 控制每个图像的位置和大小。
代码语言：javascript复制<Image
Source="earth.png"
VerticalOptions="Start" HorizontalOptions
="Center"
TranslationX="-48"
TranslationY="148"
WidthRequest="96"
HeightRequest="96"/>下部分，我没有使用 Frame 控件，而是使用了更轻量的 Border 控件。
代码语言：javascript复制<Border
Padding="24,32"
BackgroundColor="{StaticResource FrameBackgroundColor}"
Stroke="{StaticResource BorderColor}"
HorizontalOptions="Fill"
VerticalOptions="End"
Margin="20">
<Border.StrokeShape>
<RoundRectangle CornerRadius="24"/>
</Border.StrokeShape>
<VerticalStackLayout
Spacing="16">
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Style="{StaticResource IntroPageHeaderStyle}"
Text="Hello!"/>
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Style="{StaticResource IntroPageTextStyle}"
Text="Want to know and explain all things about the planets in the Milky Way galaxy?"/>
<Button
Style="{StaticResource ButtonStyle}"
Text="Explore Now"
HorizontalOptions="Center"
Margin="0,12,0,6"
Clicked="ExploreNow_Clicked"/>
</VerticalStackLayout>
</Border>看一下第一个页面的效果。
看起来还不错吧！我们还可以设置淡入的效果，加一些动画。
代码语言：javascript复制 protected override async void OnAppearing()
{
base.OnAppearing();
if (this.AnimationIsRunning("TransitionAnimation"))
return;
var parentAnimation = new Animation();
//Planets Animation
parentAnimation.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 Animation
parentAnimation.Add(0.7, 1, new Animation(v => frmIntro.Opacity = v, 0, 1, Easing.CubicIn));
//Commit the animation
parentAnimation.Commit(this, "TransitionAnimation", 16, 3000, null, null);
}差不多完成了，我们看一下在手机上最后的效果，非常酷！
你可以在下面的地址找到它的源代码和素材信息。
https://github.com/naweed/MauiPlanets
https://dribbble.com/shots/15592060-Planet-Mobile-App
