DockPanel LastChildFill的大小调整为MinWidth

Question

我试图在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

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

Answer 1

棘手的事情是给控件（在您的情况下是SearchTextBox）一个对齐，但仍然可以获得MaxWidth的可用空间。谢谢你的回答。

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

容器也可能是另一个控件

Answer 2

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

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

Answer 3

为TextBox设置最大宽度和最小宽度而非宽度。如果要设置"宽度"，则它具有最高优先级，因此"最小宽度"不会生效。我希望这会有所帮助。

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

Answer 4

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

你想要什么样的设计也取决于你。您可以使用grid，也可以使用stackpanles。