Posts

Showing posts with the label #xamarinUIDesign

Find out how to implement appshell in xamarin forms

Image
Xamarin.Forms 4.0 introduced the amazing feature called Xamarins.Forms Shell. It has reduced complexity of creating mobile apps. Please, support my blog by clicking on our sponsors ad! It is used for Navigation,URI base routing, integrated search handling. Before Appshell there was independent feature: MasterDetailPage TabbedPage NavigationPage but Appshell has combine this and make easy creating apps. > You can add xaml file in your project and named it as AppShell.xaml and Update it like below code: AppShell.Xaml <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinCourse.AppShell"> </Shell> AppShell.Xaml.cs public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } } You can call this class

Xamarin Tutorial Part 4 - Grid for Xamarin Forms

 What is Grid? with live example please watch: https://youtu.be/gZQyqKheUF4 https://youtu.be/e8cYsSw752s Please, support my blog by clicking on our sponsors ad! Grid is a layout type that allow you to create design using rows/columns Let's see how to use Grid Use Grid tag to create design <Grid></Grid> In C# var grid = new Grid() There are three type of cell size 1) Absolute : Fix size <Grid ColumnDefinition = "50,70,80" /> There will be three Column cell  1st row cell width will be 50  2nd cell width will be70  3rd cell width will be 80 2)  Auto: Will use size of data <Grid ColumnDefinition = "70,70,Auto"/> There will be three Column cell  1st row cell width will be 70  2nd cell width will be70  3rd cell width will be according to data 3) Star: It expand propotionally to space size <Grid ColumnDifinition="*,2*,5*"/> 2* = 20%,  5* = 50%,  100-70 = 30 so * = 30% There will be three Column cell  1st row c

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project ->

Textbox, Button, Combobox Design in xamarin form

Image
  Textbox,Button, Combobox Design in xamarin form First we will create template get fontawesome code from  here Copy code for CustomEntry from  this link . Code is explain in this video Add " PancakeView " nugget in your project. CustomTextbox.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pcview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:control="clr-namespace:LoginUIDesigns.Controls" x:Class="LoginUIDesigns.Controls.CustomTextbox"> <ContentView.Content> <StackLayout> <pcview:PancakeView x:Name="pc" CornerRadius="40,0,0,40" HeightRequest="55" BackgroundColor="White" Padding="10,0"> <

Dashboard similar as Amazon Dashboard

Image
  Dashboard in xamarin form You can get fontawesome from this link . First we will create custom navigation bar TopNavBar.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="EShoppingUIDesigns.Controls.TopNavBar" xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" BackgroundColor="#3AC3D6"> <ContentView.Content> <Grid HorizontalOptions="FillAndExpand" RowDefinitions="Auto,Auto" RowSpacing="20" ColumnDefinitions="Auto,*,Auto" Padding="10"> <Image Grid.Row="0" Grid.Column="0" Source="threelines.png" Aspect="AspectFill" HeightRequest="20" WidthRequest="25"></Image> <Label Grid.Row="0" Grid.Column="1" Margin="10,0,

School UI Design - Fees Gallery Profile using xamarin form

Image
School UI Design using xamarin form Code is explain in this video First add  Fontawesome  in your project. All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html FeesView.Xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SchoolUIDesigns.Control.FeesView"> <ContentView.Content> <Grid ColumnDefinitions="40,*,Auto" RowDefinitions="Auto,Auto" RowSpacing="0"> <Label x:Name="lblIcon" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0