Scale Transition in xamarin form

 

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>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <ListView x:Name="listview" SeparatorVisibility="None" HasUnevenRows="True" VerticalOptions="FillAndExpand" 
                      ItemSelected="listview_ItemSelected" HorizontalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout Padding="5" BackgroundColor="Black">
                                    <Image HeightRequest="200" Aspect="AspectFill" Source="{Binding Img}"></Image>
                                    <Label Text="{Binding Title}" TextColor="White"></Label>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>  

ScaleTransition.cs

    public partial class ScaleTransition : ContentPage
    {
        public ScaleTransition()
        {
            InitializeComponent();
            listview.ItemsSource = new ImageList().Get();
        }

        private async void listview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if(listview.SelectedItem != null)
            {
                var data = (ImageModel)listview.SelectedItem;
                listview.SelectedItem = null;
                await Shell.Current.GoToAsync($"ScaleTransitionView?id=" + data.ID);
            }
        }
    }  

ScaleTransitionView.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.ScaleTransitionView"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid x:Name="grid" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" 
              RowDefinitions="Auto,Auto,Auto,Auto,Auto,21,Auto,Auto,21,Auto,Auto" Padding="20">
            <Image Grid.Row="0" Opacity="0.3" x:Name="img1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"  HeightRequest="100" Margin="-70"></Image>
            <Frame Grid.Row="0" CornerRadius="100" HorizontalOptions="Center" HasShadow="True" HeightRequest="100" WidthRequest="100" BorderColor="Gray">
                <Image x:Name="img" Margin="-20"  
                       Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
            </Frame>
            <Label x:Name="lblTitle" Margin="0,80,0,0" FontSize="25" Grid.Row="1" IsVisible="false" Text="Nature Tree" FontAttributes="Bold" TextColor="#202020"></Label>
            <Label x:Name="lblDescription" Grid.Row="2" IsVisible="false" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
                   TextColor="#202020"></Label>
            <Label Grid.Row="3" Text="Heading 1" Margin="0,20,0,0" FontSize="15" TextColor="#202020" FontAttributes="Bold"></Label>
            <Label Grid.Row="4" Text="Description1" FontSize="15" TextColor="Gray" ></Label>
            <BoxView Grid.Row="5" Margin="0,10" BackgroundColor="LightGray"></BoxView>
            <Label Grid.Row="6" Text="Heading 2" FontSize="15" TextColor="#202020"  FontAttributes="Bold"></Label>
            <Label Grid.Row="7" Text="Description 2" FontSize="15" TextColor="Gray" ></Label>
            <BoxView Grid.Row="8" Margin="0,10" BackgroundColor="LightGray"></BoxView>
            <Label Grid.Row="9" Text="Heading 3" FontSize="15" TextColor="#202020" FontAttributes="Bold"></Label>
            <Label Grid.Row="10" Text="Description 3" FontSize="15" TextColor="Gray" ></Label>

        </Grid>
    </ContentPage.Content>
</ContentPage>  

ScaleTransitionView.cs

    [QueryProperty("ID", "id")]
    public partial class ScaleTransitionView : ContentPage
    {
        private string _id;
        public string ID
        {
            get
            {
                return _id;
            }
            set
            {
                _id = value;
                Scaling();
            }
        }
        public ScaleTransitionView()
        {
            InitializeComponent();
            // Scaling();
        }

        private async void Scaling()
        {
            var data = new ImageList().Get().ToList().Where(a => a.ID == Convert.ToInt32(ID)).FirstOrDefault();
            img1.Source = img.Source = data.Img;
            double _scale = 0;
            _scale = grid.Scale;
            await grid.ScaleTo(10, 500);
            await grid.ScaleTo(_scale, 300);
            lblTitle.IsVisible = lblDescription.IsVisible = true;
        }        
    }  

Classes and method are below to get data

    public class ImageModel
    {
        public int ID { get; set; }
        public ImageSource Img { get; set; }
        public string Title { get; set; }
    }
    public class ImageList
    {
        public List<ImageModel> Get()
        {
            List<ImageModel> list = new List<ImageModel>();
            list.Add(new ImageModel { ID = 1, Title = "Nature Tree", Img = "https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1200x800.jpg" });
            list.Add(new ImageModel { ID = 2, Title = "Nature Tree", Img = "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg" });
            list.Add(new ImageModel { ID = 3, Title = "Nature Tree", Img = "https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" });
            list.Add(new ImageModel { ID = 4, Title = "Nature Tree", Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHuaPmX97DTfoCwdP_-ejeY8gNSIhr0IbGjw" });
            list.Add(new ImageModel { ID = 5, Title = "Nature Tree", Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGRK7f1EOP6crcXmMu7GGskqVbWfi2jfF32w" });
            return list;
        }
    }  

Please share your feedback.