Application Crypto Tracker avec les contrôles Telerik .NET MAUI

Bienvenue dans l'application de démonstration Telerik Crypto Tracker : un exemple d'application de chiffrement de cas d'utilisation réel qui suit le marché de la crypto-monnaie, construit avec les dernières technologies .NET et les contrôles de l'interface utilisateur.

.NET MAUI et Telerik UI pour .NET MAUI sont activement en cours de développement et nous savons que beaucoup d'entre vous sont déjà curieux de savoir comment créer une application multiplateforme et comment cette application fonctionnera sur iOS, Android, Windows et macOS. 👌

Les crypto-monnaies sont l'une des plus grandes tendances de nos jours, et c'est pourquoi nous avons décidé de créer une application qui illustre un scénario réel pour visualiser les fluctuations des prix des crypto-monnaies. L'application que vous êtes sur le point de voir est entièrement construite avec Telerik UI pour les contrôles .NET MAUI. Allons faire un tour !

Dans cette série d'articles de blog consacrée à l'interface utilisateur Telerik pour l'application .NET MAUI Crypto Trackernous vous guiderons tout au long du développement Dans cette première partie, nous décrirons les défis auxquels nous avons été confrontés pour obtenir une apparence conviviale pour les mobiles et les ordinateurs de bureau, et examinerons la structure de l'application.

Vous pouvez explorer directement le code source de l'application Crypto Tracker dans GitHub.

Avant de commencer avec CryptoTracker.sln, assurez-vous que tout est configuré pour .NET MAUI et que l'interface utilisateur Telerik pour .NET MAUI est téléchargée et installée. sur votre machine (les commandes sont actuellement en préversion et vous pouvez les expérimenter).

Idée principale

Lorsque j'ai commencé à développer cette toute nouvelle application .NET MAUI, j'avais une idée précise de son apparence En raison de la volatilité du marché de la cryptographie, le terface vous présente une collection de diverses crypto-monnaies, et en appuyant sur l'une d'entre elles, un graphique présentant leur historique de prix et leurs tendances apparaît. De plus, un contrôle de type grille charge les données en lignes et en colonnes.

Et ici, vous pouvez voir l'interface utilisateur Telerik pour les contrôles .NET MAUI en action 🧐—pour la gestion des données, le ListView et DataGrid contrôle, et pour la visualisation des données, la belle Telerik UI for .NET MAUI Charts.

L'aspect bureau et mobile 😎

Comment concevoir une application .NET MAUI avec un look and feel moderne pour ordinateur de bureau et mobile, pourriez-vous vous demander ? Quels sont les défis ici? D'une part, il devrait avoir deux pages sur les téléphones mobiles puisque l'écran est plus petit, et lorsque nous sélectionnons une pièce, il devrait nous rediriger vers ses données réelles. Mais, d'un autre côté, lorsque nous ouvrons l'application sur le bureau (macOS ou Windows), elle doit contenir une seule page, et la liste de la première page mobile doit être à gauche et les données de la deuxième page mobile doivent être sur la droite. C'était délicat au début, mais .NET MAUI est construit différemment entre guillemets.

Le look mobile

L'application comporte deux pages avec une navigation implémentée entre elles. Nous naviguons vers la deuxième page lors de la sélection d'une pièce et revenons à la page principale en appuyant sur un bouton de retour. page unique où la sélection et la visualisation des pièces se font de manière dynamique.

Mais comment avons-nous fait fonctionner notre code d'une manière sur mobile et d'une autre sur ordinateur ? Pour réaliser cette fonctionnalité, nous avons créé trois ContentPages (CoinSelectionPageCoinInfoPageDesktopPage21) contenant une ou deux ContentViews ](CoinSelectionViewCoinInfoView).

Examinons la structure de l'application CryptoTracker et expliquons la magie derrière l'apparence mobile et de bureau.

La structure de l'application CryptoTracker

Pages et vues

1. Commençons par les pages et les vues nécessaires pour obtenir l'apparence souhaitée sur ordinateur et sur mobile.[19659025]crypto-app-pages" title="crypto-app-pages"/>

   

