MAUI Visual Studio tərəfindən multiplatform applikasiyalar hazırlamaq üçüb təqdim edilmiş freymvorkdur. Adına baxsaq (Multiplatform APP UI) bu freymvorkun təyinatı tam aydın olar. Bu dərsimizdə MAUI və ChatGPT istifadə edərək, sadə bir giriş (login) səhifəsi dizayn edəcəyik.
Əvvəlcə komputerinizdə Visual Stduio və MAUI qurmalısınız. Bundan sonra ChatGPT-yə aşağıdakı məzmunda bir istək göndərin. Alınan kodu yeni MAUI projeyə yerləşdirib icra edib nəticəyə baxın.
I need to create a login page for my .NET maui app project. Name it as TestLoginApp.
The page must contain the following elements:
1. A header bar displaying the icon and app name
2. Input fields Username and Password
3. A login button
4. A signup button at the bottom
5. A footer bar displaying "ASOUI" with small fonts. Align it bottom of the page.
6. Use cool colors as you wish
Create a stylish XAML design
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestLoginApp.LoginPage">
<!-- Header Bar -->
<StackLayout BackgroundColor="#2196F3" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="icon.png" HeightRequest="30" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="TestLoginApp" TextColor="White" FontSize="20" FontAttributes="Bold" VerticalOptions="Center"/>
</Grid>
</StackLayout>
<!-- Content -->
<StackLayout Padding="20" Spacing="20">
<!-- Username Entry -->
<Entry Placeholder="Username" />
<!-- Password Entry -->
<Entry Placeholder="Password" IsPassword="True" />
<!-- Login Button -->
<Button Text="Login" BackgroundColor="#2196F3" TextColor="White" />
<!-- Signup Button -->
<Button Text="Sign Up" BackgroundColor="#4CAF50" TextColor="White" />
<!-- Footer Bar -->
<StackLayout BackgroundColor="#EEEEEE" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand">
<Label Text="ASOUI" FontSize="10" TextColor="Gray" HorizontalTextAlignment="Center"/>
</StackLayout>
</StackLayout>
</ContentPage>
İndi isə gəlin applikasiyamız üçün logo yerləşdirik. Hazır logomuzu
Solution Explorer->Resource->Images qovluğuna yerləşdirib, kodumuzda faylın adını logomuzun adı ilə eyniləşdirək.
Kodda bu hissədə olmalıdır şəklin adı: <Image Grid.Column="0" Source="icon.png" HeightRequest="30" VerticalOptions="Center"/>
https://www.youtube.com/watch?v=Z3B-kHrZXso
Comments
Add comment