DockPanel LastChildFill 调整为 MinWidth？答案

【问题标题】：DockPanel LastChildFill resizing to MinWidth?DockPanel LastChildFill 调整为 MinWidth？
【发布时间】：2012-07-23 16:19:35
【问题描述】：

我尝试在 WPF 中实现一个简单的菜单栏。

这是 XAML：

<Page
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <DockPanel>  
    <DockPanel Background="Black" VerticalAlignment="Top" LastChildFill="True" DockPanel.Dock="Top" Height="28">
        <ToggleButton Content="--" Visibility="Collapsed" />
        <StackPanel Orientation="Horizontal">
           <Button Content="Add" />
           <Button Content="Expand" /> 
        </StackPanel>
        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
           <TextBox Text="Search" MinWidth="80" Width="200" />
           <Button Content="X" Margin="0,1,50,0" />
        </StackPanel>
    </DockPanel>
 </DockPanel>
</Page>

看起来不错，但是当我将页面大小调整为更小的宽度时，最后一个子项（带有搜索文本框的 Stackpanel）隐藏在左侧项的后面。像这样： http://s9.postimage.org/m0tkrobwd/printscreen.png

如果文本框有足够的空间来实现其最小宽度，那么它会自行调整大小……这可能吗？

【问题讨论】：

如果有足够的空间，哪个控件应该伸展，如果没有，哪个控件应该首先消失？
看这个：s10.postimage.org/wc86li3rb/concept.png可能在最后阶段可用空间小于80px时，整个搜索面板应该会消失，但如果没有也没关系。但是目前，即使在有足够可用空间的情况下，搜索面板也会流到按钮后面或上方，这很垃圾。
我添加了一个可以满足您所有要求的解决方案。

标签： wpf dockpanel css

【解决方案1】：

Hi 为 TextBox 设置 MaxWidth 和 MinWidth Not Width。如果您要设置宽度，那么它具有最高优先级，因此 MinWidth 不会起作用。我希望这会有所帮助。

 <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Content="--" Visibility="Collapsed" />
                <Button Content="Add"  Grid.Column="1"/>
                <Button Content="Expand"  Grid.Column="2"/>
                <TextBox Text="Search" MinWidth="80" MaxWidth="600" Grid.Column="3" ClipToBounds="True" />
                <Button Content="X" Margin="0,1,50,0" Grid.Column="4"/>
            </Grid>

【讨论】：

是的，对于这种情况，您将不得不使用 Grid with Column of * Width
谢谢，但不一样。您将 TextBox 和 Button 放在 2 个不同的列中，如果页面宽度很大，它们之间会产生非常大的空间。
见上面的另一个答案。它不会那样做。

【解决方案2】：

这只是因为页面大小不足以在页面上显示两个堆栈面板。为此，您可以使用页面的最小尺寸。这将防止控件隐藏的损坏。

这也取决于您想要什么设计。您可以使用网格而不是 stackpanles。

【讨论】：

所以这是不可能的？我必须限制整个页面的宽度？
您还可以为您持有控件的停靠面板应用尺寸

【解决方案3】：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                    <ColumnDefinition MaxWidth="200" MinWidth="80"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Content="--" Visibility="Collapsed" />
                <Button Content="Add"  Grid.Column="1"/>
                <Button Content="Expand"  Grid.Column="2"/>
                <TextBox Text="Search" Grid.Column="4"/>
                <Button Content="X" Margin="0,1,50,0" Grid.Column="5" />
            </Grid>

不要将 MaxWidth 和 MinWidth 提供给 TextBox，而是将其提供给 Grid Column。我希望这会有所帮助。

【讨论】：

在这个例子中，搜索控件没有向右对齐，这不是我想要的。你可以在这里看到我的概念：s10.postimage.org/wc86li3rb/concept.png 我认为应该有一个简单的解决方案来解决这个问题，也许它不像我想象的那么容易。 :)
我已经更新了上面的解决方案。复制并粘贴到您的代码中，看看它是否满足您的要求。
我用这个作为解决方案。工作得很好！谢谢！

【解决方案4】：

棘手的事情是给一个控件（在你的情况下是 SearchTextBox）一个对齐，但仍然捕获到MaxWidth 的可用空间。感谢this answer。

<DockPanel>
    <DockPanel Background="Black" DockPanel.Dock="Top" Height="28">
        <ToggleButton DockPanel.Dock="Left" Content="--" Visibility="Collapsed" />
        <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
            <Button Content="Add" />
            <Button Content="Expand" />
        </StackPanel>
        <Button DockPanel.Dock="Right" Content="X" />
        <Border Name="Container">
            <TextBox Text="Search" HorizontalAlignment="Right"
                     Width="{Binding ElementName=Container, Path=ActualWidth}" MaxWidth="200" />                                
        </Border>
     </DockPanel>        
</DockPanel>

Container 也可以是另一个 Control。

【讨论】：