2. La CoinSelectionPage affiche toutes les crypto-monnaies et permet vous permet de sélectionner une pièce dans une liste de pièces. La page contient une seule vue, la CoinSelectionView :

   xmlns:view=[19659030]"clr-namespace:CryptoTracker.Views"

   x:Class="CryptoTracker.Pages.CoinSelectionPage"

   Title="Crypto Tracker"

   x :Name="mainPage">

   <view:CoinSelectionView CoinSelected="OnCoinSelected"/>[196]</59047 ContentPage>

3. La CoinInfoPage contient la CoinInfoView, la vue qui affiche toutes les données de la pièce sélectionnée.

   xmlns:view="clr-namespace:CryptoTracker.Views"

   x:Class="CryptoTracker.Pages.CoinInfoPage"

   x:Name="coinInfoPage"

   BackgroundColor="{DynamicResource]"{ RadBorderColor}">

   <view:CoinInfoView x:Name="coinInfoView"/>

   </ContentPage >

4. Comme nous voulons que l'interface utilisateur sur le bureau soit une combinaison des deux pag es, le DesktopPage est la clé. Il contient un GridLayout avec les deux vues—CoinInfoView et CoinSelectionView.

   x:Class="CryptoTracker"Pages.Pages.

   xmlns:Views="clr-namespace:CryptoTracker.Views"

   Title="Crypto Tracker"

   BackgroundColor=[1965903] "

   x:Name="mainPage">

   <GridLayout ColumnDefinitions="500, *"[1965][90] 19659096]<Vues :CoinSelectionView CoinSelected="OnCoinSelected"/>

   <Vues :CoinInfoView x :Nom ]"selectedCoinInfo" Margin="0,15,0,5" GridLayout.Column="1"/>

   </ GridLayout>

   </ContentPage>

   Comme .NET MAUI est toujours en aperçu, c La création de nouvelles pages de contenu et de vues de contenu a ses défis. Le moyen le plus simple qui a fonctionné pour moi était simplement de copier et coller le MainPage.xaml et de changer son nom et son type. Si vous décidez d'aller de cette façon – pour copier et coller la MainPage – gardez à l'esprit que vous devez modifier le fichier .csproj par la suite. Vous devez supprimer ceci :ItemGroup>

   <Compile Update="PagesMainPage - Copy.xaml.cs" >

   <DependentUpon>%(Filename)</DependentUpon>

   </Compile>

   </ItemGroup 19659029]>

   <ItemGroup>

   <MauiXaml Update="PagesMainPage - Copy.xaml"[196>59029] <Générateur>MSBuild : Compiler</Générateur>

   </MauiXaml>

   </ItemGroup1 ]Lorsque nous sommes ✔avec les pages, créons les vues. 👍

5. Dans le référentiel public GitHub de Crypto Tracker, vous pouvez consulter la version complète du code CoinSelectionView et du code CoinInfoView.

6. Nous avons besoin de directives de préprocesseur pour notre Fichier App.xaml.cs comme suit :

   #if MACCATALYST

   MainPage = new DesktopPage();

   #elif WINDOWS

   MainPage = new NavigationPage(new DesktopPage())

   {

   BarBackgroundColor = Colors.White,

   BarTextColor = Color.FromArgb("#121212"),

   };

   #else

   MainPage = new NavigationPage(new CoinSelectionPage())

   {

   #if IOS

   Couleurs.Blanc,

   BarTextColor = Couleur.FromArgb("#121212"),

   #else

   BarBackgroundColor = Couleur.FromArgb("#121212") ,

   BarTextColor = Couleurs.W hite,

   #endif

   };

   #endif

7. La dernière étape consiste à faire de la CoinSelectionPage notre page de navigation qui redirigera l'utilisateur vers la CoinInfoPage chaque fois que nous tapons sur une pièce. Comment? Nous reviendrons dans la seconde partie. Restez à l'écoute et attendez❗

L'objet pièce

Créons un dossier Data avec une classe CoinData pour la crypto-monnaie.

Et avoir des propriétés comme Name, OpeningPrice, ClosingPrice, Date, etc. {

public string Nom { get ; set[196}

public string Symbole { get ; [1965]

public double Prix d'ouverture { obtenir ;  ; }

public double Prix de clôture { get ; ensemble ; }

public double Price24Low { get ; ensemble ; }

public double Price24High { get ; ensemble ; }

public DateHeure Date { get ; ensemble ; }

public double ChangeInPriceAmount => this[196429029]. Prix ​​d'ouverture ; ChangeInPriceAmount / this.OpeningPrice) * 100;

}