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>

现在看起来像这样：

layout

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

Answer 1

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

网格的问题在于它会尝试使用您提供的所有空间。因此，如果您在方形显示器上设计布局（4：3宽高比），然后在宽屏显示器上显示（16：9宽高比），所有方块都变为矩形！

你可以在代码中处理这个问题，只要大小发生变化就可以监控，并确保宽度始终是高度的某个百分比。但这是一个丑陋的解决方案，还有一个挑战：字体大小。

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

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

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

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

开发人员的支持，设计支持和更加出色的善意：http://bit.ly/winappsupport

Answer 2

我认为StackPanels不是复杂布局的最佳选择。我需要使用具有不同宽度/高度比的网格，以便在需要时使用跨度列/行的不同列/行。然后，您将获得每种分辨率的弹性布局。

布局自动缩放Windows 8

2 个答案: