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

グリッドは、使用可能なスペースをどのように使用するかを指定するための優れたコントロールです。私は * (星) サイズを使用するのが好きで、それぞれの * をパーセンテージと考えています。したがって、2 つの列がそれぞれ画面の 50% を占めるようにしたい場合、それらの幅は 50* と 50* になります (技術的には、2 つの列が同じ数である限り、同じスペースを占めるので、1* と 1* になります)。同じことをするでしょう）。

Gridの問題は、与えられたすべてのスペースを使用しようとすることです。したがって、正方形のモニター (アスペクト比 4:3) でレイアウトをデザインし、それをワイドスクリーン モニター (アスペクト比 16:9) に表示すると、すべての正方形が長方形になります!

サイズが変更されるたびに監視し、幅が常に高さの何パーセントかを確認することで、コードでこれに対処することができます。しかし、これは見苦しい修正であり、もう 1 つの課題が残ります。それは、フォント サイズです。

非常に特殊なレイアウトを作成する場合、テキストを含むすべての画面サイズに完全に合わせたいと思うことがよくあります。しかし、Gridが使用可能な領域に適応するからといって、フォント サイズも自動的に拡大されるわけではありません。つまり、ViewBoxを使用しない限り。

ViewBoxは素晴らしいコントロールです。その中には特定の幅と高さで何でも入れることができ、ViewBoxの使用可能なスペースが増減すると、その中のすべてが自動的にスケーリングされます。ViewBoxは正しい縦横比を維持し、フォントのスケーリングも自動的に行います。

したがって、Gridから始めて、幅と高さを指定してから、行と列を分割して上の画像のようにします。必要な幅と高さから始めますが、 Windows 8 で推奨される最低の解像度であるため、1366 x 768 をお勧めします。最後に、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 に答える