Change Windows Store App orientation with Caliburn.Micro

Hi everyone! In that article I'll show you how to create a Windows Store application that dynamically switches between Portrait and Landscape modes with the help of Caliburn.Micro library.

Of course, there is a way to manage screen orientations using PRISM library and some VisualStateManager states and transitions. You can see example of that in Developing a Windows Store Business App sample. But here we'll use simpler and time-saving approach.

You can find code for the article here.

Let's start.

First and foremost, we need to inform the application that orientation of the device has changed. The best way to do this is to implement our own class LayoutInforingPage

12. public class LayoutInformingPage : Page

It will contain CurrentPageLayout dependency property with support for two-way binding so that we can bind our ViewModel's CurrentPageLayout property to it later and detect when it changes.

20. public static readonly DependencyProperty CurrentPageLayoutProperty = DependencyProperty.Register(
21.     "CurrentPageLayout", typeof(PageLayout), typeof(LayoutInformingPage), new PropertyMetadata(default(PageLayout)));
22.  
23. // property to detect screen orientation change
24. public PageLayout CurrentPageLayout
25. {
26.     get { return (PageLayout)GetValue(CurrentPageLayoutProperty); }
27.     set { SetValueDp(CurrentPageLayoutProperty, value); }
28. }
29.  
30. public event PropertyChangedEventHandler PropertyChanged;
31.  
32. private void SetValueDp(
33.     DependencyProperty property,
34.     object value,
35.     [System.Runtime.CompilerServices.CallerMemberName] string p = null)
36. {
37.     SetValue(property, value);
38.     if (PropertyChanged != null)
39.     {
40.         PropertyChanged(this, new PropertyChangedEventArgs(p));                
41.     }
42. }

To use that property we simply handle Page's SizeChanged event with OnSizeChanged method where we determine if our page is portrait or landscape.

14. public LayoutInformingPage()
15. {
16.     CurrentPageLayout = PageLayout.Landscape;
17.     this.SizeChanged += OnSizeChanged;
18. }

44. private void OnSizeChanged(object s, SizeChangedEventArgs e)
45. {
46.     var newPageLayout = DeterminePageLayout(e.NewSize.Width, e.NewSize.Height);
47.     CurrentPageLayout = newPageLayout;
48. }
49.  
50. private PageLayout DeterminePageLayout(double width, double height)
51. {
52.     if (width > height) return PageLayout.Landscape;
53.     return PageLayout.Portrait;
54. }

Here PageLayout is a simple enum that conains different page states it can be in. Notice, that it can also contain Minimal page state. Here I dont's use it for the sake of simplicyty.

3. public enum PageLayout
4. {
5.     Landscape,
6.     Portrait,
7.     // Minimal
8. }

So, let's use our new class! From that point I suppose that all necessary actions on creating Caliburn.Micro application have been already done and we have the following structure of the application.

ShellViewModel will be of type Conductor<IScreen>.Collection.AllActive and contain two active ContentControls bound to IScreens. Why use two for test? Suppose, we have a set of lanscape screens, but we don't have portrait equivalents for all of them, and when device orientation changes, we need to use what we have. If we don't have portrait mode for that screen - so be it, we'll stick with lanscape. You can see that we have portrait version only for TestPage, but not for TestPage2.

To use LayoutInformingPage class we just alter ShellView.xaml so that Page becomes LayoutInformingPage and we bind CurrentPageLayout

1. <controls:LayoutInformingPage
2.     x:Class="PortraitCaliburnTest.Views.Shell.ShellView"
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.     xmlns:micro="using:Caliburn.Micro"
8.     xmlns:controls="using:PortraitCaliburnTest.Views.Controls"
9.     mc:Ignorable="d"
10.     CurrentPageLayout="{Binding CurrentPageLayout, Mode=TwoWay}"
11.     >

And that's where the most interesting part starts. Now we have our viewmodel being informed about orientation change, but how can we change the view itself? We don't want neither to recreate our viewmodel nor create and bind views manually. It turns out, that Caliburn.Micro library already contains a mechanism for using multiple views on the same ViewModel and dynamically switching them. You can find more information in the official documentation, but now we are just add the View.Context attached property to both of our controls

