通城网站建设,百度推广登陆,做网站发广告,网站数据分析工具设计 我准备用 .NET Maui 实现一个非常有意思的 前往太空 的程序。第一步#xff0c;需要图片素材#xff0c;我使用了 Aan Ragil 的一组非常棒的 Dribbble 素材图片。当然#xff0c;你也可以在最下面的链接进行下载。实现 这个应用程序的完整源代码可以在 G… 设计 我准备用 .NET Maui 实现一个非常有意思的 前往太空 的程序。第一步需要图片素材我使用了 Aan Ragil 的一组非常棒的 Dribbble 素材图片。当然你也可以在最下面的链接进行下载。 实现 这个应用程序的完整源代码可以在 Github 上访问并下载。我们总共需要做三个页面。 初始化项目 我创建了一个空的 .NET Maui 程序。然后我禁用了每个页面上的导航栏然后设置了背景颜色主要是修改了 App.xaml 文件。!-- Content Page Style --
Style TargetTypeContentPage ApplyToDerivedTypesTrueSetter PropertyNavigationPage.HasNavigationBar ValueFalse /Setter PropertyBackgroundColor Value{StaticResource PageBackgroundColor} /Setter PropertyPadding Value0/
/Style!-- Navigation Page --
Style TargetTypeNavigationPage ApplyToDerivedTypesTrueSetter PropertyBackgroundColor Value{StaticResource PageBackgroundColor} /
/Style对于安卓设备 使用 Android LifeCycle 事件让状态栏变为半透明。builder.UseMauiAppApp().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 AndroidFalse, iOSTrue} /Grid
/ContentPage为了简单起见我没有使用 MVVM 模式而是普通的 Maui UI 结构。创建了一个 **Planet **类来保存有关行星的信息并创建了一个 PlanetService 服务。初始页接下来是初始页面我把它分成了两部分。上部分由每个行星的单独图像组成的。我使用了 HorizontalOptions、VerticalOptions、TranslationX、TranslationY、WidthRequest 和 HeightRequest 控制每个图像的位置和大小。Image Sourceearth.png VerticalOptionsStart HorizontalOptions Center TranslationX-48 TranslationY148 WidthRequest96 HeightRequest96/下部分我没有使用 Frame 控件而是使用了更轻量的 Border 控件。Border
Padding24,32
BackgroundColor{StaticResource FrameBackgroundColor}
Stroke{StaticResource BorderColor}
HorizontalOptionsFill
VerticalOptionsEnd
Margin20
Border.StrokeShapeRoundRectangle CornerRadius24/
/Border.StrokeShapeVerticalStackLayoutSpacing16LabelHorizontalOptionsCenterHorizontalTextAlignmentCenterStyle{StaticResource IntroPageHeaderStyle}TextHello!/LabelHorizontalOptionsCenterHorizontalTextAlignmentCenterLineBreakModeWordWrapStyle{StaticResource IntroPageTextStyle}TextWant to know and explain all things about the planets in the Milky Way galaxy?/ButtonStyle{StaticResource ButtonStyle}TextExplore NowHorizontalOptionsCenterMargin0,12,0,6ClickedExploreNow_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/MauiPlanetshttps://dribbble.com/shots/15592060-Planet-Mobile-AppEND
