This layout currently only looks great in Portrait mode, but not in Landscape as we've seen above. The StackLayout itself is placed in the second row, first column of the Grid. The buttons are located inside of a StackLayout which has its Orientation property set to "Horizontal", which means that they will be placed next to each other horizontally. The MediaElement, which acts as the video player, is placed into the first row, first column of the Grid by setting the attached properties Grid.Row="0" and Grid.Column="0". I have used a Grid to place the video at the top and the buttons at the bottom of the page, where the top row takes up one third of the available space and the bottom row takes up two thirds of the available space by defining them as follows: RowDefinitions="*,2*". Instead, let's move the video to the left side of the screen and stack the buttons vertically on the right side when the device is in Landscape mode to look like this:įirst, let's have a look at the layout of the page and then make a few changes to it to achieve the desired result. This happens, because the same Layout is used for both Portrait and Landscape. In Landscape mode, however, the video is extremely small and the buttons are still stacked horizontally below the video, which doesn't look great and provides a poor user experience. When the device is in Portrait mode, the page looks fine, the video takes up the entire width of the screen and the buttons are located below the video, as expected. Let's have a look at the sample app, which I have extended with a page that displays a video ( using the MediaElement from the Community Toolkit) and two custom buttons, one to play and another one to pause the video. Note: The concepts in this article are largely applicable to Xamarin.Forms as well. As always, you can find the full code for this post in my sample repository. NET MAUI app using state triggers and update the layout entirely in XAML markup - no C# code required. In this blog article, I will how you how to respond to the device orientation in your. Landscape mode enables your users to view such information and data in a more user-friendly and orientation optimized way. Landscape mode greatly increases the user experience of an app, because the screen width is just too small in Portrait mode when dealing with images, videos and other types of horizontally organized graphics and data. While Portrait mode has become the default mode for mobile apps, because we often stare at the screen while holding the device in one hand, it may be a good idea to offer a Landscape version of your User Interface (UI) as well. Today, we will have a look at the role device orientation plays for user experience and how you can take advantage of. When developing mobile apps user experience (UX) is key.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |