How can I anchor a textbox in wpf?
I have a window with tabs. On one of the tabs, I have a layout like below. (In fact it is more complicated, I have 4 text boxes in a row, and I have more rows.) How can I make the 3rd textbox have the width of the label + the width of the text box above, that is, to have them properly aligned ? The problem is that WPF widens the 3rd textbox, when I type text into it. Using hardcoded numbers for the sizes defeats the whole purpose of WPF. I could do that way 10 times faster in Windows Forms than in WPF.
Is there a better way, than using a grid for each set of consecutive small text boxes, having to skip the large ones from the grid, because putting them in messes up everything.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
开发者_如何学编程 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="3"/>
</Style>
<Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}"
BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Width" Value="50"/>
</Style>
</Window.Resources>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"
Width="{Binding ElementName=grid,Path=ActualWidth}"
Grid.IsSharedSizeScope="True">
<Grid Name="grid" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="c2"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Foo:"/>
<TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
<Label Grid.Row="1" Content="Foobar:"/>
<TextBox Grid.Row="1" Grid.Column="1"
Style="{StaticResource SmallTextBox}"/>
</Grid>
<TextBox Grid.Row="1"/>
<Grid Name="grid2" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="c2"/>
</Grid.ColumnDefinitions>
<Label Content="Bar:"/>
<TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
</Grid>
</StackPanel>
</Window>
EDIT: Here is the solution based on Julien Lebosquain's answer:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="3"/>
</Style>
<Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}"
BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Width" Value="50"/>
</Style>
</Window.Resources>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"
Width="{Binding ElementName=grid,Path=ActualWidth}">
<Grid Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Foo:"/>
<TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
<Label Grid.Row="1" Content="Foobar:"/>
<TextBox Grid.Row="1" Grid.Column="1"
Style="{StaticResource SmallTextBox}"/>
<TextBox Grid.Row="2" Grid.ColumnSpan="2"/>
<Label Grid.Row="3" Content="Bar:"/>
<TextBox Grid.Row="3" Grid.Column="1"
Style="{StaticResource SmallTextBox}"/>
</Grid>
</StackPanel>
</Window>
I think you got it backwards. It's not the largest textbox that messes up everything. It's the fact that the small textboxes have a fixed size that makes them not behave like the largest one. You've got a contradiction here: the use of a stack panel which means "takes the width of my children", Width=Auto
that has the same behavior, but you don't want your stack panel to grow.
Somewhere higher in the visual tree, you need to either specify a width or use a control whose sizing behavior is to take the whole space, like Grid.
Personally, I'll go with this solution:
- Use only one inner grid, the small textboxes not having a fixed size anymore, and the large textbox having
Grid.ColumnSpan="2"
. - Apply
Width="Auto"
to the first column andWidth="*"
to the second. - Replace the existing
StackPanel
with aGrid
having the first column fixed or star-sized (so that it will scale when the window is resized). Put your inner grid in this first column.
<TextBox Grid.Row="1" Grid.ColumnSpan="2" />
I would have one grid with 4 rows. And have a ColumnSpan on the 3rd row. It also means that you don't need the SharedSizeGroups.
<Grid Name="grid" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Foo:"/>
<TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
<Label Grid.Row="1" Content="Foobar:"/>
<TextBox Grid.Row="1" Grid.Column="1"
Style="{StaticResource SmallTextBox}"/>
<TextBox Grid.Row="2" Grid.ColumnSpan="2" />
<Label Content="Bar:"/>
<TextBox Grid.Row="3" Grid.Column="1" Style="{StaticResource SmallTextBox}"/>
</Grid>
Just remove Alignment properties:
HorizontalAlignment="Center" VerticalAlignment="Center"
For example textbox would be:
<TextBox x:Name="txtMyName1" Margin="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox x:Name="txtMyName2" Margin="3" />
精彩评论