web-dev-qa-db-ja.com

WPFでスケーラブルでスクロール可能なコンテンツのアスペクト比を維持するにはどうすればよいですか?

私はWPFにかなり慣れていないので、解決が少し難しいと思われる問題に遭遇しました。基本的に、スケーラブルでありながら正方形(または他の任意の)アスペクト比を維持する4x4グリッドが必要です。これは実際にはかなりトリッキーに見えますが、かなり一般的な要件であると想像できるので、これには驚かされます。

私はこのようなグリッド定義から始めます:

<Grid>
  <Grid.RowDefinitions>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
  </Grid.ColumnDefinition>
  ...
</Grid>

これを伸ばすように設定すると、ウィンドウまたはそれを入れたコンテナーを塗りつぶすことができます。行と列は均一ですが、アスペクト比は固定されていません。

次に、それをStackPanelに入れて、使用可能なスペースを使用してみました。助けにはならなかった。 Viewboxを思い出したとき、私が一番気になったのは何でしたか。

<StackPanel Orientation="Horizontal">
  <Viewbox>
    <Grid Height="1000" Width="1000"> <!-- this locks aspect ratio -->
      <Grid.RowDefinitions>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
      </Grid.ColumnDefinition>
      ...
    </Grid>
  </viewbox>
  <Label HorizontalAlignment="Stretch">Extra Space</Label>
</StackPanel>

これでコンテンツがスケーリングされ、アスペクト比が維持されます。問題は、ウィンドウの幅が十分でない場合、グリッドの一部が画面からはみ出していることです。その場合は、そこまでスクロールできるようにしたいと思います。同様に、最小サイズが必要な場合があります。これにより、垂直方向のスクロールも発生する可能性があります。

StackPanelとGridを(個別に)適切なScrollViewerコンテナに配置してみましたが、コンテンツがウィンドウに合わせて拡大縮小されなくなりました。フルサイズになります。

それで、どうやってこれを行うのですか?私は間違った木を吠えていますか?これを行うより良い/より簡単な方法はありますか?

37
cletus

コンテンツ(グリッド)を ViewBox 内に配置し、 Viewbox.Stretch PropertyStretch.Uniform に設定する必要があります

Viewboxコントロールは、子要素を拡大またはスケーリングするために使用され、子の拡大方法を制御できます。 examples をここで確認してください。

alt text
(ソース: Microsoft.com

74
Pop Catalin

この場合、最善の策は niformGrid です。これは、NxNグリッドが必要な場合にのみ役立ちます。

5
user7116