Fields.xaml

<UserControl x:Class="MaterialDesignDemo.Fields"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:MaterialDesignDemo.Shared.Converters;assembly=MaterialDesignDemo.Shared"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
             xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:materialDesignConverters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             d:DataContext="{d:DesignInstance domain:FieldsViewModel,
                                              IsDesignTimeCreatable=False}"
             d:DesignHeight="1080"
             d:DesignWidth="1920"
             mc:Ignorable="d">
  <UserControl.Resources>
    <sys:Double x:Key="FieldWidth">200</sys:Double>
    <Thickness x:Key="IconMargin">0,0,8,0</Thickness>
    <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
    <converters:BoolToTextWrappingConverter x:Key="BoolToTextWrappingConverter" />

    <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignTextBox}">
      <Setter Property="Margin" Value="0,8" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <Style x:Key="FieldIcon" TargetType="materialDesign:PackIcon">
      <Setter Property="DockPanel.Dock" Value="Left" />
      <Setter Property="Margin" Value="{StaticResource IconMargin}" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <Style x:Key="FieldDockPanel" TargetType="DockPanel">
      <Setter Property="Margin" Value="0,0,8,16" />
      <Setter Property="VerticalAlignment" Value="Bottom" />
      <Setter Property="Width" Value="{StaticResource FieldWidth}" />
    </Style>
  </UserControl.Resources>
  <StackPanel>
    <TextBlock Style="{StaticResource PageTitleTextBlock}" Text="Field" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Common" />

    <WrapPanel>
      <DockPanel Style="{StaticResource FieldDockPanel}">
        <materialDesign:PackIcon Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}"
                                 Kind="Account"
                                 Style="{StaticResource FieldIcon}" />
        <smtx:XamlDisplay UniqueKey="fields_1">
          <TextBox x:Name="NameTextBox"
                   materialDesign:HintAssist.HelperText="Helper text longer than error"
                   materialDesign:HintAssist.Hint="Name">

            <TextBox.Text>
              <Binding Path="Name" UpdateSourceTrigger="PropertyChanged">
                <Binding.ValidationRules>
                  <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
                </Binding.ValidationRules>
              </Binding>
            </TextBox.Text>
          </TextBox>
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <materialDesign:PackIcon Foreground="{Binding ElementName=PhoneTextBox, Path=BorderBrush}"
                                 Kind="Phone"
                                 Style="{StaticResource FieldIcon}" />
        <smtx:XamlDisplay UniqueKey="fields_4">
          <TextBox x:Name="PhoneTextBox"
                   materialDesign:TransitionAssist.DisableTransitions="True"
                   MaxLength="12" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <materialDesign:PackIcon Foreground="{Binding ElementName=CommentTextBox, Path=BorderBrush}"
                                 Kind="Comment"
                                 Style="{StaticResource FieldIcon}" />
        <smtx:XamlDisplay UniqueKey="fields_6">
          <TextBox x:Name="CommentTextBox"
                   materialDesign:HintAssist.HelperText="Bigger Helper Text"
                   materialDesign:HintAssist.HelperTextFontSize="16"
                   materialDesign:HintAssist.Hint="Comment" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <smtx:XamlDisplay UniqueKey="fields_8">
          <TextBox VerticalAlignment="Center"
                   materialDesign:HintAssist.Hint="Floating Hint"
                   Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <smtx:XamlDisplay UniqueKey="fields_16">
          <TextBox VerticalAlignment="Center"
                   materialDesign:TextFieldAssist.HasClearButton="True"
                   materialDesign:TextFieldAssist.PrefixText="$"
                   materialDesign:TextFieldAssist.SuffixText="mm"
                   Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                   Text="Good stuff">
            <materialDesign:HintAssist.Hint>
              <StackPanel Margin="-2,0,0,0" Orientation="Horizontal">
                <materialDesign:PackIcon Kind="AccessPoint" />
                <TextBlock Text="WiFi" />
              </StackPanel>
            </materialDesign:HintAssist.Hint>
          </TextBox>
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <materialDesign:PackIcon Foreground="{Binding ElementName=PasswordBox, Path=BorderBrush}"
                                 Kind="Key"
                                 Style="{StaticResource FieldIcon}" />

        <smtx:XamlDisplay UniqueKey="fields_7">
          <PasswordBox x:Name="PasswordBox"
                       materialDesign:HintAssist.HelperText="At least 8 characters"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:TextFieldAssist.HasClearButton="True" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <materialDesign:PackIcon Foreground="{Binding ElementName=FloatingPasswordBox, Path=BorderBrush}"
                                 Kind="Key"
                                 Style="{StaticResource FieldIcon}" />

        <smtx:XamlDisplay UniqueKey="fields_18">
          <PasswordBox x:Name="FloatingPasswordBox"
                       materialDesign:HintAssist.Foreground="Green"
                       materialDesign:HintAssist.Hint="Floating Password"
                       materialDesign:TextFieldAssist.UnderlineBrush="Green"
                       Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <smtx:XamlDisplay UniqueKey="fields_19">
          <TextBox materialDesign:HintAssist.FloatingScale="0.50"
                   materialDesign:HintAssist.Hint="Large Font"
                   materialDesign:TextFieldAssist.TextBoxViewMargin="1 0 1 0"
                   FontSize="24"
                   Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                   Text="Some Text" />
        </smtx:XamlDisplay>

      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <smtx:XamlDisplay UniqueKey="fields_13">
          <TextBox MinWidth="72"
                   materialDesign:HintAssist.Hint="I'm Disabled"
                   IsEnabled="False" />
        </smtx:XamlDisplay>
      </DockPanel>

      <DockPanel Style="{StaticResource FieldDockPanel}">
        <smtx:XamlDisplay UniqueKey="fields_15">
          <PasswordBox MinWidth="72"
                       IsEnabled="False"
                       Password="01234" />
        </smtx:XamlDisplay>
      </DockPanel>
    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Multi-line" />

    <StackPanel>
      <smtx:XamlDisplay Margin="0,0,0,32" UniqueKey="fields_3">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>

          <CheckBox x:Name="TextBoxWrapTextCheckBox"
                    Content="Wrap text"
                    IsChecked="True" />
          
          <TextBox Grid.Row="1"
                   Height="80"
                   MinWidth="280"
                   VerticalAlignment="Stretch"
                   materialDesign:HintAssist.Hint="Multiline text"
                   AcceptsReturn="True"
                   SpellCheck.IsEnabled="True"
                   Text="Multiline. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The quick brown fox jumps over the lazy dog. War and peace. Keep going. Go on. For how long? Not long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                   TextWrapping="{Binding ElementName=TextBoxWrapTextCheckBox, Path=IsChecked, Converter={StaticResource BoolToTextWrappingConverter}}"
                   VerticalScrollBarVisibility="Auto"
                   HorizontalScrollBarVisibility="Auto"/>
        </Grid>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fields_32">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>

          <CheckBox x:Name="RichTextBoxIsReadOnlyCheckBox"
                    Content="Rich Text Box: IsReadOnly"
                    IsChecked="True" />

          <RichTextBox Grid.Row="1"
                       Height="80"
                       MinWidth="280"
                       materialDesign:HintAssist.Hint="Multiline text"
                       AcceptsReturn="True"
                       IsDocumentEnabled="True"
                       IsReadOnly="{Binding IsChecked, ElementName=RichTextBoxIsReadOnlyCheckBox}"
                       SpellCheck.IsEnabled="True"
                       VerticalScrollBarVisibility="Auto">
            <FlowDocument>
              <Paragraph>
                <Run FontWeight="Bold">Rich Text Box.</Run>
                <LineBreak />
                <Run FontStyle="Italic">With formatting support</Run>
                <LineBreak />
                <Hyperlink Cursor="Hand"
                           NavigateUri="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit"
                           RequestNavigate="Hyperlink_OnRequestNavigate">
                  Material Design in XAML
                </Hyperlink>
              </Paragraph>
            </FlowDocument>
          </RichTextBox>
        </Grid>
      </smtx:XamlDisplay>
    </StackPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />

    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Filled" />

    <WrapPanel>
      <WrapPanel.Resources>
        <Style TargetType="{x:Type smtx:XamlDisplay}" BasedOn="{StaticResource {x:Type smtx:XamlDisplay}}">
          <Setter Property="Margin" Value="0,0,16,16" />
          <Setter Property="VerticalAlignment" Value="Top" />
          <Setter Property="Width" Value="250" />
        </Style>

        <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
          <Setter Property="IsChecked" Value="True" />
          <Setter Property="Margin" Value="0,8" />
        </Style>
      </WrapPanel.Resources>

      <smtx:XamlDisplay UniqueKey="fields_25">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignFilledTextBoxEnabledComboBox" Content="Enabled" />

          <TextBox MaxWidth="400"
                   VerticalAlignment="Top"
                   materialDesign:HintAssist.Hint="Floating hint in a box that will cut off"
                   AcceptsReturn="True"
                   IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledTextBoxEnabledComboBox}"
                   Style="{StaticResource MaterialDesignFilledTextBox}"
                   TextWrapping="Wrap" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fields_27">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignFilledTextBoxTextCountComboBox" Content="View Text Input Count" />

          <TextBox VerticalAlignment="Top"
                   materialDesign:HintAssist.Hint="This is a limited text area"
                   materialDesign:TextFieldAssist.CharacterCounterVisibility="{Binding Path=IsChecked, ElementName=MaterialDesignFilledTextBoxTextCountComboBox, Converter={x:Static materialDesignConverters:BooleanToVisibilityConverter.CollapsedInstance}}"
                   MaxLength="40"
                   Style="{StaticResource MaterialDesignFilledTextBox}"
                   TextWrapping="Wrap" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fields_28">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignFilledPasswordBoxEnabledComboBox" Content="Enabled" />

          <PasswordBox VerticalAlignment="Top"
                       materialDesign:HintAssist.Hint="Password"
                       IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledPasswordBoxEnabledComboBox}"
                       Style="{StaticResource MaterialDesignFilledPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay VerticalAlignment="Bottom" UniqueKey="passwordFilled1">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignFilledPasswordBoxTextCountComboBox" Content="View Password Input Count" />

          <PasswordBox materialDesign:HintAssist.HelperText="Helper text"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:TextFieldAssist.CharacterCounterVisibility="{Binding Path=IsChecked, ElementName=MaterialDesignFilledPasswordBoxTextCountComboBox, Converter={x:Static materialDesignConverters:BooleanToVisibilityConverter.CollapsedInstance}}"
                       Style="{StaticResource MaterialDesignFilledPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        UniqueKey="fieldFilled_with_validation">
        <TextBox VerticalAlignment="Top"
                 materialDesign:HintAssist.HelperText="Helper text"
                 materialDesign:HintAssist.Hint="Text (validated)"
                 Style="{StaticResource MaterialDesignFilledTextBox}">
          <TextBox.Text>
            <Binding Path="Text1" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        UniqueKey="passwordFilled_with_validation">
        <StackPanel Orientation="Vertical">
          <PasswordBox materialDesign:HintAssist.HelperText="Helper text"
                       materialDesign:HintAssist.Hint="Password (validated)"
                       materialDesign:PasswordBoxAssist.Password="{Binding Path=Password1Validated, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}"
                       Style="{StaticResource MaterialDesignFilledPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>
    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Outlined" />

    <WrapPanel>
      <WrapPanel.Resources>
        <Style TargetType="{x:Type smtx:XamlDisplay}" BasedOn="{StaticResource {x:Type smtx:XamlDisplay}}">
          <Setter Property="Margin" Value="0,0,16,16" />
          <Setter Property="VerticalAlignment" Value="Top" />
          <Setter Property="Width" Value="200" />
        </Style>

        <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
          <Setter Property="IsChecked" Value="True" />
          <Setter Property="Margin" Value="0,8" />
        </Style>
      </WrapPanel.Resources>

      <smtx:XamlDisplay UniqueKey="fields_26">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignOutlinedTextBoxEnabledComboBox" Content="Enabled" />

          <TextBox Height="100"
                   VerticalAlignment="Top"
                   materialDesign:HintAssist.Hint="This is a text area"
                   AcceptsReturn="True"
                   IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedTextBoxEnabledComboBox}"
                   Style="{StaticResource MaterialDesignOutlinedTextBox}"
                   TextWrapping="Wrap"
                   VerticalScrollBarVisibility="Auto" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fields_29">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignOutlinedTextBoxTextCountComboBox" Content="View Text Input Count" />

          <TextBox Height="100"
                   VerticalAlignment="Top"
                   materialDesign:HintAssist.Hint="This is a limited text area"
                   materialDesign:TextFieldAssist.CharacterCounterVisibility="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedTextBoxTextCountComboBox, Converter={x:Static materialDesignConverters:BooleanToVisibilityConverter.CollapsedInstance}}"
                   MaxLength="40"
                   Style="{StaticResource MaterialDesignOutlinedTextBox}"
                   TextWrapping="Wrap"
                   VerticalScrollBarVisibility="Auto" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fields_30">
        <StackPanel>
          <CheckBox x:Name="MaterialDesignOutlinedPasswordBoxEnabledComboBox" Content="Enabled" />

          <PasswordBox VerticalAlignment="Top"
                       materialDesign:HintAssist.Hint="Password"
                       IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedPasswordBoxEnabledComboBox}"
                       Style="{StaticResource MaterialDesignOutlinedPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="passwordOutlined1">
        <StackPanel>
          <CheckBox Visibility="Hidden" />

          <PasswordBox materialDesign:HintAssist.HelperText="Helper text"
                       materialDesign:HintAssist.Hint="Password"
                       Style="{StaticResource MaterialDesignOutlinedPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="fieldOutlined_with_validation">
        <StackPanel>
          <CheckBox Visibility="Hidden" />

          <TextBox VerticalAlignment="Top"
                   materialDesign:HintAssist.HelperText="Helper text"
                   materialDesign:HintAssist.Hint="Text (validated)"
                   Style="{StaticResource MaterialDesignOutlinedTextBox}">
            <TextBox.Text>
              <Binding Path="Text2" UpdateSourceTrigger="PropertyChanged">
                <Binding.ValidationRules>
                  <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
                </Binding.ValidationRules>
              </Binding>
            </TextBox.Text>
          </TextBox>

        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="passwordOutlined_with_validation">
        <StackPanel>
          <CheckBox Visibility="Hidden" />
          <PasswordBox materialDesign:HintAssist.HelperText="Helper text"
                       materialDesign:HintAssist.Hint="Password (validated)"
                       materialDesign:PasswordBoxAssist.Password="{Binding Path=Password2Validated, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}"
                       Style="{StaticResource MaterialDesignOutlinedPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>
    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Reveal PasswordBox" />

    <WrapPanel>
      <WrapPanel.Resources>
        <Style TargetType="{x:Type smtx:XamlDisplay}" BasedOn="{StaticResource {x:Type smtx:XamlDisplay}}">
          <Setter Property="Margin" Value="0,0,16,0" />
          <Setter Property="VerticalAlignment" Value="Top" />
          <Setter Property="Width" Value="200" />
        </Style>

        <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
          <Setter Property="IsChecked" Value="True" />
          <Setter Property="Margin" Value="0,8" />
        </Style>
      </WrapPanel.Resources>

      <smtx:XamlDisplay VerticalAlignment="Top" UniqueKey="reveal_password_default">
        <StackPanel>
          <CheckBox x:Name="RevealPasswordDefaultEnabled" Content="Enabled" />
          <PasswordBox materialDesign:HintAssist.HelperText="Bound to Password1"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:PasswordBoxAssist.Password="{Binding Password1, Mode=TwoWay}"
                       materialDesign:TextFieldAssist.HasClearButton="True"
                       IsEnabled="{Binding ElementName=RevealPasswordDefaultEnabled, Path=IsChecked}"
                       Style="{StaticResource MaterialDesignRevealPasswordBox}" />

          <Button Margin="0,32,0,0"
                  VerticalAlignment="Top"
                  Command="{Binding SetPassword1FromViewModelCommand}"
                  Content="Set from VM" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay VerticalAlignment="Top" UniqueKey="reveal_password_floating">
        <StackPanel>
          <CheckBox x:Name="RevealPasswordFloatingEnabled" Content="Enabled" />
          <PasswordBox materialDesign:HintAssist.HelperText="Bound to Password2"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:PasswordBoxAssist.Password="{Binding Password2, Mode=TwoWay}"
                       materialDesign:TextFieldAssist.HasClearButton="True"
                       IsEnabled="{Binding ElementName=RevealPasswordFloatingEnabled, Path=IsChecked}"
                       Style="{StaticResource MaterialDesignFloatingHintRevealPasswordBox}" />

          <Button Margin="0,32,0,0"
                  VerticalAlignment="Top"
                  Command="{Binding SetPassword2FromViewModelCommand}"
                  Content="Set from VM" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay VerticalAlignment="Top" UniqueKey="reveal_password_filled">
        <StackPanel>
          <CheckBox x:Name="RevealPasswordFilledEnabled" Content="Enabled" />
          <PasswordBox materialDesign:HintAssist.HelperText="Not bound password"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:TextFieldAssist.HasClearButton="True"
                       IsEnabled="{Binding ElementName=RevealPasswordFilledEnabled, Path=IsChecked}"
                       Password="Set from XAML"
                       Style="{StaticResource MaterialDesignFilledRevealPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay VerticalAlignment="Top" UniqueKey="reveal_password_outlined">
        <StackPanel>
          <CheckBox x:Name="RevealPasswordOutlinedEnabled" Content="Enabled" />
          <PasswordBox VerticalContentAlignment="Bottom"
                       materialDesign:HintAssist.HelperText="Not bound password"
                       materialDesign:HintAssist.Hint="Password"
                       materialDesign:TextFieldAssist.HasClearButton="True"
                       IsEnabled="{Binding ElementName=RevealPasswordOutlinedEnabled, Path=IsChecked}"
                       Style="{StaticResource MaterialDesignOutlinedRevealPasswordBox}" />
        </StackPanel>
      </smtx:XamlDisplay>
    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="DataTemplate" />

    <WrapPanel>
      <smtx:XamlDisplay UniqueKey="fields_20">
        <ContentControl Content="{Binding TestObject}">
          <ContentControl.ContentTemplate>
            <DataTemplate DataType="domain:FieldsTestObject">
              <StackPanel Orientation="Horizontal">
                <TextBox Width="100"
                         VerticalAlignment="Bottom"
                         materialDesign:HintAssist.Hint="Name"
                         Text="{Binding Name}" />

                <TextBox Width="100"
                         Margin="8,0,0,0"
                         VerticalAlignment="Bottom"
                         materialDesign:HintAssist.Hint="Content"
                         Text="{Binding Content}" />

                <TextBox Width="100"
                         Margin="8,0,0,0"
                         VerticalAlignment="Bottom"
                         materialDesign:HintAssist.Hint="Name"
                         Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                         Text="{Binding Name}" />
                <TextBox Width="100"
                         Margin="8,0,0,0"
                         VerticalAlignment="Bottom"
                         materialDesign:HintAssist.Hint="Content"
                         Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                         Text="{Binding Content}" />
              </StackPanel>
            </DataTemplate>
          </ContentControl.ContentTemplate>
        </ContentControl>
      </smtx:XamlDisplay>

    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="DataTemplateSelector" />

    <WrapPanel>
      <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="fields_21">
        <ContentControl Content="{Binding TestObject}">
          <ContentControl.ContentTemplateSelector>
            <domain1:SimpleDataTemplateSelector>
              <domain1:SimpleDataTemplateSelector.FixedTemplate>
                <DataTemplate DataType="domain:FieldsTestObject">
                  <StackPanel Orientation="Horizontal">
                    <TextBox Width="100"
                             Margin="0,0,0,0"
                             VerticalAlignment="Bottom"
                             materialDesign:HintAssist.Hint="Name"
                             Text="{Binding Name}" />

                    <TextBox Width="100"
                             Margin="8,0,0,0"
                             VerticalAlignment="Bottom"
                             materialDesign:HintAssist.Hint="Content"
                             Text="{Binding Content}" />

                    <TextBox Width="100"
                             Margin="8,0,0,0"
                             VerticalAlignment="Bottom"
                             materialDesign:HintAssist.Hint="Name"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Text="{Binding Name}" />

                    <TextBox Width="100"
                             Margin="8,0,0,0"
                             VerticalAlignment="Bottom"
                             materialDesign:HintAssist.Hint="Content"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Text="{Binding Content}" />
                  </StackPanel>
                </DataTemplate>
              </domain1:SimpleDataTemplateSelector.FixedTemplate>
            </domain1:SimpleDataTemplateSelector>
          </ContentControl.ContentTemplateSelector>
        </ContentControl>
      </smtx:XamlDisplay>

    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Validation" />

    <WrapPanel Margin="0,0,0,32">
      <smtx:XamlDisplay Width="120"
                        Margin="0,0,16,16"
                        UniqueKey="fields_validation_1">
        <TextBox Width="20"
                 HorizontalAlignment="Left"
                 materialDesign:ValidationAssist.UsePopup="True"
                 ToolTip="Use a popup which can escape the bounds of the control where space is limited">
          <TextBox.Text>
            <Binding Path="Name" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay Width="120"
                        Margin="0,0,16,16"
                        UniqueKey="fields_validation_2">
        <TextBox Width="20"
                 HorizontalAlignment="Right"
                 materialDesign:ValidationAssist.PopupPlacement="Left"
                 materialDesign:ValidationAssist.UsePopup="True"
                 ToolTip="Use a popup which can escape the bounds of the control where space is limited it can be placed in alternative positions">
          <TextBox.Text>
            <Binding Path="Name2" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay Width="120"
                        Margin="0,0,16,16"
                        UniqueKey="fields_validation_3">
        <TextBox materialDesign:ValidationAssist.HorizontalAlignment="Right">
          <TextBox.Text>
            <Binding Path="Name2" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
    </WrapPanel>
    <StackPanel Margin="32,0,0,0" Orientation="Horizontal">
      <smtx:XamlDisplay Width="120" UniqueKey="fields_validation_4">
        <TextBox Width="20"
                 HorizontalAlignment="Left"
                 materialDesign:ValidationAssist.UsePopup="True"
                 ToolTip="Use a popup which can escape the bounds of the control where space is limited">
          <TextBox.Text>
            <Binding Path="Name" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay Width="120" UniqueKey="fields_validation_5">
        <TextBox Width="20"
                 HorizontalAlignment="Right"
                 materialDesign:ValidationAssist.PopupPlacement="Left"
                 materialDesign:ValidationAssist.UsePopup="True"
                 ToolTip="Use a popup which can escape the bounds of the control where space is limited it can be placed in alternative positions">
          <TextBox.Text>
            <Binding Path="Name2" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
      <smtx:XamlDisplay Width="120" UniqueKey="fields_validation_6">
        <TextBox materialDesign:ValidationAssist.HorizontalAlignment="Right">
          <TextBox.Text>
            <Binding Path="Name2" UpdateSourceTrigger="PropertyChanged">
              <Binding.ValidationRules>
                <domain1:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
              </Binding.ValidationRules>
            </Binding>
          </TextBox.Text>
        </TextBox>
      </smtx:XamlDisplay>
    </StackPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Custom Background" />

    <WrapPanel Margin="0,0,0,32" Background="Chocolate">
      <smtx:XamlDisplay Margin="16"
                        UniqueKey="fields_custom_background_1">
        <TextBox Width="200"
                 Style="{StaticResource MaterialDesignOutlinedTextBox}"
                 materialDesign:HintAssist.Hint="Hint text"
                 materialDesign:HintAssist.HintPaddingBrush="Chocolate" />
        <!-- Set HintAssist.HintPaddingBrush to match the custom background to get correct coloring of the hint padding (when floated) -->
      </smtx:XamlDisplay>
    </WrapPanel>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="AutoSuggestBox" />

    <WrapPanel>
      <StackPanel  Width="256" Margin="0,0,16,16">
        <TextBlock Margin="0,0,0,8"
             VerticalAlignment="Center"
             Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
             Text="Simple source list" />

        <smtx:XamlDisplay UniqueKey="fields_autosuggestion_1">
          <materialDesign:AutoSuggestBox VerticalAlignment="Bottom"
                                   Suggestions="{Binding AutoSuggestBox1Suggestions}"
                                   Text="{Binding AutoSuggestBox1Text, UpdateSourceTrigger=PropertyChanged}" />
        </smtx:XamlDisplay>
      </StackPanel>

      <StackPanel  Width="256" Margin="0,0,16,16">
        <TextBlock Margin="0,0,0,8"
             Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
             Text="AutoSuggestBox with ItemTemplate" />
        <smtx:XamlDisplay UniqueKey="fields_autosuggestion_2">
          <materialDesign:AutoSuggestBox materialDesign:HintAssist.HelperText="Select color"
                                   materialDesign:HintAssist.Hint="Color"
                                   materialDesign:TextFieldAssist.HasClearButton="True"
                                   DropDownElevation="Dp0"
                                   Suggestions="{Binding AutoSuggestBox2Suggestions}"
                                   Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                   ValueMember="Key">
            <materialDesign:AutoSuggestBox.ItemTemplate>
              <DataTemplate>
                <DockPanel>
                  <Border Width="20"
                    Height="20"
                    Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
                    CornerRadius="10" />
                  <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
                </DockPanel>
              </DataTemplate>
            </materialDesign:AutoSuggestBox.ItemTemplate>
          </materialDesign:AutoSuggestBox>
        </smtx:XamlDisplay>

      </StackPanel>

      <StackPanel Width="256" Margin="0,0,16,16">
        <TextBlock Margin="0,0,0,8"
             Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
             Text="Filled AutoSuggestBox" />
        <smtx:XamlDisplay UniqueKey="fields_autosuggestion_3">
          <materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
                                   materialDesign:TextFieldAssist.HasClearButton="True"
                                   DropDownElevation="Dp0"
                                   Style="{StaticResource MaterialDesignFilledAutoSuggestBox}"
                                   Suggestions="{Binding AutoSuggestBox2Suggestions}"
                                   Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                   ValueMember="Key">
            <materialDesign:AutoSuggestBox.ItemTemplate>
              <DataTemplate>
                <DockPanel>
                  <Border Width="20"
                    Height="20"
                    Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
                    CornerRadius="10" />
                  <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
                </DockPanel>
              </DataTemplate>
            </materialDesign:AutoSuggestBox.ItemTemplate>
          </materialDesign:AutoSuggestBox>
        </smtx:XamlDisplay>
      </StackPanel>

      <StackPanel  Width="256" Margin="0,0,16,16">
        <TextBlock Margin="0,0,0,8"
             Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
             Text="Outlined AutoSuggestBox" />
        <smtx:XamlDisplay UniqueKey="fields_autosuggestion_4">
          <materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
                                   materialDesign:TextFieldAssist.HasClearButton="True"
                                   DropDownElevation="Dp0"
                                   Style="{StaticResource MaterialDesignOutlinedAutoSuggestBox}"
                                   Suggestions="{Binding AutoSuggestBox2Suggestions}"
                                   Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                   ValueMember="Key">
            <materialDesign:AutoSuggestBox.ItemTemplate>
              <DataTemplate>
                <DockPanel>
                  <Border Width="20"
                    Height="20"
                    Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
                    CornerRadius="10" />
                  <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
                </DockPanel>
              </DataTemplate>
            </materialDesign:AutoSuggestBox.ItemTemplate>
          </materialDesign:AutoSuggestBox>
        </smtx:XamlDisplay>
      </StackPanel>
    </WrapPanel>
  </StackPanel>
</UserControl>