WpfFriaLabbar/Views/PasswordCrackerView.xaml

<Page x:Class="friaLabbar.Views.PasswordCrackerView"
      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:local="clr-namespace:friaLabbar.Views"
      xmlns:viewmodels="clr-namespace:friaLabbar.ViewModels"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"

      Background="Wheat"
      Title="PasswordCrackerView">
    <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Padding" Value="10 10" />
            <Setter Property="FontSize" Value="20" />
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="Margin" Value="4" />
        </Style>
        <viewmodels:PasswordToColorConverter x:Key="passwordToColorConverter" />
        <viewmodels:PasswordCharacterToColorConverter x:Key="passwordCharacterToColorConverter" />
    </Page.Resources>

    <Grid Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="auto" SharedSizeGroup="FirstColumn" />
            <ColumnDefinition Width="auto" SharedSizeGroup="SecondColumn" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>


        <!-- Row 0 -->

        <!-- Row 1 -->
        <TextBlock Text="Password cracker" FontSize="40" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="4" />

        <!-- Row 2 -->
        <TextBlock Text="Position" Grid.Row="2" Grid.Column="1" Background="Aqua"/>
        <TextBlock Text="Seen characters" Grid.Row="2" Grid.Column="2" Background="Turquoise" />
        <TextBlock Text="Passwords" Grid.Row="2" Grid.Column="3" Background="BlanchedAlmond" />

        <!-- Row 3 -->
        <ItemsControl ItemsSource="{Binding PossiblePasswords}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" SharedSizeGroup="FirstColumn" />
                            <ColumnDefinition Width="auto" SharedSizeGroup="SecondColumn" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>

                        <TextBlock Text="{Binding Position}" Background="Orchid" Grid.Column="0"/>
                        <TextBox Text="{Binding Text}" Grid.Column="1" Background="Pink" />

                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <ItemsControl ItemsSource="{Binding AllPasswords}" Grid.Row="3" Grid.Column="3">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>

                    <Border BorderThickness="1" BorderBrush="Black">

                        <StackPanel Orientation="Horizontal" Margin="10" Background="{Binding IsPossible, Converter={StaticResource passwordToColorConverter}}">

                            <ItemsControl ItemsSource="{Binding Characters}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Character}" Padding="1" FontSize="20" FontWeight="Bold" Foreground="{Binding State, Converter={StaticResource passwordCharacterToColorConverter}}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </Border>

                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>

        <!-- Row 4 -->

    </Grid>
</Page>