WPF 中的停靠和锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19166718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dock and Anchor in WPF
提问by Matt
I am coming from a WinForms background and am starting to learn WPF. I've gone through a set of tutorials at Pluralsight, but am having a little difficulty with handling resizing.
我来自 WinForms 背景并且开始学习 WPF。我已经在 Pluralsight 学习了一组教程，但在处理调整大小时遇到了一些困难。
When resizing, my textboxes don't seem to be "anchoring" in the way I would want. I'm including the xaml below with notes in it as to the behavior I am looking for. Any feedback regarding best practices would be very much appreciated. The code just "feels" a little awkward to me, but I'm not sure if that is because it's just new to me, or if there are easier/better ways of doing what I am attempting.
调整大小时，我的文本框似乎没有以我想要的方式“锚定”。我在下面的 xaml 中包含了关于我正在寻找的行为的注释。非常感谢有关最佳实践的任何反馈。代码对我来说只是“感觉”有点尴尬，但我不确定这是否是因为它对我来说只是新的，或者是否有更简单/更好的方法来做我正在尝试的事情。
To get an idea of what things look like without needing to load the XAML below - here are before and after resizing the form screenshots. Before Resize http://dboasis.com/screenshots/beforeresize.jpgAfter Resize http://dboasis.com/screenshots/afterresize.jpg
为了在不需要加载下面的 XAML 的情况下了解事情的样子 - 这里是调整表单屏幕截图大小之前和之后。 调整大小前 http://dboasis.com/screenshots/beforeresize.jpg调整大小后 http://dboasis.com/screenshots/afterresize.jpg
I'm hoping for suggestions both how to handle the resize issues, as well as best practices after seeing how I've attempted to do it in the XAML.
在看到我如何尝试在 XAML 中执行此操作后，我希望获得有关如何处理调整大小问题的建议以及最佳实践。
Also - the xaml does implement DevExpress controls - if anyone wants me to redo the form and not use 3rd party controls so they more easily make suggestions, I am happy to do so.
此外 - xaml 确实实现了 DevExpress 控件 - 如果有人希望我重做表单而不使用 3rd 方控件，以便他们更容易提出建议，我很乐意这样做。
<dx:DXWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="DXTemplateSandbox.MainWindow"
Title="MainWindow" Height="437" Width="641">
<Grid>
<dx:DXTabControl x:Name="tabcntMainTab">
<dx:DXTabItem x:Name="tabUserList" Header="User List">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition x:Name="SelectLabel" Height="30" />
<RowDefinition x:Name="OpenDataFile" Height="34" />
<RowDefinition x:Name="DataGridLayoutRow" Height="185*" />
<RowDefinition x:Name="AppPrefsInfo" Height="110" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10,0">
<!--
The DataFileLocation not resizing the width. How do I instead lock the vertical size, but allow width to
resize with form?
-->
<TextBox Name="DataFileLocation" Width="419" Margin="0,5" HorizontalAlignment="Stretch" />
<!--
How do I get the SelectData button stay immediately to the right of the DatFileLocation textbox when resizing?
-->
<Button Name="SelectData" Content="..." Width="40" Margin="5" Click="SelectData_Click"/>
<DockPanel>
<!-- I would like the "Go" button to stay anchored to the right when resizing. -->
<Button x:Name="GoButton"
Content="Go"
Width="66"
DockPanel.Dock="Right"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="50,5,5,5"
Click="GoButton_Click" />
</DockPanel>
</StackPanel>
<!--
-->
<dxg:GridControl Grid.Row="2" Margin="5" >
<dxg:GridControl.View>
<dxg:TableView ShowGroupPanel="False"/>
</dxg:GridControl.View>
</dxg:GridControl>
<Label Content="Select Data File" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" Width="91"/>
<!--
Is using a grid inside a parent grid cell the best way of doing this? I'm using stackpanels in each of the rows in the
child grid. Is there a better way of doing this?
-->
<Grid x:Name="AppPrefsGrid" Grid.Row="3" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--
Ideally I would like the text boxes to grow and shrink at the same rate as form is resized, and leave the labels the same width. I don't know
if this is practical however.
-->
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label Content="Registration Name:" Width="112" Margin="5"/>
<TextBox Name="RegNameTextBox" Width="175" Margin="5" IsEnabled="False"/>
<Label Content="Install Date:" Width="84" Margin="10,5,5,5"/>
<TextBox Name="InstallDateTextBox" Width="175" Margin="5" IsEnabled="False"/>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Label Content="Registration Number:" Width="112" Margin="5"/>
<TextBox Name="RegNumberTextBox" Width="175" Margin="5" IsEnabled="False"/>
<Label Content="Data File Version:" Width="84" Margin="10,5,5,5"/>
<TextBox Name="DataVersionTextBox" Width="175" Margin="5" IsEnabled="False"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<Label Content="Edition Code:" Width="112" Margin="5"/>
<TextBox Name="EditionCodeTextBox" Width="175" Margin="5" IsEnabled="False"/>
<Label Content="User Count:" Width="84" Margin="10,5,5,5"/>
<TextBox Name="UserCountTextBox" Width="175" Margin="5" IsEnabled="False"/>
</StackPanel>
</Grid>
</Grid>
</dx:DXTabItem>
<dx:DXTabItem x:Name="tabKeyGen" Header="Key Generator"/>
</dx:DXTabControl>
</Grid>
回答by Rachel
You have multiple problems here that appear to be because you are not using the correct layout panel for your controls.
您在这里有多个问题，似乎是因为您没有为控件使用正确的布局面板。
By default, the size of a control is based on the behavior of the parent.
默认情况下，控件的大小基于父级的行为。
For example, items placed inside a Gridwill stretch to fill all available space given to them inside the Grid Cell. If the Grid Row/Column definition has a Height/Width set to Autoit means it will draw the control at whatever size the control wants. If it's set to a fixed size such as 100, then it will draw the control at that size. If it's set to a *size, it will draw the control using a percentage of the remaining space.
例如，放置在 a 内的项目Grid将拉伸以填充网格单元内给予它们的所有可用空间。如果 Grid Row/Column 定义有一个 Height/Width 设置为Auto它意味着它将以控件想要的任何大小绘制控件。如果将其设置为固定大小，例如100，则它将以该大小绘制控件。如果它被设置为一个*大小，它将使用剩余空间的百分比来绘制控件。
This behavior can be overridden by properties on the control itself, such as HorizontalAlignmentand VerticalAlignment, or setting properties such as the Height, Width, and Margin.
这种行为可以通过性能上的控制本身，如被覆盖HorizontalAlignment和VerticalAlignment，或设置属性，如Height，Width，和Margin。
So, to address some of your specific problems, start by removing those stack panels hosting your label/textbox combinations and replace them with a proper 3x4 Grid. Put your labels in columns 0 and 2 and give that ColumnDefinitiona fixed size. Put your TextBoxes in columns 1 and 3, and leave them as a *size. Remember, a *size is a percentage, so 2* in one column and 3* in another column will mean there are 5*available total, and column 1 will take up 2/5 of the space while column2 will take up 3/5th of the space.
因此，要解决您的一些特定问题，请先移除那些托管标签/文本框组合的堆栈面板，并用适当的 3x4 替换它们Grid。将您的标签放在第 0 列和第 2 列中，并为其ColumnDefinition指定固定大小。将您的文本框放在第 1 列和第 3 列中，并将它们保留为*大小。请记住，*大小是一个百分比，因此一列中的 2* 和另一列中的 3* 表示有5*可用总数，第 1 列将占用 2/5 的空间，而第 2 列将占用空间的 3/5 .
To get your DataFileLocationto resize as the form resizes, simply remove the Widthproperty and let it size to whatever size the grid cell is.
要让您DataFileLocation在表单调整大小时调整大小，只需删除该Width属性并让它调整为网格单元格的大小。
To get the SelectDatabutton to stay docked to the right of the SelectDatatextbox, place both in a DockPanel. Dock the Button to the Right side, and allow the TextBox to fill all remaining space. You will have to set the TabIndex if you want the tab key to cycle through them as expected.
要使SelectData按钮保持停靠在SelectData文本框的右侧，请将两者放在DockPanel. 将 Button 停靠在右侧，并让 TextBox 填充所有剩余空间。如果您希望 Tab 键按预期循环浏览它们，则必须设置 TabIndex。
<DockPanel>
<Button DockPanel.Dock="Right" ... />
<TextBox ... />
</DockPanel>
Start with that, and see how it looks. Your RowDefinition for your parent grid looks correct (other than the fact your 3rd row height should be "*"and not "184*"), and it should mean your DevExpress control should stretch/shrink to fill all remaining vertical space.
从那开始，看看它看起来如何。您的父网格的 RowDefinition 看起来是正确的（除了您的第三行高度应该是"*"而不是"184*"），这应该意味着您的 DevExpress 控件应该拉伸/收缩以填充所有剩余的垂直空间。
