Modifier la couleur de bordure pour DatePicker

Question

Je souhaite modifier la couleur de la bordure pour l'état de mise au point sur le contrôle DatePicker. J'ai regardé le modèle de style par défaut et je n'ai vu aucun état de mise au point pour le VisualStateManager.

La seule chose que je voyais était un contrôle primitif pour l'TextBox comme suit:

<controlsPrimitives:DatePickerTextBox x:Name="TextBox" SelectionBackground="{TemplateBinding SelectionBackground}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="0" /> 

Comment puis-je changer la couleur de l'état de mise au point pour la frontière pour la DatePicker ... J'ai eu aucun problème changer cette couleur pour les contrôles TextBox, ComboBox et CheckBox.

Aidez-nous!

Answer 1

Vous avez raison, le contrôle DatePicker n'a pas d'état de mise au point pour le VisualStateManager. Notez qu'il est possible d'ajouter un groupe d'état et des états focalisés/non focalisés pour le DatePicker, mais ce ne serait pas la meilleure approche ici.

Le template pour le contrôle DatePicker contient un DatePickerTextBox control, qui, selon MSDN «représente l'entrée de texte d'un DatePicker ».

En regardant le modèle pour le DatePickerTextBox, nous constatons qu'il a un groupe d'Etat FocusStates et définitions pour les deux Unfocused et Focused états. On trouve aussi cette ligne:

<Border x:Name="FocusVisual" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/> 

Comme vous pouvez le voir, la valeur par défaut « concentré de couleur » est #FF6DBDD1. L'état Focused pour le DatePickerTextBox définit la propriété Opacity de cette bordure sur 1.

Pour modifier la couleur de la bordure de l'état Focused, vous pouvez créer une copie de ce modèle en remplaçant #FF6DBDD1 par la couleur de votre choix. Ensuite, créez une copie du modèle DatePicker, qui doit spécifier que le DatePickerTextBox qu'il contient doit utiliser votre modèle modifié.

Vous pouvez également créer une copie du modèle DatePickerTextBox, effectuer le réglage de la couleur de la bordure, et placez ce modèle dans un style avec TargetType ensemble à DatePickerTextBox:

<Style x:Key="MyStyle1" TargetType="DatePickerTextBox"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="DatePickerTextBox"> 
       <!-- Modified template for DatePickerTextBox goes here --> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Espérons que cela est utile pour vous !

---

EDIT: Modèle par défaut pour DatePickerTextBox
La plupart des styles par défaut et des modèles pour les contrôles sont disponibles on MSDN. Cependant (pour une raison quelconque), DatePickerTextBox ne l'est pas. Si vous avez une copie de Expression Blend (que je recommande fortement si vous travaillez avec l'apparition des contrôles, il est précieux - télécharger un essai gratuit here), vous pouvez effectuer les opérations suivantes:

Faites un clic droit sur un DatePicker , cliquez sur "Modifier le modèle -> Modifier une copie ...". Vous verrez le DatePickerTextBox dans le panneau "Objets et chronologie".Faites un clic droit dessus, cliquez une fois de plus sur "Modifier le modèle -> Modifier une copie ...". Vous pouvez ensuite cliquer avec le bouton droit sur le modèle dans le panneau "Objets et chronologie" et cliquer sur "Afficher le code XAML".

Encore une fois, si vous faites un travail comme celui-ci, je ne peux pas recommander suffisamment Blend. Cela vous fera gagner beaucoup de temps à long terme (et vous apprendrez beaucoup de choses sur le XAML, les styles, les modèles, comment ils s'emboîtent, etc.). Si vous n'avez pas accès, cependant, voici le modèle par défaut pour le contrôle DatePickerTextBox:

<Style x:Key="DatePickerTextBoxStyle" TargetType="System_Windows_Controls_Primitives:DatePickerTextBox"> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="System_Windows_Controls_Primitives:DatePickerTextBox"> 
      <Grid x:Name="Root"> 
       <Grid.Resources> 
        <SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/> 
       </Grid.Resources> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CommonStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition GeneratedDuration="0"/> 
         <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement"> 
           <SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/> 
          </ColorAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement2"> 
           <SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/> 
          </ColorAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        </VisualStateGroup> 
        <VisualStateGroup x:Name="WatermarkStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition GeneratedDuration="0"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Unwatermarked"/> 
        <VisualState x:Name="Watermarked"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Watermark"/> 
         </Storyboard> 
        </VisualState> 
        </VisualStateGroup> 
        <VisualStateGroup x:Name="FocusStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition GeneratedDuration="0"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Unfocused"/> 
        <VisualState x:Name="Focused"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/> 
         </Storyboard> 
        </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1"> 
        <Grid x:Name="WatermarkContent" Background="{TemplateBinding Background}"> 
        <Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/> 
        <Border x:Name="ContentElement2" BorderBrush="#FFFFFFFF" BorderThickness="1"> 
         <ContentControl x:Name="Watermark" Background="{TemplateBinding Background}" Content="{TemplateBinding Watermark}" Foreground="{StaticResource WatermarkBrush}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Opacity="0" Padding="2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
        <Border x:Name="FocusVisual" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/> 
        </Grid> 
       </Border> 
      </Grid> 
     </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Toutes mes excuses pour la longueur, et un grand merci à this thread (qui avait le même problème).

Answer 2

Est-ce que ce travail pour vous:

public class MyDatePicker : DatePicker 
{ 
    public MyDatePicker() 
    { } 

    public override void OnApplyTemplate() 
    { 
     base.OnApplyTemplate(); 

     DatePickerTextBox textBox = (DatePickerTextBox)this.GetTemplateChild("TextBox"); 
     textBox.GotFocus += new RoutedEventHandler(textBox_GotFocus); 
     textBox.LostFocus += new RoutedEventHandler(textBox_LostFocus); 
    } 

    void textBox_GotFocus(object sender, RoutedEventArgs e) 
    { 
     (sender as DatePickerTextBox).BorderBrush = new SolidColorBrush(Colors.Red); 
    } 

    void textBox_LostFocus(object sender, RoutedEventArgs e) 
    { 
     (sender as DatePickerTextBox).ClearValue(DatePickerTextBox.BorderBrushProperty); 
    } 
}