1

Estou programando em C# utilizando o Visual Studio Enterprise 2015 aplicações para Windows Phone 8.1.

Consegui fazer uma aplicação simples, uma calculadora, porém gostaria de saber: como eu faço para utilizar um xaml para o modo paisagem e um para o modo retrato, neste caso eu teria uma calculadora simples no modo retrato e uma calculadora avançada em paisagem.

As imagens abaixo apresentam isso na calculadora padrão do Windows Phone.

Calculadora 01

Calculadora 02

Código 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>

3

1 Resposta 1

1

Primeiro crie dois Grids, um com a calculadora simples e no modo retrato, e outra com a calculadora avançada no modo paisagem. Uma pode ficar sobre a outra. Para ver o Designer em modo paisagem, vá em Desing > Device Window e altere a orientação.

<Grid x:Name="CalcSimples">

  <!-- XAML da calculadora simples -->

</Grid>

<Grid x:Name="CalcAvancada">

  <!-- XAML da calculadora simples -->

</Grid>

Coloque as duas calculadoras invisiveis usando a propriedade 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ódigo C#

Adicione a dependência necessária

using Windows.Graphics.Display;

Durante a inicialização do aplicativo verifique qual é a orientação atual do telefone usando a propriedade DisplayProperties.CurrentOrientation. Baseado na orientação, escolha qual calculadora exibir.

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;
}

Isso será suficiente para exibir as duas calculadoras baseado na orientação. Entretanto se o usuário virar o telefone quando o aplicativo já estiver aberto os grids não irão mudar. Para evitar isso utilize o evento DisplayProperties.OrientationChanged para mostrar ou esconder os grids baseado na orientação.

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;
    }
}

Pronto, agora você tem duas calculadoras, uma avançada e outra simples, que mudam conforme a orientação do aparelho, igual a calculadora padrão do Windows.

1
  • Muito obrigado \o/
    – Giovani
    Commented 21/03/2016 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .