Question

我正在寻找下图中的布局。

TextBox将所有可用的水平空间调整为MaxWidth
按钮始终与TextBox
两者都是水平位于中心

上述解决方案的问题是它在超出MaxWidth后停止工作，因为Button开始远离TextBox。

以上代码

    <Grid Margin="40" VerticalAlignment="Center">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="auto"/>
      </Grid.ColumnDefinitions>
      <TextBox MaxWidth="500" Text="TextBoxContent"/>
      <Button Grid.Column="1" Margin="5,0" Content="ButtonContent"/>
   </Grid>

有什么想法吗？

编辑：回答WINRT（UWP）或者如果您不想使用DockPanel

<Grid Margin="40">
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
         </Grid.ColumnDefinitions>
         <Button Grid.Column="1" Margin="5,0" Content="ButtonContent" />
         <TextBox MaxWidth="500" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}" Text="TextBoxContent"/>
      </Grid>

Answer 1

你可以试试这个而不是网格。

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Width="Auto">
        <TextBox MinWidth="300" MaxWidth="500" Text="TextBoxContent"/>
        <Button Width="Auto" Margin="5,0" Content="ButtonContent"/>
</StackPanel>

Answer 2

从技术上讲，您需要将2个控件分组到一个容器中，此容器应该包含在Grid中，该Grid没有定义任何列。

要使TextBox的宽度始终尝试达到MaxWidth，您需要将其Width设置为某些Binding到Grid的ActualWidth。

此处包含2个控件的容器可以是DockPanel。我已经尝试使用StackPanel，但看起来StackPanel在Grid缩小时不会进行布局（你可以自己试试），这里是工作的XAML：

<Grid>  
  <DockPanel VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button Grid.Column="1" Margin="5,0" Content="ButtonContent" DockPanel.Dock="Right"/>
    <TextBox MaxWidth="500" Text="TextBoxContent" 
             Width="{Binding ActualWidth, 
                     RelativeSource={RelativeSource AncestorType=Grid}}"/>     
  </DockPanel>
</Grid>

您当然可以选择为MinWidth设置一些TextBox。

<强> 修改：

实际上，当Grid的收缩足够时，TextBox的大小会溢出Grid的列。所以我们需要将代码修改为：

<Grid Margin="40">
  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
     </Grid.ColumnDefinitions>
     <Button Grid.Column="1" Margin="5,0" Content="ButtonContent" />
     <Border MaxWidth="500" Width="{Binding ActualWidth, 
                                    RelativeSource={RelativeSource AncestorType=Grid}}"/>
     <TextBox MaxWidth="500" Text="TextBoxContent"/>
</Grid>

这是另一种方法，我们将TextBox的MinWidth绑定到包含列的ActualWidth：

<Grid Margin="40">
  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
     </Grid.ColumnDefinitions>
     <Button Grid.Column="1" Margin="5,0" Content="ButtonContent" />
     <TextBox MaxWidth="500" 
              MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ColumnDefinition}}" 
              Text="TextBoxContent" 
              Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"/>
</Grid>

WPF对象中心对齐将所有水平空间与相邻对象的MaxWidth对齐

2 个答案: