Wockの標準コントロールにDockStyle.Fillを使用する方法


92

私はWindowsフォームから使用され、パネルを作成し、その中にコントロールを配置して、 DockStyle.Fillして、周囲のパネルに合わせてサイズを最大化できるようにしています。

WPFでも同じようにしたいです。私はTabControlを持っていて、そのサイズがフォームのできるだけ多くに収まるようにしたいと思っています。リボンコントロール(RibbonControlsLibrary)があり、フォームの残りの部分に最大サイズのTabControlを入力します。

(Visual Studioでのドッキングのようなコントロールをドッキングしたくありません。古いドッキングメカニズムだけです)

回答:


183

WinFormsのDockStyle.Fillに相当するWPFは次のとおりです。

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

これはほとんどのコントロールのデフォルトなので、 、通常、WPFコントロールがその親コン​​テナーを満たすために何もする必要はありません。それらは自動的に行われます。これは、子を最小サイズに圧縮しないすべてのコンテナに当てはまります。

よくある間違い

防止するいくつかの一般的な間違いについて説明します HorizontalAlignment="Stretch" VerticalAlignment="Stretch"期待どおりに機能ます。

1.明示的な高さまたは幅

よくある間違いの1つは、コントロールの幅または高さを明示的に指定することです。だからこれがあれば:

<Grid>
  <Button Content="Why am I not filling the window?" Width="200" Height="20" />
  ...
</Grid>

幅と高さの属性を削除するだけです。

<Grid>
  <Button Content="Ahhh... problem solved" />
  ...
</Grid>

2.パネルが含まれているため、コントロールが最小サイズに縮小される

もう1つのよくある間違いは、それを含むのと同じくらいタイトにコントロールを押し込んでいるパネルを含むことです。たとえば、垂直方向のStackPanelは、常に内容を垂直方向にできるだけ小さく圧縮します。

<StackPanel>
  <Button Content="Why am I squished flat?" />
</StackPanel>

別のパネルに変更すると、次のようになります。

<DockPanel>
  <Button Content="I am no longer squished." />
</DockPanel>

また、高さが「自動」であるグリッドの行または列も、同様にその方向にコンテンツを圧縮します。

子供を圧迫しないコンテナの例は次のとおりです。

  • ContentControlsが子を圧迫することはありません(これには、Border、Button、CheckBox、ScrollViewer、およびその他の多くが含まれます)
  • 単一の行と列を持つグリッド
  • 「*」サイズの行と列のグリッド
  • DockPanelは最後の子を圧迫しません
  • TabControlはそのコンテンツを絞り込みません

子を圧迫するコンテナの例は次のとおりです。

  • StackPanelがその向き方向に圧迫する
  • 「自動」サイズの行または列がその方向に圧縮されたグリッド
  • DockPanelは、最後の子以外のすべてをドック方向に圧縮します。
  • TabControlはそのヘッダーを圧縮します(タブに表示される内容)

3.さらに明確な高さまたは幅

次のように、GridまたはDockPanelが明示的な高さと幅を与えられた回数を見るのは驚くべきことです。

<Grid Width="200" Height="100">
  <Button Content="I am unnecessarily constrainted by my containing panel" />
</Grid>

一般に、どのパネルにも明示的な高さまたは幅を与えたくありません。レイアウトの問題を診断するときの最初のステップは、見つけたすべての明示的な高さまたは幅を削除することです。

4.本来あるべきではないウィンドウがSizeToContentである

SizeToContentを使用すると、コンテンツは最小サイズに圧縮されます。多くのアプリケーションでは、これは非常に便利で正しい選択です。ただし、コンテンツに「自然な」サイズがない場合は、SizeToContentを省略できます。


ここにかなり複雑な新しいレイアウト関連の質問を残しました。ここであなたの答えを読んだ後、あなたはそれを理解できると思っています。乾杯
Berryl

7
正解です。なんとかしてボーナスポイントをあげられたらいいのに。:)
ジム・ラデン

@ジム・ラデン:この質問に賞金を追加して、レイバーンズにポイントを割り当てることができます;)
シトロナス

1
今後の読者への補足:再コンパイルするまでデザインビューで更新されません。
David

「<Button Content = "ウィンドウを塗りつぶさないのはなぜですか?" Width = "200" Height = "20" />」が原因で問題が発生しました。XD
Jack Frost

7

言うだけでやりたいことができる DockPanel LastChildFill="True"、それからあなたがフィラーになりたいものが実際に最後の子であることを確認してください!

グリッドは、ほとんど何でもできるレイアウトの野獣ですが、DockPanelは通常、最も外側のレイアウトパネルに適した選択肢です。以下は、疑似コードの例です。

<DockPanel LastChildFill="True">
    <MyMenuBar DockPanel.Dock="Top"/>
    <MyStatus DockPanel.Dock="Bottom"/>

    <MyFillingTabControl />
</DockPanel>

5

2行のグリッドでコントロールをラップするだけです。グリッドは、指定されたすべてのスペースを自動的に使用します。行に高さ「*」を指定することで、残りのすべてのスペースを占めるように行を定義できます。この例の最初の行(Height = "Auto")は、リボンが必要とするだけのスペースを取ります。お役に立てば幸いです。

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Ribbon Grid.Row="0" />

  <TabPage Grid.Row="1" />
</Grid>

「Grid.Row = ..」属性をグリッドの子コントロールに追加することにより、それらはグリッドの行に割り当てられます。次に、グリッドは行定義で定義されているように、その子のサイズを変更します。


ありがとう、正しい方向に進みます。グリッドを挿入することができましたが、今はまだ利用可能なすべてのサイズを使用するようにTabControlに指示する必要がありますか?どうすればそれを達成できますか?
シトロナ

例に示すように、TabControlの「Grid.Row」属性を追加し、対応する行定義の高さを「*」にする必要があります。
andyp

0

私は多くの方法をここで試しましたが、私の問題を解決できません。(他のコントロールをコントロールに入力します)

見つけるまで

<Name_Control Height="auto" Width="auto"/>
//default
//HorizontalAlignment="Stretch" 
//VerticalAlignment="Stretch"

例:

//UserControl:
<UserControl Name="UC_Test" Height="auto" Width="auto" />
//Grid: 
<Grid Name="Grid_test" Grid.ColumnSpan="2" Grid.Row="2" />
//Code: 
Grid_test.Children.Add(UC_Test);

簡単設計

<UserControl Name="UC_Test" Height="100" Width="100" />
//Code
Grid_test.Children.Add(UC_Test);
UC_Test.Width = Double.NaN;
UC_Test.Height = Double.NaN;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.