DatePickerの境界線の色を変更します

Question

DatePickerコントロールのフォーカス状態の境界線の色を変更したいと思います。 デフォルトのスタイルテンプレートを見て、VisualStateManagerのフォーカス状態が表示されませんでした。

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

は、どのように私は何の問題に変化がなかった... DatePickerの境界線用のフォーカス状態の色を変更できます。次のように私が見た

唯一のことはTextBoxのための原始的な制御ましたTextBox、ComboBoxおよびCheckBoxコントロールのこの色です。

助けてください！

Answer 1

コントロールのフォーカス状態はVisualStateManagerではありません。 は、DatePickerの状態グループとフォーカス/非フォーカス状態を追加することは可能ですが、ここでは最善のアプローチではありません。です。

DatePicker制御用template

は、MSDNによると、「 DatePickerのテキスト入力を表す」 DatePickerTextBox controlを含んでいます。

DatePickerTextBox用のテンプレートを見ると、我々はそれがFocusStatesステートグループを持っている、との両方UnfocusedとFocused状態の定義がわかります。我々はまた、この行を見つける：あなたが見ることができるよう

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

ので、デフォルトは「色を重視」#FF6DBDD1です。 DatePickerTextBoxのFocused状態では、この境界線のOpacityプロパティが1に設定されます。

Focused州の境界線の色を変更するには、このテンプレートのコピーを作成し、#FF6DBDD1を目的の色に置き換えます。次に、DatePickerテンプレートのコピーを作成します。には、変更されたテンプレートを使用する必要があります。

また、あなたは、DatePickerTextBoxテンプレートのコピーを作成する境界線の色に調整を行い、DatePickerTextBoxにTargetTypeセットとスタイルでこのテンプレートを配置することができます：

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

うまくいけば、これはあなたに便利です！

---

EDIT：DatePickerTextBox
のデフォルトのテンプレートコントロールの既定のスタイルおよびテンプレートのほとんどはon MSDNご利用いただけます。しかし（何らかの理由で）DatePickerTextBoxはありません。 Expression Blendのコピーを持っている場合は、コントロールの外観を操作する場合には非常にお勧めです（無料のトライアルhereをダウンロードしてください）。

DatePickerを右クリックしてください「テンプレートの編集 - >コピーの編集...」をクリックします。 [オブジェクトとタイムライン]パネルにDatePickerTextBoxが表示されます。それを右クリックし、 "Edit Template - > Copy a Edit ..."をもう一度クリックします。 [オブジェクトとタイムライン]パネルでテンプレートを右クリックし、[XAMLの表示]をクリックします。

また、このような作業をしている場合は、Blendを十分にお勧めできません。長期間に渡って多くの時間を節約できます（XAML、スタイル、テンプレート、それらがどのように合っているかなど）。

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

長さについて謝罪し、（同じ問題を持っていた）this threadに多くの感謝：あなたはそれへのアクセスを持っていない場合は、しかし、ここでDatePickerTextBox制御のためのデフォルトのテンプレートがあります。

Answer 2

はあなたのためにこの作業を行います。

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); 
    } 
}