Posts

Showing posts with the label #xamarinUIDesign #UIDesign

School UI Design using Xamarin form

Image
 In Previous blog we have seen some design for school app, so today I am continue with same app School UI Design using Xamarin form Please, support my blog by clicking on our sponsors ad! 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 Today we are going to learn three page: Examination, Assignment, My Attendance Lets start with create classes for all three pages. Install nugget "XamForms.Controls.Calendar" in all the project. ExaminationViewModel.cs public class ExaminationViewModel { public string Name { get; set; } public string Date { get; set; } } public class ExaminationModel { public Li...

Scale Transition in xamarin form

Image
  scale animation in xamarin form The animation in Xamarin will help you to make attractive and smooth transition.There are many method for animation. There are some example of method which will help you learn basic steps. The scale method increases or decreases the size of an element . Scaling refers to the resizing of an element. Scaling is used to change the visual appearance of an image, to alter the quantity of information stored in a scene representation, or as a low-level preprocessor in multi-stage image processing chain which operates on features of a particular scale. If you want to see result of scaling animation of this blog then click  here . ScaleTransition.xaml scale animation in xamarin form.  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PageEffectUIDesigns.Views.ScaleTransition"> <ContentPage.Content> <Stack...

Online Banking UI Designs in xamarin form

Image
  First we will create all template that required in above UI. You can copy code for CustomEntry from here . CardCircleImage.xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="OnlineBankingUIDesigns.Controls.CardCircleImage"> <ContentView.Content> <StackLayout Padding="0,10,0,0" Margin="20,0,0,0"> <Frame x:Name="frame" HasShadow="True" HeightRequest="70" WidthRequest="70" CornerRadius="100" HorizontalOptions="Center" Padding="0"> <Image x:Name="img" Source="{Binding Img}" Aspect="AspectFill" /> </Frame> <Label Text="{Binding Name}" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="...

Behavior Validation in Xamarin Form

Image
  Xamarin.Forms Behaviors are created by deriving from the Behavior or Behavior<T> class, where T is the type of the control (Entry, etc) to which the Behavior should apply. Create a new class and which inherits from the Behavior or Behavior<T> class. We need to override OnAttachedTo and OnDetachingFrom method from our validation class. The OnAttachedTo method is fired immediately after the behavior is attached to a control. This can be used to register event handlers or perform other setup that's required to support the behavior functionality. The OnDetachingFrom method is fired when the behavior is removed from the control. This method receives a reference to the control to which it is attached, and is used to perform any required cleanup. Register.xaml <ContentPage.Resources> <ResourceDictionary> <Style x:Key="baseStyle" TargetType="Label"> <Setter Property="XAlign...

Active Project

Image
  Active Project for Task Manager Code for Custom Entry Visit here Class for this Page Visit here ActiveProject.xaml <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:TemplatedPage="clr-namespace:TaskManagerUIDesign.Views.Template" xmlns:custom="clr-namespace:TaskManagerUIDesign.Controls" x:Class="TaskManagerUIDesign.Views.ActiveProject" BackgroundColor="#F5F5F5" Title="Active Projects"> <ContentPage.Content> <ScrollView HorizontalOptions="Start" VerticalOptions="Start" > <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > <Label Text="10 Projects are active." TextColor="Black" Margin="20,20,20,0"><...

Custom Entry Renderer for Task Manager

Image
 Welcome to my blog.  Today we are going to learn how to create custom entry control. Custum Entry.cs Add this class in main project. public class CustomEntry : Entry { public static readonly BindableProperty BorderColorProperty = BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CustomEntry), Color.Gray); // Gets or sets BorderColor value public Color BorderColor { get => (Color)GetValue(BorderColorProperty); set => SetValue(BorderColorProperty, value); } public static readonly BindableProperty BorderWidthProperty = BindableProperty.Create(nameof(BorderWidth), typeof(int), typeof(CustomEntry), Device.OnPlatform<int>(1, 2, 2)); // Gets or sets BorderWidth value public int BorderWidth { get => (int)GetValue(BorderWidthProperty); set => SetValue(BorderWidthProperty, value); ...