XAML 布局自动缩放Windows 8

4urapxun 于 2023-09-28 发布在 Windows

关注(0)|答案(2)|浏览(148)

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

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

现在它看起来像这样：

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

xaml

来源：https://stackoverflow.com/questions/15083609/layout-autoscale-windows-8

2条答案

按热度按时间

twh00eeo1#

Grid是指定如何使用可用空间的绝佳控件。我喜欢使用 （星星）大小，并认为每个 * 作为一个百分比。所以，如果我想让两列各占屏幕的50%，它们的宽度将是50 和50*（尽管从技术上讲，只要它们是相等的数字，它们将占据相等的空间，所以1* 和1* 将做同样的事情）。
Grid的问题在于它会尝试使用您给予它的所有空间。因此，如果您在方形显示器（4：3宽高比）上设计布局，然后将其显示在宽屏显示器（16：9宽高比）上，则所有正方形都将变成矩形！

你可以在代码中处理这个问题，方法是监视大小的变化，并确保宽度总是高度的某个百分比。但这是一个丑陋的解决方案，并留下了一个更多的挑战来应对：字体大小。
很多时候，当你创建一个非常具体的布局时，你希望它能完美地缩放到所有屏幕尺寸，包括文本。但是，仅仅因为Grid适应了可用真实的并不意味着字体大小也会自动放大。也就是说，除非您使用ViewBox。

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

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

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

赞(0）回复(0）举报 2023-09-28

bnlyeluc2#

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

赞(0）回复(0）举报 2023-09-28

我来回答

XAML 布局自动缩放Windows 8

2条答案

相关问题

热门标签

最新问答