0

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

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

现在它看起来像这样：

布局

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

4

2 回答 2

8

Grid是一个很好的控件，用于指定如何使用可用空间。我喜欢使用 *（星号）大小并将每个 * 视为百分比。所以，如果我想让两列各占屏幕的 50%，它们的宽度将是 50* 和 50*（尽管从技术上讲，只要它们是相等的数字，它们就会占用相等的空间，所以 1* 和 1*会做同样的事情）。

Grid的问题在于它试图使用你给它的所有空间。因此，如果您在方形显示器（4:3 纵横比）上设计布局，然后将其显示在宽屏显示器（16:9 纵横比）上，您的所有方形都会变成矩形！

您可以通过监视大小何时更改并确保宽度始终是高度的某个百分比来在代码中处理此问题。但这是一个丑陋的解决方案，并留下了另一个挑战：字体大小。

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

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

所以，从一个Grid开始，给它一个指定的宽度和高度，然后划分行和列，使它看起来像你上面的图像。从您想要的任何宽度和高度开始，但我建议 1366 x 768，因为这是Windows 8推荐的最低分辨率。最后，将Grid包装在ViewBox中，您就完成了！

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

开发支持、设计支持和更多的好处：http: //bit.ly/winappsupport

于 2013-02-26T20:10:11.973 回答
0

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

于 2013-02-26T07:42:06.110 回答