Different Windows (Xaml) for Landscape and Portrait

Question

I’m programming in C# using Visual Studio Enterprise 2015 apps for Windows Phone 8.1.

I was able to make a simple application, a calculator, but I would like to know: how do I use a shaman for the landscape mode and one for the portrait mode, in this case I would have a simple calculator in portrait mode and an advanced calculator in landscape.

The images below show this in the standard Windows Phone calculator.

Code xaml:

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App12"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:WindowsPhone81="using:Microsoft.AdMediator.WindowsPhone81"
x:Class="App12.MainPage"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Image x:Name="image" Source="Assets/03.jpg" Stretch="UniformToFill"/>
    <TextBox x:Name="textBox" Margin="34,36,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="337" Background="{x:Null}" SelectionHighlightColor="#FF297ACC" FontFamily="Segoe UI Black" Foreground="White" BorderBrush="{x:Null}" FontWeight="Bold" IsReadOnly="True" Height="81" FontSize="48" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
    <Button x:Name="button" Content="C" HorizontalAlignment="Left" Margin="34,143,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Click"/>
    <Button x:Name="button_Copy" Content="/" HorizontalAlignment="Left" Margin="124,143,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy_Click"/>
    <Button x:Name="button_Copy1" Content="*" HorizontalAlignment="Left" Margin="218,143,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy1_Click"/>
    <Button x:Name="button_Copy2" Content="-" HorizontalAlignment="Left" Margin="311,143,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy2_Click"/>
    <Button x:Name="button_Copy3" Content="7" HorizontalAlignment="Left" Margin="34,210,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy3_Click"/>
    <Button x:Name="button_Copy4" Content="8" HorizontalAlignment="Left" Margin="124,210,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy4_Click"/>
    <Button x:Name="button_Copy5" Content="9" HorizontalAlignment="Left" Margin="218,210,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy5_Click"/>
    <Button x:Name="button_Copy6" Content="+" HorizontalAlignment="Left" Margin="311,210,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy6_Click"/>
    <Button x:Name="button_Copy7" Content="4" HorizontalAlignment="Left" Margin="34,279,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy7_Click"/>
    <Button x:Name="button_Copy8" Content="5" HorizontalAlignment="Left" Margin="124,279,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy8_Click"/>
    <Button x:Name="button_Copy9" Content="6" HorizontalAlignment="Left" Margin="218,279,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy9_Click"/>
    <Button x:Name="button_Copy10" Content="," HorizontalAlignment="Left" Margin="311,279,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy10_Click"/>
    <Button x:Name="button_Copy11" Content="1" HorizontalAlignment="Left" Margin="34,346,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy11_Click"/>
    <Button x:Name="button_Copy12" Content="2" HorizontalAlignment="Left" Margin="124,346,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy12_Click"/>
    <Button x:Name="button_Copy13" Content="3" HorizontalAlignment="Left" Margin="218,346,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy13_Click"/>
    <Button x:Name="button_Copy14" Content="=" HorizontalAlignment="Left" Margin="311,346,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy14_Click"/>
    <WindowsPhone81:AdMediatorControl x:Name="AdMediator_app12" Id="AdMediator-Id-F7568647-90DB-48BC-B3CA-58E5B6EBC146-app12"  HorizontalAlignment="Left" Height="50" Margin="42,575,0,0" VerticalAlignment="Top" Width="320" RenderTransformOrigin="0.5,0.5"/>
    <Button x:Name="button_Copy15" Content="0" HorizontalAlignment="Left" Margin="34,414,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy15_Click"/>
    <Button x:Name="button_Copy16" Content="M+" HorizontalAlignment="Left" Margin="124,414,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy16_Click"/>
    <Button x:Name="button_Copy17" Content="M-" HorizontalAlignment="Left" Margin="218,414,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy17_Click"/>
    <Button x:Name="button_Copy18" Content="MRC" HorizontalAlignment="Left" Margin="311,414,0,0" VerticalAlignment="Top" Width="41" MinWidth="60" Click="button_Copy18_Click"/>
</Grid>

Answer 1

First create two Grids, one with simple calculator and in picture mode, and another with advanced calculator in landscape mode. One can stand over the other. To see the Designer in landscape mode, go on Desing > Device Window and change the orientation.

<Grid x:Name="CalcSimples">

  <!-- XAML da calculadora simples -->

</Grid>

<Grid x:Name="CalcAvancada">

  <!-- XAML da calculadora simples -->

</Grid>

Put the two invisible calculators using the property Visibility

<Grid x:Name="CalcSimples" Visibility="Collapsed">

  <!-- XAML da calculadora simples -->

</Grid>

<Grid x:Name="CalcAvancada" Visibility="Collapsed">

  <!-- XAML da calculadora avançada -->

</Grid>

Code C#

Add the required dependency

using Windows.Graphics.Display;

During application startup check what is the current orientation of the phone using the property DisplayProperties.CurrentOrientation. Based on orientation, choose which calculator to display.

switch(DisplayProperties.CurrentOrientation)
{
    case DisplayOrientations.Portrait:
        //Modo retrato
        CalcSimples.Visibility = Visibility.Visible; //mostra a calculadora simples
        break;

    case DisplayOrientations.PortraitFlipped:
        //Modo retrato invertido
        CalcSimples.Visibility = Visibility.Visible; //mostra a calculadora simples
        break;

    case DisplayOrientations.Landscape:
        //Modo paisagem
        CalcAvancada.Visibility = Visibility.Visible; //mostra a calculadora avançada
        break;

    case DisplayOrientations.LandscapeFlipped:
        //Modo paisagem invertido (de cabeça para baixo)
        CalcAvancada.Visibility = Visibility.Visible; //mostra a calculadora avançada
        break;
}

This will be enough to display the two calculators based on orientation. However, if the user turns the phone when the application is already open the grids will not change. To avoid this use the event DisplayProperties.OrientationChanged to show or hide grids based on orientation.

DisplayProperties.OrientationChanged += (e) =>
{
    switch(DisplayProperties.CurrentOrientation)
    {
        case DisplayOrientations.Portrait:
            //Modo retrato
            CalcSimples.Visibility = Visibility.Visible; //mostra a calculadora simples
            CalcAvancada.Visibility = Visibility.Collapsed; //esconde a calculadora avançada
            break;

        case DisplayOrientations.PortraitFlipped:
            //Modo retrato invertido
            CalcSimples.Visibility = Visibility.Visible; //mostra a calculadora simples
            CalcAvancada.Visibility = Visibility.Collapsed; //esconde a calculadora avançada
            break;

        case DisplayOrientations.Landscape:
            //Modo paisagem
            CalcAvancada.Visibility = Visibility.Visible; //mostra a calculadora avançada
            CalcSimples.Visibility = Visibility.Collapsed; //esconde a calculadora simples
            break;

        case DisplayOrientations.LandscapeFlipped:
            //Modo paisagem invertido (de cabeça para baixo)
            CalcAvancada.Visibility = Visibility.Visible; //mostra a calculadora avançada
            CalcSimples.Visibility = Visibility.Collapsed; //esconde a calculadora simples
            break;
    }
}

Okay, now you have two calculators, one advanced and one simple, which change according to the orientation of the device, equal to the standard Windows calculator.