translate view to the same position regardless of screen size xamarin.forms

Question

i am trying to animate my labels like this: https://1drv.ms/v/s!ApO-CpoDPS4ikX5sxW4QWn8_rdxF?e=L3s2AB so i wrote the following code:

xaml:

<?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="alphatrial.MainPage"
             BackgroundColor="#ffc40c"
             xmlns:local="clr-namespace:alphatrial.Effects">
    <ContentPage.Effects>
        <local:StatusBarEffect 
        BackgroundColor="#ffc40c"/>
    </ContentPage.Effects>
    <StackLayout >
        <Label  Text="ISC - Alpha" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,50,50,-14" />
        <BoxView HorizontalOptions="FillAndExpand" Color="Black" HeightRequest="2" Margin="0,0,10,0"/>
       
        <Label Text="App" TextColor="White" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,-12,15,0"/>

        <Frame Margin="0,80,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Email" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="emailAnimate" />
                <Entry Margin="20,-40,20,0" x:Name="email" />
                
            </StackLayout>

        </Frame>

        <Frame Margin="0,-10,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Password" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="PassAnimate" />
                <Entry Margin="20,-40,20,0" x:Name="password" IsPassword="True"/>
                <ImageButton Source="hidePass.png" WidthRequest="25" HeightRequest="25" HorizontalOptions="End" BackgroundColor="Transparent" Margin="0,-40,20,0"  x:Name="show"/>

            </StackLayout>

        </Frame>

        <Button CornerRadius="20" Text="Login" FontSize="Medium" BackgroundColor="#3d3d3d" TextColor="White" Margin="50" FontFamily="MyAwesomeCustomFont"/>
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
            <Switch  HeightRequest="40" WidthRequest="50" OnColor="Black" ThumbColor="White"/>
            <Label Text="Remember Me" TextColor="Black" FontAttributes="Bold" Margin="10"/>
        </StackLayout>
    </StackLayout>

</ContentPage>

xaml.cs

 public MainPage()
        {
            
            InitializeComponent();

            username = this.FindByName<Entry>("email");
            pass = this.FindByName<Entry>("password");
            anime_user = this.FindByName<Label>("emailAnimate");
            anime_pass = this.FindByName<Label>("PassAnimate");
            username.Focused += Email_Focused;
            username.Unfocused += Email_Unfocused;
            pass.Focused += Password_Focused;
            pass.Unfocused += Password_Unfocused;
           
        }
   private void Password_Unfocused(object sender, FocusEventArgs e)
        {
            if (string.IsNullOrEmpty(pass.Text))
            {
                anime_pass.ScaleTo(1, 100);
                anime_pass.TranslateTo(0, 0, 100);
              
            }
        }

        private void Password_Focused(object sender, FocusEventArgs e)
        {
            if (pass.IsFocused)
            {
                anime_pass.ScaleTo(0.8, 150);
                anime_pass.TranslateTo(-28, -30, 150);

            }

        }


        private void Email_Unfocused(object sender, FocusEventArgs e)
        {
            if (username.IsFocused == false)
            {
                if (string.IsNullOrEmpty(username.Text) )
                {
                  
                    anime_user.ScaleTo(1, 100);
                    anime_user.TranslateTo(0, 0, 100);
                }
            }
         
           
            
        }

        private void Email_Focused(object sender, FocusEventArgs e)
        {
            if (username.IsFocused)
            {
                anime_user.ScaleTo(0.8,150);
                anime_user.TranslateTo(-28, -30,150);
               

            }



        }
    }
}

this works fine on my own phone that i used to debug and design the app, but when i tried it on another phone with a smaller screen, the labels translated more than needed, they didn't stop at the intended position. the same happened when i rotated my phone's screen horizontally. how can i translate the view to the same position regardless of screen size? thanks in advance.

Answer 1

the same happened when i rotated my phone's screen horizontally. how can i translate the view to the same position regardless of screen size?

It is important to consider how your application will be used and how landscape orientation can be incorporated to improve the user experience. Individual layouts can be designed to accommodate multiple orientations and best use the available space.

Xamarin.Forms does not offer any native events for notifying your app of orientation changes in shared code. However,Xamarin.Essentials contains a [DeviceDisplay] class that provides notifications of orientation changes.

To detect orientations without Xamarin.Essentials, monitor the SizeChanged event of the Page, which fires when either the width or height of the Page changes. When the width of the Page is greater than the height, the device is in landscape mode.

Alternatively, it's possible to override the OnSizeAllocated method on a Page, inserting any layout change logic there. The OnSizeAllocated method is called whenever a Page is allocated a new size, which happens whenever the device is rotated. Note that the base implementation of OnSizeAllocated performs important layout functions, so it is important to call the base implementation in the override:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
}

For more details, you can check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows .