0

ボードゲームを作っています。ボードを構築するために、私は次のことを行います。

    // 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) });
        }

        // ...
     }

（別のアプローチを自由に提案してください。）

基本的に、事前に設定された高さと幅に基づいて行と列の束を作成し、それらの行と列をボードスペースで埋めます。これは、ラップトップに合わせて行と列の長さを設定すると正常に機能しますが、解像度が異なるデバイスでは明らかに機能しません。（たとえば、Surface RTでは切り捨てられます。）これを回避するにはどうすればよいですか？親コンテナの一部である一辺の長さを指定できますか？ここでのベストプラクティスは何ですか？

4

3 に答える 3

1

描画するボードの行数/列数が一定であると仮定すると、おそらくViewBoxを使用するのが最善の策です。

于 2013-03-06T10:35:40.400 に答える
1

私はこれを使用します：

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) });
        }

        // ...
     }
于 2013-03-08T15:24:22.777 に答える
0

boardGrid適切な解決策は、画面の 2/3 が画面の 2/3 になり、残りのコンテンツ (ボタン、タイマー、スコアボードなど) が残りの 3 分の 1 になるようにページを分割することです。次に、異なる表示モード (Full、Portrait、Snapped、Filled)に移動したときにボードの寸法が再計算されるように、要素 内にそれ
を囲みます。優雅にViewbox
LayoutAwarePagePage

大まかなモックアップは次のとおりです。

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

`

于 2013-03-09T20:30:48.937 に答える