Styles et modèles de contrôle TextBox

Styles et modèles de zone de texte

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique décrit les styles et les modèles du contrôle TextBox. Vous pouvez modifier ces ressources et l’élément ControlTemplate par défaut pour donner au contrôle un aspect unique.

États visuels

Il s’agit des valeurs VisualState définies dans le style par défaut du contrôle.

Le tableau ci-dessous répertorie les états visuels de la zone de texte.

Nom VisualStateNom VisualStateGroupDescription
NormalCommonStatesÉtat par défaut.
DisabledCommonStatesLe contrôle est désactivé.
FocusedCommonStatesLe contrôle a le focus.
PointerOverCommonStatesLe pointeur est positionné au-dessus du contrôle.
ButtonVisibleButtonStatesLe bouton de suppression est affiché.
ButtonCollapsedButtonStatesLe bouton de suppression n’est pas affiché.

 

Le tableau ci-dessous répertorie les états visuels du bouton de suppression de la zone de texte.

Nom VisualStateNom VisualStateGroupDescription
NormalCommonStatesÉtat par défaut.
PointerOverCommonStatesLe pointeur est positionné au-dessus du contrôle.
PressedCommonStatesLe contrôle fait l’objet d’un appui.
DisabledCommonStatesLe contrôle est désactivé.

 

Ressources de thème

Ces ressources sont utilisées dans le style par défaut du contrôle.

Pinceaux du thème sombre

Pour changer les couleurs du contrôle dans le thème sombre, remplacez ces pinceaux dans 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"/>

Pinceaux du thème clair

Pour changer les couleurs du contrôle dans le thème clair, remplacez ces pinceaux dans 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"/>

Autres ressources


<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>

Ressources partagées

Le modèle de contrôle utilise les ressources partagées avec les autres modèles de contrôle. La modification de ces valeurs affectera les autres contrôles qui utilisent ces ressources.



<FontFamily x:Key="SymbolThemeFontFamily">Segoe UI Symbol</FontFamily>
<FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily>
<x:Double x:Key="ControlContentThemeFontSize">14.667</x:Double>

Pour plus d’informations sur les ressources de thème, notamment sur les valeurs utilisées pour le thème HighContrast, voir la référence aux ressources de thème XAML.

Style par défaut


<!-- Default style for Windows.UI.Xaml.Controls.TextBox -->
<Style TargetType="TextBox">
    <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="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
    <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="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Grid.Resources>
                        <Style x:Name="DeleteButtonStyle" 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="&#xE0A4;"
                                                           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="DeleteButton"
                                                                   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}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  Margin="{TemplateBinding BorderThickness}"
                                  Padding="{TemplateBinding Padding}"
                                  IsTabStop="False"
                                  AutomationProperties.AccessibilityView="Raw"
                                  ZoomMode="Disabled" />
                    <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="DeleteButton"
                            Grid.Row="1"
                            Style="{StaticResource DeleteButtonStyle}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            IsTabStop="False"
                            Grid.Column="1"
                            Visibility="Collapsed"
                            FontSize="{TemplateBinding FontSize}"
                            VerticalAlignment="Stretch"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


 

 

Afficher:
© 2016 Microsoft