Creating a standard login window with standard Ok and Cancel buttons bottom right

Question

I am seeking examples for creating a standard dialog/Login windows with OK and Cancel buttons bottom right.

I am unsure whether to use StackPanels, Grids or dockpanels. I understand that it's normally not correct to use the Canvas due the fact that you have to enter x and y values.

What I have created so far is the buttons for the Ok and Cancel

   <StackPanel Orientation="Horizontal" 
            FlowDirection="RightToLeft" Height="32">
        <Button Width="72" TabIndex="45" Margin="2,2,2,2">Cancel</Button>
        <Button Width="72" TabIndex="40" Margin="2,2,2,2">OK</Button>
    </StackPanel>

The kind of windows I want to create are the standard Dialog windows.

Answer 1

I would prefer the following markup:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>     

    <Grid Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions> 

        <TextBlock VerticalAlignment="Center">Username:</TextBlock>
        <TextBlock VerticalAlignment="Center" Grid.Row="1">Password:</TextBlock>
        <TextBox Grid.Column="1"  />
        <TextBox Grid.Row=1"" Grid.Column="1"  />
    </Grid>

    <Button Grid.Row="1">Ok</Button>
    <Button Grid.Row="1" Grid.Column="1">Cancel</Button>
</Grid>

Yes, it is also possible to reduce number of Grids to 1, but I see no point in it. Also one can use StackPanel instead of outer Grid.

"The lightest markup" phrase can be interpreted differently. The lightest for developer is the most simple and clear. The lightest for computer is the fastest to initialize and render. As for the given case, the difference is really in 1 extra layout container. This really is not the case to make optimisations