如何设置纵向和横向视图？

Question

您好我正在开发一个Windows手机应用程序，我需要设置支持肖像和横向视图没有任何对齐问题。

我正在使用我的代码，如下所示

<Grid Height="113" VerticalAlignment="Bottom" Grid.Row="3">
        <Grid.Background>
            <ImageBrush  ImageSource="Images/footer_bg .png"/>
        </Grid.Background>
        <StackPanel Margin="0,0,0,0" HorizontalAlignment="Left" >
            <Button BorderThickness="0"  Click="Home" Height="87">
                <Image Source="Images/home_30.png"  Stretch="Uniform"  VerticalAlignment="Top" Height="66" Width="68"  />
            </Button>
            <TextBlock Foreground="White" Text="Home" Padding="30,0,0,0" FontSize="20" FontFamily="Arial"></TextBlock>
        </StackPanel>
        <StackPanel Margin="60,0,224,0"  x:Name="reg"  Visibility="Visible">
            <Button BorderThickness="0"   Width="120"  Click="register" Height="87">
                <Image Source="Images/register_30.png"  Stretch="Uniform"  VerticalAlignment="Top" Height="66" Width="68"  />
            </Button>
            <TextBlock  Foreground="White" HorizontalAlignment="Center"  FontSize="20" FontFamily="Arial" Text="Register"></TextBlock>
        </StackPanel>
        <StackPanel Margin="60,0,224,0" x:Name="regi" >
            <Button BorderThickness="0"  Click="account" Width="120"  Height="87" >
                <Image Source="Images/register_30.png"   Stretch="Uniform"  VerticalAlignment="Top" Height="66" Width="68"  />
            </Button>
            <TextBlock Foreground="White" HorizontalAlignment="Center"  FontSize="20" FontFamily="Arial" Text="Account" ></TextBlock>
        </StackPanel>
        <StackPanel HorizontalAlignment="Center" Width="56" Margin="180,20,50,0">
            <Grid>
                <Image Source="Images/social_48.png"  Stretch="Uniform" x:Name="imgShareOff"  VerticalAlignment="Center"  ManipulationStarted="imgShareOff_ManipulationStarted_1"   />
                <Image Source="Images/social_48.png"  Stretch="Uniform" x:Name="imgShareOn" VerticalAlignment="Top" ManipulationStarted="imgShareOn_ManipulationStarted_1"    />
            </Grid>
            <TextBlock Foreground="White" Margin="-42,10,-27,0" Padding="10,0,0,0" FontSize="20" FontFamily="Arial" Text="Social Share"></TextBlock>
        </StackPanel>
        <StackPanel HorizontalAlignment="Right" Margin="0,0,0,0" Width="485">
            <Button BorderThickness="0"  Margin="352,0,0,0"  Click="Contact" Height="87">
                <Image Source="Images/msg_30.png"  Stretch="Uniform"  VerticalAlignment="Top" Height="66" Width="68"  />
            </Button>
            <TextBlock Foreground="White" Margin="352,0,0,0" Padding="20,0,0,0" FontSize="20" FontFamily="Arial" Text="Contact Us"></TextBlock>
        </StackPanel>
    </Grid>

我得到的结果如下图所示。在景观视图中我需要在左右两侧获得适当的空间。我必须得到适当的景观视图

Answer 1

您可以将菜单元素放在一个包含4列的网格中，每列都有一个宽度为“*”的列。这样菜单跨越屏幕宽度。 或者将它们放在StackPanel中，其中Horizo​​ntalAlignment为“Center”。这样菜单具有对称边距。

但是，不应该这样做，你应该阅读最佳实践，设计指南和类似的东西：WP应用程序的菜单始终位于硬件按钮的边缘。它不使用渐变甚至灰度。如果您不遵守这些规则，您的应用程序会对WP用户感到“错误”，并且评分会很差。