Share via

Guide About UI Designing in Xamarin Forms

mokhtar soholi 41 Reputation points
2021-05-18T06:21:36.153+00:00

Hi everybody,

I am new to Xamarin Forms my layout is lagging so ineed some help.

This is my Ui Code :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:neo="clr-namespace:Xamarin.Forms.NeoControls;assembly=Xamarin.Forms.NeoControls"
             xmlns:extensions="clr-namespace:NeomorphismSmartHomeApp.Extensions"
             mc:Ignorable="d"
             FlowDirection="LeftToRight"
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:renderers="clr-namespace:NeomorphismSmartHomeApp.Renderes"
             x:Class="NeomorphismSmartHomeApp.MainPage"
             BackgroundColor="#e3edf7">
    <NavigationPage.TitleView>
        <Label Text="صفحه اصلی"
               FontSize="Medium"
               TextColor="White"
               HorizontalOptions="Center"
               FontFamily="MyFont"/>
    </NavigationPage.TitleView>
    <ScrollView>

        <StackLayout CompressedLayout.IsHeadless="True">

                <Frame Margin="10" CornerRadius="10">
                    <StackLayout Orientation="Horizontal" Spacing="10" Padding="0">
                        <Button Text="مشاهده تنظیمات"
                                FontFamily="MyFont"
                                Clicked="Button_Clicked"
                                CornerRadius="10"/>
                        <Label Text="برای استفاده از برنامه باید تنظیمات را انجام دهید."
                               FontSize="Small"
                               VerticalOptions="Center"
                               HorizontalOptions="End"
                               FontFamily="MyFont"/>
                    </StackLayout>
                </Frame>


            <Grid HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand"
          ColumnSpacing="12"
          Padding="35">

                <Grid.RowDefinitions>

                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="15*"/>
                    <RowDefinition Height="18*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>


                <neo:NeoButton Grid.Row="0"
                       Elevation=".25"
                               x:Name="btnSemiActive"
                       CornerRadius="70,20,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.mid.png }"/>

                        <Label Text="نیمه فعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </neo:NeoButton.GestureRecognizers> 
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="0"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,70,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.on.png }"/>

                        <Label Text="تمام فعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="FullActiveClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="1"
                       Elevation=".25"
                       CornerRadius="20,20,70,20"
                       BackgroundColor="#e3edf7">
                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.on.png }"/>

                        <Label Text="رله شماره 1 فعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ActiveRele1Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="1"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,20,20,70"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Center"
                       HorizontalOptions="Start"
                       HeightRequest="30"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.off.png }"/>

                        <Label Text="غیرفعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="2"
                       Elevation=".25"
                       CornerRadius="70,20,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.on.png }"/>

                        <Label Text="رله شماره 2 فعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ActiveRele2Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="2"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,70,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.off.png }"/>

                        <Label Text="رله شماره 1 غیرفعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableRele1Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="3"
                       Elevation=".25"
                       CornerRadius="20,20,70,20"
                       BackgroundColor="#e3edf7">
                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.on.png }"/>

                        <Label Text="رله شماره 3 فعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ActiveRele3Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="3"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,20,20,70"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Center"
                       HorizontalOptions="Start"
                       HeightRequest="30"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.off.png }"/>

                        <Label Text="رله شماره 2 غیرفعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableRele2Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="4"
                       Elevation=".25"
                       CornerRadius="70,20,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.sound.png }"/>

                        <Label Text="پخش صدای دینگ دینگ"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DingDingSoundClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="4"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,70,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.off.png }"/>

                        <Label Text="رله شماره 3 غیرفعال"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableRele3Clicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="5"
                       Elevation=".25"
                       CornerRadius="20,20,70,20"
                       BackgroundColor="#e3edf7">
                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.mute.png }"/>

                        <Label Text="قطع آژیر"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableAzhirClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="5"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,20,20,70"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Center"
                       HorizontalOptions="Start"
                       HeightRequest="30"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.disable.png }"/>

                        <Label Text="قطع شماره گیری"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableNumberClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="6"
                       Elevation=".25"
                       CornerRadius="70,20,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.sim.png }"/>

                        <Label Text="کنترل میزان اعتبار سیم کارت"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="HandleSimCardChargeClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="6"
                       Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,70,20,20"
                       BackgroundColor="#e3edf7">

                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       HeightRequest="40"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.disable.png }"/>

                        <Label Text="قطع آیدی و شماره گیر"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DisableAzhirAndNumberClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>

                <neo:NeoButton Grid.Row="7"
                               Grid.Column="1"
                       Elevation=".25"
                       CornerRadius="20,20,70,20"
                       BackgroundColor="#e3edf7">
                    <StackLayout Orientation="Vertical"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand"
                         Padding="30">

                        <Image VerticalOptions="Start"
                       HorizontalOptions="Start"
                       Source="{extensions:ImageResource NeomorphismSmartHomeApp.Resources.Images.sim.png }"/>

                        <Label Text="شارژ سیم کارت"
                       FontFamily="MyFont"
                       FontSize="Small"
                       TextColor="#95a3b8"
                       VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                    <neo:NeoButton.GestureRecognizers>
                        <TapGestureRecognizer Tapped="SimCardChargeClicked"/>
                    </neo:NeoButton.GestureRecognizers>
                </neo:NeoButton>
            </Grid>

    </StackLayout>
        </ScrollView>

</ContentPage>
Developer technologies | .NET | Xamarin
0 comments
Accepted answer
  1. JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff
    2021-05-18T09:05:51.79+00:00

    Hello,

    Welcome to our Microsoft Q&A platform!

    From above code you posted, I found the xaml code is a bit complicated，which has so many controls and layouts. This will effect the loading efficiency.

    For this, you can follow document Improve Xamarin.Forms App Performance to optimize your code.

    In addition, you can also try nuget Xamarin.FFImageLoading.Forms to load your image,which is a Xamarin Library to load images quickly and easily on Xamarin.Forms.

    For more details, you can check: https://github.com/luberda-molinet/FFImageLoading .

    And there is a sample included in above link, you can refer to it.

    Best Regards,

    Jessie Zhang

    ---
    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.