当前位置：文江博客话题详情

如何在WPF中使用DockStyle.Fill作为标准控件？

发布于 2024-09-08 17:07:55 字数 259 浏览 5 评论 0原文

我使用 Windows 窗体，创建一个面板，将控件放置在其中，并为它们提供 DockStyle.Fill 以最大程度地扩大其周围面板的大小。

在 WPF 中我想要同样的。我有一个 TabControl，我希望它的大小尽可能多地填充表单。我有一个功能区控件（RibbonControlsLibrary），并希望表单的其余部分以最大尺寸填充 TabControl。

（我不想像 Visual Studio 中的停靠那样停靠控件，只是旧的停靠机制）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城之時有危險 2024-09-15 17:07:55

WinForms 的 DockStyle.Fill 的 WPF 等效项是：

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

这是几乎所有控件的默认设置，因此一般情况下您无需执行任何操作即可让 WPF 控件填充其父容器：自动执行此操作。对于所有不将其子级挤压到最小尺寸的容器来说都是如此。

常见错误

现在，我将解释几个导致 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 无法按预期工作的常见错误。

1.显式高度或宽度

一个常见的错误是显式指定控件的宽度或高度。因此，如果您有这样的情况：

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

只需删除宽度和高度属性：

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

2。包含面板将控件挤压到最小尺寸

另一个常见的错误是让包含面板将控件挤压得尽可能紧。例如，垂直 StackPanel 将始终将其内容垂直压缩到尽可能小：

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

更改为另一个面板，您就可以开始了：

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

此外，任何高度为“自动”的 Grid 行或列也会类似地压缩其内容那个方向。

不挤压其子级的容器的一些示例包括：

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。

The WPF equivalent of WinForms' DockStyle.Fill is:

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

This is the default for almost controls, so in general you don't have to do anything at all to have a WPF control fill its parent container: They do so automatically. This is true for all containers that don't squeeze their children to minimum size.

Common Mistakes

I will now explain several common mistakes that prevent HorizontalAlignment="Stretch" VerticalAlignment="Stretch" from working as expected.

1. Explicit Height or Width

One common mistake is to explicitly specify a Width or Height for a control. So if you have this:

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

Just remove the Width and Height attributes:

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

2. Containing panel squeezes control to minimum size

Another common mistake is to have the containing panel squeezing your control as tight as it will go. For example a vertical StackPanel will always squeeze its contents vertically as small as they will go:

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

Change to another Panel and you'll be good to go:

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

Also, any Grid row or column whose height is "Auto" will similarly squeeze its content in that direction.

Some examples of containers that don't squeeze their children are:

ContentControls never squeeze their children (this includes Border, Button, CheckBox, ScrollViewer, and many others)
Grid with a single row and column
Grid with "*" sized rows and columns
DockPanel doesn't squeeze its last child
TabControl doesn't squeeze its content

Some examples of containers that do squeeze their children are:

StackPanel squeezes in its Orientation direction
Grid with an "Auto" sized row or column squeezes in that direction
DockPanel squeezes all but its last child in their dock direction
TabControl squeezes its header (what is displayed on the tab)

3. Explicit Height or Width further out

It's amazing how many times I see Grid or DockPanel given an explicit height and width, like this:

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

In general you never want to give any Panel an explicit Height or Width. My first step when diagnosing layout problems is to remove every explicit Height or Width I can find.

4. Window is SizeToContent when it shouldn't be

When you use SizeToContent, your content will be squeezed to minimum size. In many applications this is very useful and is the correct choice. But if your content has no "natural" size then you'll probably want to omit SizeToContent.

回复收藏 0 原文

方圜几里 2024-09-15 17:07:55

您只需说 DockPanel LastChildFill="True" 即可完成您想要的操作，然后确保您想要填充的内容实际上是最后一个子项！

Grid 是布局中的野兽，您可以用它来做大多数事情，但 DockPanel 通常是最外层布局面板的正确选择。这是一个伪代码示例：

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

    <MyFillingTabControl />
</DockPanel>

You can do what you want by just saying DockPanel LastChildFill="True" and then making sure what you want to be the filler is actually the last child!

The Grid is the beast of a layout that you can make do most anything, but the DockPanel is usually the right choice for your outermost layout panel. Here is an psuedocode example:

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

    <MyFillingTabControl />
</DockPanel>

回复收藏 0 原文

痴骨ら 2024-09-15 17:07:55

只需将控件包装在两行网格中即可。网格将自动使用为其提供的所有空间，您可以通过给行高度“*”来定义行以占用所有剩余空间。我的示例中的第一行（高度=“自动”）将占用功能区所需的空间。希望有帮助。

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

  <Ribbon Grid.Row="0" />

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

通过将“Grid.Row=..”属性添加到网格的子控件，它们将被分配给网格的行。然后网格将根据行定义来调整其子项的大小。

just wrap your controls in a grid with two rows. The grid will automatically use all space given to it and you can define the rows to take up all space left by giving them a height of "*". The first row in my example (Height="Auto") will take as much space as needed by the ribbon. Hope that helps.

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

  <Ribbon Grid.Row="0" />

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

By adding the "Grid.Row=.." attribute to child controls of the grid they get assigned to rows of the grid. Then the grid will size it's children as defined by the row definitions.

回复收藏 0 原文

诺曦 2024-09-15 17:07:55

我在这里尝试了很多方法但无法解决我的问题。（在控件中填写其他控件）

直到我发现 it

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

I was try many method here but can't solve my problem. (Fill other control in control)

Until i found it

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

Example:

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

For easy design

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

回复收藏 0 原文

~没有更多了~