Windows 8 如何做屏幕尺寸感知布局?
我在做一个棋盘游戏。为了构建董事会,我执行以下操作:Windows 8 如何做屏幕尺寸感知布局?,windows-8,windows-store-apps,winrt-xaml,Windows 8,Windows Store Apps,Winrt Xaml,我在做一个棋盘游戏。为了构建董事会,我执行以下操作: // adapted from http://code.msdn.microsoft.com/windowsapps/Reversi-XAMLC-sample-board-816140fa/sourcecode?fileId=69011&pathId=706708707 // This is shit code. async void PlayGame_Loaded(object sender, RoutedE
// adapted from http://code.msdn.microsoft.com/windowsapps/Reversi-XAMLC-sample-board-816140fa/sourcecode?fileId=69011&pathId=706708707
// This is shit code.
async void PlayGame_Loaded(object sender, RoutedEventArgs e)
{
foreach (var row in Game.ALL_ROWS)
{
boardGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
var maxColIndex = Game.ALL_ROWS.Max();
foreach (var col in Enumerable.Range(0, maxColIndex))
{
boardGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
// ...
}
(请随意建议其他方法。)
基本上,我根据预先设置的高度和宽度创建了一组行和列,并用板空间填充这些行和列。当我将行和列的长度设置为适合我的笔记本电脑时,这种方法可以很好地工作,但很明显,它在具有不同分辨率的设备上不起作用。(例如,它在曲面RT上被截断。)我如何解决这个问题?我可以指定作为父容器一部分的边长吗?这里的最佳做法是什么?假设您要绘制的板具有恒定的行/列数,您最好使用a。我使用以下方法:
var bounds = Window.Current.Bounds;
double height = bounds.Height;
double width = bounds.Width;
找出我的应用程序所在的屏幕分辨率,然后根据屏幕大小重新调整网格项目的大小
编辑:
因此,对于您的代码,我将:
async void PlayGame_Loaded(object sender, RoutedEventArgs e)
{
var bounds = Window.Current.Bounds;
double BOARD_GRID_SIDE_LENGTH = bounds.Height;
double BOARD_GRID_SIDE_WIDTH = bounds.Width;
foreach (var row in Game.ALL_ROWS)
{
boardGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(BOARD_GRID_SIDE_LENGTH) });
}
var maxColIndex = Game.ALL_ROWS.Max();
foreach (var col in Enumerable.Range(0, maxColIndex))
{
boardGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(BOARD_GRID_SIDE_WIDTH) });
}
// ...
}
声音解决方案是划分页面,使
boardGrid
占据屏幕的2/3,其余内容(按钮、计时器、记分板等)占据另三分之一。
其次,将其封装在一个
Viewbox
元素中,以便在进入不同的视图模式(全视图、纵向视图、快照视图、填充视图)时重新计算电路板尺寸
最后,确保页面继承
LayoutAwarePage
而不是page
,以便它优雅地处理视图模式的更改
这是一个粗略的模型:
<common:LayoutAwarePage
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
x:Class="ApexKT.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:common="using:MyApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:snaps="http://schemas.microsoft.com/netfx/2007/xaml/presentation"
mc:Ignorable="d" >
<Grid x:Name="bigGrid">
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="OneThird">
<TextBlock x:Name="ScoreBoard" Text="Score:" />
<Button x:Name="Button1" Content="Button 1" Click="" />
</StackPanel>
<Viewbox x:Name="TwoThirds">
<Viewbox.Transitions>
<TransitionCollection>
<ContentThemeTransition />
</TransitionCollection>
</Viewbox.Transitions>
<Grid x:Name="boardGrid"><!-- insert row and column definitions here, or hard code them --></Grid>
</Viewbox>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="Snapped" />
<VisualState x:Name="FullScreenPortrait" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
`