How to add TextBox over PasswordBox?

Question

I want to put a TextBox over the PasswordBox to make the encrypted password visible with a button. When I press the button I want to see the password from the PasswordBox in the TextBox, but my problem is the alignment, because these two components are in the Grid, the TextBox is aligned to the right of the PasswordBox.

This is my XAML file:

<UserControl
    x:Class="Waters.NuGenesis.LmsBundle.Plugins.Views.RpcView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:controls="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls;assembly=Waters.NuGenesis.UiEngine.Presentation"
    xmlns:presentation="clr-namespace:Waters.NuGenesis.UiEngine.Presentation;assembly=Waters.NuGenesis.UiEngine.Presentation"
    xmlns:viewModels="clr-namespace:Waters.NuGenesis.LmsBundle.Plugins.ViewModels"
    xmlns:buttons="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls.Buttons;assembly=Waters.NuGenesis.UiEngine.Presentation"

    mc:Ignorable="d"
    d:DesignHeight="450"
    d:DesignWidth="800"
    d:DataContext="{d:DesignInstance viewModels:RpcViewModel}">

    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </UserControl.Resources>

    <DockPanel>

        <controls:PageTitleBlock
            DockPanel.Dock="Top"
            Title="RPC &amp; SDMS Login"
            Description="Configure SDMS RPC and SDMS Login services." />

        <Grid>

            <Grid.Resources>
                <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
                    <Setter Property="Margin" Value="0 3" />
                </Style>
                <Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
                    <Setter Property="Margin" Value="0 3 15 0" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
                <Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">
                    <Setter Property="Margin" Value="0 3" />
                </Style>
            </Grid.Resources>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="35" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="35" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="35" />
            </Grid.RowDefinitions>

            <Label
                Grid.Column="0"
                Grid.Row="0"
                Content="User Name"
                Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

            <TextBox
                Grid.Column="1"
                Grid.Row="0"
                Text="{Binding RpcUserName, UpdateSourceTrigger=LostFocus}"
                Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

            <Label
                Grid.Column="0"
                Grid.Row="2"
                Content="Password"
                Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />


            <DockPanel
                    Grid.Column="1"
                    Grid.Row="2">

                <buttons:SmallButton
                        DockPanel.Dock="Right"
                        Content="See"
                        Margin="15 0 0 0"
                        Command="{Binding ShowPasswordCommand}"  />


                <PasswordBox
                    Grid.Column="1"
                    Grid.Row="2"
                    presentation:UnsafePasswordBox.BindPassword="True"
                    presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

                <TextBox
                    Grid.Column="1"
                    Grid.Row="2"
                    Name="TestShowPassword"
                    Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
                    Visibility="{Binding SetVisibility}" />

            </DockPanel>

            <Label
                Grid.Column="0"
                Grid.Row="4"
                Content="Domain"
                Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

            <TextBox
                Grid.Column="1"
                Grid.Row="4"
                Text="{Binding RpcDomain}"
                Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

        </Grid>

    </DockPanel>

</UserControl>

What I want to modify is this DockPanel:

<DockPanel
        Grid.Column="1"
        Grid.Row="2">

    <buttons:SmallButton
            DockPanel.Dock="Right"
            Content="See"
            Margin="15 0 0 0"
            Command="{Binding ShowPasswordCommand}"  />


    <PasswordBox
        Grid.Column="1"
        Grid.Row="2"
        presentation:UnsafePasswordBox.BindPassword="True"
        presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
        Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

    <TextBox
        Grid.Column="1"
        Grid.Row="2"
        Name="TestShowPassword"
        Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
        Visibility="{Binding SetVisibility}" />

</DockPanel>

Answer 1

You put the PasswordBox and the TextBox in a DockPanel, but set the attached Grid.Row and Grid.Column properties, which do not have any effect here, they are only respected by Grid.

The DockPanel will arrange items next to each other, but not overlapping.

Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.

You should use a Grid instead which the same column for the PasswordBox and the TextBox.

<Grid 
    Grid.Column="1"
    Grid.Row="2">
   <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>

   <buttons:SmallButton
       Grid.Column="1"
       Content="See"
       Margin="15 0 0 0"
       Command="{Binding ShowPasswordCommand}"/>

   <PasswordBox
      Grid.Column="0"
      presentation:UnsafePasswordBox.BindPassword="True"
      presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
      Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />

   <TextBox
      Grid.Column="0"
      Name="TestShowPassword"
      Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
      Visibility="{Binding SetVisibility}"/>

</Grid>