27. <ContentControl x:Name="ActiveItemViewModel"
28.             micro:View.Model="{Binding ActiveItemViewModel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
29.             micro:View.Context="{Binding Context}"
30.             Grid.Column="0"        
31.             HorizontalContentAlignment="Stretch"
32.             VerticalContentAlignment="Stretch"
33.             />
34.  
35. <ContentControl x:Name="SecondActiveItemViewModel"
36.             micro:View.Model="{Binding SecondActiveItemViewModel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
37.             micro:View.Context="{Binding Context}"
38.             Grid.Column="1"        
39.             HorizontalContentAlignment="Stretch"
40.             VerticalContentAlignment="Stretch"
41.             />

and create corresponding Context string property with NotifyPropertyChange in the ShallViewModel. That's how CurrentPageLayout property looks now, notice OnSizeChanged method.

59. public PageLayout CurrentPageLayout
60. {
61.     get
62.     {
63.         return this.currentPageLayout;
64.     }
65.  
66.     set
67.     {
68.         if (value == this.currentPageLayout) return;
69.         this.currentPageLayout = value;
70.         NotifyOfPropertyChange(() => CurrentPageLayout);
71.         OnSizeChanged();
72.     }
73. }

62. private void OnSizeChanged()
63. {
64.     switch (CurrentPageLayout)
65.     {
66.         case PageLayout.Landscape:
67.             Context = "Landscape";
68.             break;
69.         case PageLayout.Portrait:
70.             Context = "Portrait";
71.             break;
72.         default:
73.             throw new ArgumentOutOfRangeException();
74.     }
75. }

Here we set Context value to either Portrait or Landcape. Every time we are locating for the View type by our ViewModel type context value is being analyzed (remember that attached property?). By default conventions of Caliburn.Micro we need to name our Views for FooViewModel like Foo.Portrait and Foo.Landscape. But if we want to keep separate Portrait and Landscape folder structure with our views we have to redefine ViewLocator.LocateForModelType method. That is done in App.xaml.cs ConfigureTypeMappings() method.

To create a View type we take ViewModel's name and modify it so that it becomes fully qualified name of the View and use GetOrCreateViewType method after that for view types that were resolved.

35. private void ConfigureTypeMappings()
36. {
37.     ViewLocator.LocateForModelType = (viewModelType, visualParent, context) =>
38.     {
39.         string primaryViewTypeName = string.Empty;
40.         string secondaryViewTypeName = string.Empty;
41.  
42.         if (viewModelType.FullName.Contains("Shell"))
43.         {
44.             primaryViewTypeName = viewModelType.FullName
45.                 .Replace("ViewModels", "Views")
46.                 .Replace("Model", string.Empty);
47.         }
48.         else if ((string)context == "Portrait")
49.         {
50.             // first search in portrait, then search in landscape
51.             primaryViewTypeName = viewModelType.FullName
52.                 .Replace("ViewModels", "Views.Portrait")
53.                 .Replace("Model", string.Empty);
54.             secondaryViewTypeName = viewModelType.FullName
55.                 .Replace("ViewModels", "Views.Landscape")
56.                 .Replace("Model", string.Empty);
57.         }
58.         else
59.         {
60.             // first search in landscape, then search in portrait
61.             primaryViewTypeName = viewModelType.FullName
62.                 .Replace("ViewModels", "Views.Landscape")
63.                 .Replace("Model", string.Empty);
64.             secondaryViewTypeName = viewModelType.FullName
65.                 .Replace("ViewModels", "Views.Portrait")
66.                 .Replace("Model", string.Empty);
67.         }
68.  
69.         var viewType = AssemblySource.FindTypeByNames(new[] { primaryViewTypeName, secondaryViewTypeName });
70.         var view = ViewLocator.GetOrCreateViewType(viewType);
71.  
72.         return view;
73.     };
74. }

When context is "Portrait" at first we try to locate primary Portrait View for the given ViewModel, and after that if we fail and then we use secondary Landscape View. Vice versa for the "Landscape" context.

What is left is to start the application and test it it correctly switches between views:

Although the up above example is rather simple, the described approach works for ViewModels of any complexity, including those that contain observable collections and complex properties.

Thanks ;-)

You can copy code for that article from bitbucket:
https://bitbucket.org/kfinagin/samples.orientationchange