Tutorial :WPF Grid Items and Right Aligned Text



Question:

I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, 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>  


Solution:1

Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.


Solution:2

Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to 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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »