Я проектирую простое окно входа в систему, и мне очень интересно об этом.
Ну, это мой код XAML
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label x:Name="label_ID" Height="30"/>
<TextBox x:Name="textBox_ID" Height="20" TabIndex="0">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
<DockPanel Grid.Row="1">
<Label x:Name="label_PW" Height="30"/>
<PasswordBox x:Name="textBox_PW" Height="20" TabIndex="1">
<PasswordBox.Margin>
<Thickness Right="5"/>
</PasswordBox.Margin>
</PasswordBox>
</DockPanel>
<DockPanel Grid.Row="2">
<Label x:Name="label_IP" Height="30"/>
<TextBox x:Name="textBox_IP" Height="20" UndoLimit="2">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
</Grid>
label_ID string is ID
label_PW string is Password
label_IP string is 'IP'
И результат выглядит следующим образом:
https://www.dropbox.com/s/k23ft06layp0sl4/1.PNG?dl=0
Текстовое поле пароля только короткое, другое. (Я хочу, чтобы короткие текстовые поля.)
Как я могу исправить расположение текстовых полей?
Благодарю.
Я думаю, что ваши DockPanels
действительно не нужны, вместо этого вы можете использовать два столбца в Grid
:
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" x:Name="label_ID" Height="30"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="textBox_ID" Height="20" TabIndex="0" Margin="5"/>
<Label Grid.Row="1" Grid.Column="0" x:Name="label_PW" Height="30"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="textBox_PW" Height="20" TabIndex="1" Margin="5"/>
<Label Grid.Row="2" Grid.Column="0" x:Name="label_IP" Height="30"/>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="textBox_IP" Height="20" UndoLimit="2" Margin="5"/>
</Grid>
Установка ширины первой колонки в Auto
гарантирует, что текст будет виден, второй столбец займет остальную часть пространства (*
).
Он производит такой вывод (с некоторыми добавленными мной тестовыми строками):
Самый простой способ, о котором я мог думать, - это
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Name="lblID" Content="ID:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Margin="5,2,5,2" />
<TextBox Name="txtID" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblPwd" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="1" Margin="5,2,5,2" />
<PasswordBox Name="pwdBx" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblIP" Content="IP:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="2" Margin="5,2,5,2" />
<TextBox Name="txtIP" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,2,0,2" Width="250" Height="25" />
</Grid>
Сейчас я могу думать только об использовании свойства margin:
<UIElement Margin="left, top, right, bottom" />
<Menu Name="EgMenu"
Margin="20,20,0,20" />
Свойство margin поможет вам позиционировать и размер ваших элементов пользовательского интерфейса в упрощенном режиме, чтобы вы могли визуализировать только просмотр текста. Но почему бы не использовать WYSIWYG и, уточнив, удалив XAML позже.