{"id":178,"date":"2022-11-20T19:45:53","date_gmt":"2022-11-20T19:45:53","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=178"},"modified":"2023-01-18T17:17:31","modified_gmt":"2023-01-18T17:17:31","slug":"rotate-views-on-orientation-change","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/20\/rotate-views-on-orientation-change\/","title":{"rendered":"How to rotate views on orientation change in Xamarin Forms"},"content":{"rendered":"\n

It is very important to handle the pages on both orientation Landscape<\/strong> and Portrait<\/strong> to improve the user experience. So we need to adjust the existing view (without recreating it) in such a way that looks good in Landscape<\/strong> and Portrait<\/strong> mode. Xamarin forms handle orientation changes by default. So In this article, I\u2019m going to show you how to rotate views on orientation change without recreating layout<\/strong>.<\/p>\n\n\n\n

Let\u2019s Start<\/strong><\/p>\n\n\n\n

To create such a type of page in xamarin forms we will use FlexLayout <\/strong>and VisualStateManager<\/strong>.<\/p>\n\n\n\n

What is FlexLayout?<\/strong><\/p>\n\n\n\n

FlexLayout<\/strong> in xamarin forms is a layout which is similar to StackLayout<\/strong>. FlexLayout<\/strong> can arrange its children either horizontally or vertically in the stack. It is also capable of wrapping its children if there are many children to fit in a single row or column. You can learn more about FlexLayout<\/strong> here<\/a>.<\/p>\n\n\n\n

What is VisualStateManager<\/strong>?<\/p>\n\n\n\n

VisualStateManager<\/strong> <\/strong>in xamarin forms is a way to make visual changes to UI from code behind. It introduces the concept of states<\/strong>. Let’s take an example of a button to explain states, Button has Normal<\/strong> state, Disabled<\/strong> state and Pressed<\/strong> state. We can also create custom states. You can learn more about VisualStateManager<\/strong><\/strong> here<\/a>.<\/p>\n\n\n\n

In this sample demo I will create two custom states that are Portrait<\/strong> state and Landscape<\/strong> state.<\/p>\n\n\n\n

1 – Setting up the UI<\/strong><\/p>\n\n\n\n

1.1 – Create a MainPage.xaml<\/strong><\/p>\n\n\n\n

\"Rotate<\/figure>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             x:Class=\"XFHandleViewOnOrientationChangeSample.MainPage\">\n\n     <ContentPage.Resources>\n        <ResourceDictionary>\n            <Style TargetType=\"FlexLayout\">\n                <Setter Property=\"VisualStateManager.VisualStateGroups\">\n                    <VisualStateGroupList>\n                        <VisualStateGroup x:Name=\"OrientationState\">\n\n                            <!--  Portrait  -->\n                            <VisualState x:Name=\"Portrait\">\n                                <VisualState.Setters>\n                                    <Setter Property=\"Direction\" Value=\"Column\"\/>\n                                <\/VisualState.Setters>\n                            <\/VisualState>\n\n                            <!--  Landscape  -->\n                            <VisualState x:Name=\"Landscape\">\n                                <VisualState.Setters>\n                                    <Setter Property=\"Direction\" Value=\"Row\" \/>\n                                <\/VisualState.Setters>\n                            <\/VisualState>\n\n                        <\/VisualStateGroup>\n                    <\/VisualStateGroupList>\n                <\/Setter>\n            <\/Style>\n        <\/ResourceDictionary>\n    <\/ContentPage.Resources>\n\n    <ContentPage.Content>\n\n         <FlexLayout\n            x:Name=\"FlexLayout\"\n            Direction=\"Column\"\n            Wrap=\"NoWrap\">\n\n            <Image\n                x:Name=\"Image\"\n                Aspect=\"AspectFill\"\n                FlexLayout.Basis=\"40%\"\n                Source=\"img.jpg\"\/>\n\n\n            <StackLayout Margin=\"10\" FlexLayout.Basis=\"60%\">\n\n                <Label Text=\"Title\" FontSize=\"Large\"  FontAttributes=\"Bold\"\/>\n\n                <ScrollView>\n                    <Label 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.\"\n                           FontSize=\"Medium\" \/>\n                <\/ScrollView>\n\n            <\/StackLayout>\n\n        <\/FlexLayout>\n\n    <\/ContentPage.Content>\n       \n\n<\/ContentPage><\/pre>\n\n\n\n