PasswordBox styles and templates
This topic describes the styles and templates for the PasswordBox control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.
Visual states
These are the VisualState values defined in the control's default style.
This table lists the visual states for the password box.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
Normal | CommonStates | The default state. |
Disabled | CommonStates | The control is disabled. |
Focused | CommonStates | The control has focus. |
PointerOver | CommonStates | The pointer is positioned over the control. |
ButtonVisible | ButtonStates | The reveal button is shown. |
ButtonCollapsed | ButtonStates | The reveal button is not shown. |
This table lists the visual states for the password box's reveal button.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
Normal | CommonStates | The default state. |
PointerOver | CommonStates | The pointer is positioned over the control. |
Pressed | CommonStates | The control is pressed. |
Disabled | CommonStates | The control is disabled. |
Theme resources
These resources are used in the control's default style.
Dark theme brushes
To change the colors of the control in the dark theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxButtonBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverBackgroundThemeBrush" Color="#FFDEDEDE" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxButtonPressedBackgroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxButtonPressedBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#66FFFFFF" /> <SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" /> <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" /> <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="#FF4617B4"/>
Light theme brushes
To change the colors of the control in the light theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#A3000000" /> <SolidColorBrush x:Key="TextBoxButtonBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverBackgroundThemeBrush" Color="#FFDEDEDE" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonPointerOverForegroundThemeBrush" Color="Black" /> <SolidColorBrush x:Key="TextBoxButtonPressedBackgroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxButtonPressedBorderThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="#66CACACA" /> <SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#26000000" /> <SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" /> <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" /> <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="#FF4617B4"/>
Other resources
<x:Double x:Key="TextControlBackgroundThemeOpacity">0.8</x:Double> <x:Double x:Key="TextControlBorderThemeOpacity">0.8</x:Double> <x:Double x:Key="TextControlPointerOverBackgroundThemeOpacity">0.87</x:Double> <x:Double x:Key="TextControlPointerOverBorderThemeOpacity">0.87</x:Double> <x:Double x:Key="TextControlThemeMinHeight">32</x:Double> <x:Double x:Key="TextControlThemeMinWidth">64</x:Double> <Thickness x:Key="TextControlBorderThemeThickness">2</Thickness> <Thickness x:Key="TextControlThemePadding">10,3,10,5</Thickness>
Shared resources
The control template uses these resources that are shared with other control templates. Changing these values will affect other controls that use these resources.
<FontFamily x:Key="SymbolThemeFontFamily">Segoe UI Symbol</FontFamily> <FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily> <x:Double x:Key="ControlContentThemeFontSize">14.667</x:Double>
For more info on theme resources, including the values that are used for the HighContrast theme, see XAML theme resources reference.
Default style
<!-- Default style for Windows.UI.Xaml.Controls.PasswordBox --> <Style TargetType="PasswordBox"> <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" /> <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" /> <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" /> <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" /> <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" /> <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" /> <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" /> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" /> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /> <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PasswordBox"> <Grid> <Grid.Resources> <Style x:Name="RevealButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPointerOverBackgroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPointerOverBorderThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPointerOverForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPressedBackgroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPressedBorderThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxButtonPressedForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0" /> <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="BorderElement" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}"/> <Border x:Name="BackgroundElement" Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}"> <TextBlock x:Name="GlyphElement" Foreground="{ThemeResource TextBoxButtonForegroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" FontStyle="Normal" Text="" FontFamily="{ThemeResource SymbolThemeFontFamily}" AutomationProperties.AccessibilityView="Raw"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Normal"> <Storyboard> <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlBackgroundThemeOpacity}" /> <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlBorderThemeOpacity}" /> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlPointerOverBackgroundThemeOpacity}" /> <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlPointerOverBorderThemeOpacity}" /> </Storyboard> </VisualState> <VisualState x:Name="Focused" /> </VisualStateGroup> <VisualStateGroup x:Name="ButtonStates"> <VisualState x:Name="ButtonVisible"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RevealButton" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="ButtonCollapsed" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Border x:Name="BackgroundElement" Grid.Row="1" Background="{TemplateBinding Background}" Margin="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.RowSpan="1"/> <Border x:Name="BorderElement" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.RowSpan="1"/> <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}" Margin="0,4,0,4" Grid.ColumnSpan="2" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="Semilight" /> <ScrollViewer x:Name="ContentElement" Grid.Row="1" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" IsTabStop="False" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw"/> <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" IsTabStop="False" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" IsHitTestVisible="False"/> <Button x:Name="RevealButton" Grid.Row="1" Style="{StaticResource RevealButtonStyle}" BorderThickness="{TemplateBinding BorderThickness}" IsTabStop="False" Grid.Column="1" Visibility="Collapsed" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Stretch"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>