WPF 对象中心对齐,将所有水平 space 与相邻对象的 MaxWidth 对齐
WPF object center aligned taking all horizontal space to MaxWidth with adjacent object
我正在寻找下图中的布局。
- 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>
你可以试试这个而不是网格。
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Width="Auto">
<TextBox MinWidth="300" MaxWidth="500" Text="TextBoxContent"/>
<Button Width="Auto" Margin="5,0" Content="ButtonContent"/>
</StackPanel>
从技术上讲,您需要将 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>
我正在寻找下图中的布局。
- 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>
你可以试试这个而不是网格。
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Width="Auto">
<TextBox MinWidth="300" MaxWidth="500" Text="TextBoxContent"/>
<Button Width="Auto" Margin="5,0" Content="ButtonContent"/>
</StackPanel>
从技术上讲,您需要将 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>