Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Grid Items and Right Aligned Text

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>
like image 921
Mitchel Sellers Avatar asked Dec 13 '22 04:12

Mitchel Sellers


2 Answers

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.

like image 119
PeterAllenWebb Avatar answered Dec 16 '22 18:12

PeterAllenWebb


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>
like image 40
Crispy Avatar answered Dec 16 '22 18:12

Crispy