Xaml 布局自动缩放Windows 8

Xaml 布局自动缩放Windows 8,xaml,windows-8,Xaml,Windows 8,我想做一个简单的布局: 这是我的代码: <ScrollViewer Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" VerticalContentAlignment="Stretch"> <StackPanel Name="MainStack" Orientation="Horizontal">

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

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

现在看起来是这样的:


将此版面缩放到所有分辨率的最佳方法是什么?

我认为StackPanels不是复杂版面的最佳选择。当需要时,我会为不同的列/行使用不同宽高比的网格,并使用跨列/行。然后,您将为每个分辨率提供弹性布局。

网格是指定如何使用可用空间的一个很好的控件。我喜欢使用*(星形)尺寸,并将每个*作为百分比考虑。所以,如果我想让两列分别占据屏幕的50%,它们的宽度将是50*和50*(虽然从技术上讲,只要它们是相等的数字,它们将占据相等的空间,所以1*和1*将做同样的事情)

网格的问题在于它试图使用您给它的所有空间。所以,如果你在正方形显示器(4:3纵横比)上设计一个布局,然后在宽屏显示器(16:9纵横比)上显示它,那么你所有的正方形都会变成矩形

您可以在代码中通过监视大小的变化来处理这个问题,并确保宽度始终是高度的某个百分比。但这是一个丑陋的修正,留下了一个更大的挑战:字体大小

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

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

因此,从一个网格开始,给它指定一个宽度和高度,然后将行和列分开,使其看起来像上面的图像。从任意宽度和高度开始,但我建议使用1366x768,因为这是Windows8的最低推荐分辨率。最后,将网格包装在视图框中,就完成了

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

...

开发支持、设计支持和更多令人敬畏的优点:

您希望它看起来像什么?如图所示。但现在问题来了,因为我把高度设置为800px,在不同的分辨率下,它看起来会不同。明白了。所以你想要的,本质上,是红场总是有相同的宽度和高度,不管分辨率如何?您可以通过执行垂直对齐=拉伸来轻松实现高度,但问题是如何执行宽度。这基本上是你的问题?答案太棒了!非常感谢你。这就是我需要的:)