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

Question

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

TextBox 将所有可用的水平 space 调整到其 MaxWidth
按钮总是与文本框相邻
两者水平居中

上述解决方案的问题是在超过 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 个控件分组到一个容器中，该容器应包含在您的没有定义任何列的网格中。

要使TextBox 的Width 始终尝试达到MaxWidth，您需要将其Width 设置为与Grid 的ActualWidth 的某种绑定。

这里包含2个控件的容器可以是DockPanel。我已经用 StackPanel 试过了，但看起来当 Grid 缩小时 StackPanel 没有按预期布局（你可以自己试试），这是工作 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>

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

编辑:

实际上，当网格足够缩小时，TextBox 的大小会溢出网格的列。所以我们需要将代码修改成这样：

<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 对象中心对齐，将所有水平 space 与相邻对象的 MaxWidth 对齐

WPF object center aligned taking all horizontal space to MaxWidth with adjacent object

c#

wpf

xaml

winrt-xaml