Different windows (xaml) for Landscape and Portrait

Question

Different windows (xaml) for Landscape and Portrait

Navigation

#1 by (1 votes)

1

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

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

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

xamlcode:

<Pagexmlns="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>

c# winforms visual-studio-2015 windows-phone-8-1

asked by anonymous 12.01.2016 / 00:20

1 answer

Slow Motion in Android View Pager Transition How to get the value of a Dropdownlist to choose the action to execute

score 1 · Accepted Answer

First create two Grids , one with the simple calculator and in portrait mode, and another with the advanced calculator in landscape mode. One can stand on the other. To see Designer in landscape mode, go to 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>

Place the two invisible calculators using the Visibility

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

  <!-- XAML da calculadora simples -->

</Grid>

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

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

</Grid>

C # code

Add the required dependency

using Windows.Graphics.Display;

During application startup check the current phone orientation using the DisplayProperties.CurrentOrientation property. Based on the 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 both 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 DisplayProperties.OrientationChanged event to show or hide the grids based on the 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;
    }
}

Now, you have two calculators, one advanced and one simple, that change according to the orientation of the device, just like the standard Windows calculator.