{"id":33796,"date":"2017-10-16T13:58:02","date_gmt":"2017-10-16T20:58:02","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=33796"},"modified":"2019-04-04T11:03:20","modified_gmt":"2019-04-04T18:03:20","slug":"adaptive-ui-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/adaptive-ui-xamarin-forms\/","title":{"rendered":"Adaptive UI with Xamarin.Forms"},"content":{"rendered":"

\t\t\t\tXamarin.Forms has supported iOS, Android, and Windows for a long time. We’ve also added new platforms to keep up with the changing landscape, such as Tizen and macOS, with Linux and Windows WPF on the horizon. These platforms run on a wide variety of devices including phones, tablets, desktops, and TVs. This presents an interesting challenge for us as developers; how do we design an adaptive UI that intelligently scales and makes sense on each idiom it’s presented on?<\/p>\n

Respond to Screen Size<\/h3>\n

By default, Xamarin.Forms Layouts and Controls are designed to be responsive and will often grow and shrink to take advantage of the available screen space. If more control is needed, the Xamarin.Forms Page class has a SizeChanged<\/code> event we can use to determine the available screen-size at runtime. This event is raised when the Page<\/em> is displayed, allowing us to adjust or change our Page\u2019s UI based on the Width<\/em> or Height<\/em> of the screen.<\/p>\n

public partial class MainPage : ContentPage\r\n{\r\n   public MainPage()\r\n   {\r\n      InitializeComponent();\r\n      SizeChanged += MainPageSizeChanged;\r\n   }\r\n\r\n   void MainPageSizeChanged(object sender, EventArgs e)\r\n   {\r\n      imgMonkey.WidthRequest = Math.Min(this.Width, 400);\r\n   }\r\n}\r\n\r\n<\/pre>\n
Respond to Orientation<\/h3>\n
We can use the SizeChanged<\/code> event to respond to orientation changes. SizeChanged<\/code> will be raised when the screen is rotated. We can determine the orientation by comparing the Page\u2019s<\/em> Width<\/em> and Height<\/em> properties.<\/p>\n
 <\/p>\n
public partial MainPage : ContentPage\r\n{\r\n    public MainPage()\r\n    {\r\n        InitializeComponent();\r\n        SizeChanged += MainPageSizeChanged;\r\n    }\r\n\r\n    void MainPageSizeChanged(object sender, EventArgs e)\r\n    {\r\n        bool isPortrait = this.Height > this.Width;\r\n        stackPanel.Orientation = (isPortrait ? StackOrientation.Horizontal : StackOrientation.Vertical);\r\n    }\r\n}<\/pre>\n
\"Portrait<\/p>\n
<\/h3>\n
Respond to Device Type<\/h3>\n
We often think about responsive and adaptive in terms of screen size, but we also need to respond to how the user interacts with the device. For instance, we use touch on mobile devices, and a mouse with a keyboard on a desktop PC.\nXamarin.Forms provides a static Idiom<\/em> property on the Device<\/em> class that we can use to check the device type. Devices are sorted into four categories: Phone, Tablet, Desktop, and TV.<\/p>\n
switch (Device.Idiom)\r\n{\r\n    case TargetIdiom.Desktop:\r\n    ...\r\n    case TargetIdiom.Phone:\r\n    ...\r\n    case TargetIdiom.Tablet:\r\n    ...\r\n    case TargetIdiom.TV:\r\n    ...\r\n}<\/pre>\n
 <\/p>\n
We can use Device.Idiom<\/code> to change the UI we present. We have several options you can use depending on a number of changes you need to make.<\/p>\n
For small changes, like adjusting button sizes, we update the controls and layouts directly.<\/p>\n
if (Device.Idiom == TargetIdiom.Desktop)\r\n{\r\n    buttonAbout.HeightRequest = 25;\r\n    buttonAbout.WidthRequest = 40;\r\n}\r\nelse\r\n{\r\n    buttonAbout.HeightRequest = 40;\r\n    buttonAbout.WidthRequest = 70;\r\n}<\/pre>\n
When you need to add or remove portions of your UI, Xamarin.Forms provides a ContentView<\/code> which allows us to create composite controls. We define portions of reusable UI with behavior, and then decide which composite controls to display based on the Idiom<\/em>. You can think of a ContentView<\/code> as a partial Xamarin.Forms Page.<\/p>\n
void AddColorPicker ()\r\n{\r\n    IMyColorPicker colorPicker;\r\n\r\n    if (Device.Idiom == TargetIdiom.Desktop)\r\n        colorPicker = new ColorPickerMouseView();\r\n    else\r\n        colorPicker = new ColorPickerTouchView();\r\n\r\n    colorPicker.VerticalOptions = LayoutOptions.Start;\r\n    colorPicker.ColorChanged += ColorPickerColorChanged;\r\n\r\n    mainLayout.Children.Add(colorPicker)\r\n}<\/pre>\n
\"\"<\/p>\n
 <\/p>\n
When your UI changes are significant between device types, you can create multiple pages. We use Device.Idiom<\/code> to decide which page to display or you can even use ContentViews<\/code> within these pages to avoid duplicate code.<\/p>\n
And If you\u2019re using MVVM, you can define a single View Model that is used for each version of your Page, further reducing repeated code!<\/p>\n
ContentPage page;\r\n\r\nif(Device.Idiom == TargetIdiom.Desktop)\r\n    page = new DetailsDesktopPage(new MyDetailViewModel(...));\r\nelse if(Device.Idiom == TargetIdiom.TV)\r\n    page = new DetailsTVPage(new MyDetailViewModel(...));\r\nelse \/\/Phone or Tablet\r\n    page = new DetailsMobilePage(new MyDetailViewModel(...));\r\n\r\nNavigation.PushAsync(page);<\/pre>\n
 <\/p>\n
If you want to learn more about adaptive UI design, you can find excellent documentation here<\/a> and here<\/a>.<\/p>\n
Head to the Xamarin University website<\/a> for more great Xamarin training, including free Self-Guided courses!<\/p>\n
Discuss this post on the forums.<\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Xamarin.Forms has supported iOS, Android, and Windows for a long time. We’ve also added new platforms to keep up with the changing landscape, such as Tizen and macOS, with Linux and Windows WPF on the horizon. These platforms run on a wide variety of devices including phones, tablets, desktops, and TVs. This presents an interesting […]<\/p>\n","protected":false},"author":559,"featured_media":43803,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,367],"tags":[16],"class_list":["post-33796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin-forms","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Xamarin.Forms has supported iOS, Android, and Windows for a long time. We’ve also added new platforms to keep up with the changing landscape, such as Tizen and macOS, with Linux and Windows WPF on the horizon. These platforms run on a wide variety of devices including phones, tablets, desktops, and TVs. This presents an interesting […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/559"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=33796"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33796\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/43803"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=33796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=33796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=33796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}