Geek Answers Handbook

WPF Grid Elements and Right-Handed Text

I have a WPF form where I am trying to create a simple input form. Two tags, two text boxes and a submit button. I have a very good layout, the only thing I can’t get is that my "Labels" are correctly aligned inside their cells. I tried both TextAlign = "Right" and HorizontialAlign = "Right", which moves the whole text, overlapping the text field, and not just moving inside the cell. Below is the XAML for the window.

<Window x:Class="MyWebKeepAliveDesktop.Login" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" > <Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition/> </Grid.RowDefinitions> <Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow"> <Grid> <TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2" Text="MyWebKeepAlive Desktop Login"/> <Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7" Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/> </Grid> </Border> <Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="35" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="10" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" /> <TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/> <TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" /> <TextBox Name="txtPassword" Width="150" Grid.Row="2" /> <Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2"> <TextBlock Text="Login" /> </Button> </Grid> </Grid> </Border> </Window>
+4
source share
2 answers

There is only one column in your grid as written. To support your settings, Grid.Column = 1 will require two for text fields. So you need to add the <ColumnDefinitions> block. With XAML, as of now, WPF just throws both controls into the same column, hence the behavior you see.

+11
source

Here is what I came up with. Just learning WPF. As PeterAllenWebb mentioned, your main problem is that you are missing ColumnDefinitions . I also added TextAlignment="Right" attributes for the two TextBlocks .

 <Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="35" /> <RowDefinition Height="25" /> <RowDefinition Height="25" /> <RowDefinition Height="10" /> <RowDefinition Height="30"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" /> <TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/> <TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" /> <TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/> <Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2"> <TextBlock Text="Login" /> </Button> </Grid>
+2
source

More articles:


All Articles