布局自动缩放Windows 8

Question

我想做一个简单的布局:这是我的代码:

<ScrollViewer Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" VerticalContentAlignment="Stretch">
    <StackPanel  Name="MainStack" Orientation="Horizontal">     
        <StackPanel Width="800" Height="800" Margin="140,0,10,0" Background="#FFAC3737"/>
            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel  Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="#FF5686AE" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="#FF5583AA" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="#FF5180A8" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="#FF426E93" HorizontalAlignment="Left" />              
            </StackPanel>    
        </StackPanel>
    </StackPanel>
</ScrollViewer>

现在它看起来像这样:

将此布局扩展到所有分辨率的最佳方法是什么？

Answer 1

Grid是一个很好的控件,用于指定您希望如何使用可用空间.我喜欢使用*(星级)大小调整并将每个*视为一个百分比.因此,如果我想要两个列占据屏幕的50%,它们的宽度将是50*和50*(虽然从技术上讲,只要它们是相同的数字,它们将占用相等的空间,因此1*和1*会做同样的事情).

Grid的问题是它试图使用你给它的所有空间.因此,如果您在方形显示器上设计布局(4:3宽高比),然后将其显示在宽屏显示器上(16:9宽高比),所有方块都变为矩形!

您可以通过监视大小何时更改并确保宽度始终为高度的某个百分比来处理代码.但这是一个丑陋的解决方案,还有一个挑战:字体大小.

很多时候,当您创建一个非常特定的布局时,您希望它能够完美地扩展到所有屏幕尺寸,包括文本.但仅仅因为网格适应可用的房地产并不意味着字体大小也会自动扩大.也就是说,除非你使用ViewBox.

ViewBox是一个很棒的控件.您可以在其中放置具有特定宽度和高度的任何内容,并且随着ViewBox的可用空间增加或减少,它会自动缩放其中的所有内容.ViewBox为您保持正确的宽高比,并自动进行字体缩放!

因此,从Grid开始并为其指定宽度和高度,然后将行和列分开以使其看起来像上面的图像.从你想要的任何宽度和高度开始,但我建议使用1366 x 768,因为这是Windows 8 推荐的最低分辨率.最后,将网格包装在ViewBox中,你就完成了!

<ViewBox>   
   <Grid Width="1366" Height="768">
   ...
   </Grid>
</ViewBox>

开发支持,设计支持以及更多令人敬畏的优点:http://bit.ly/winappsupport