Изменить цвет границы для DatePicker

Question

Я хотел бы изменить цвет рамки для состояния фокуса на элементе управления DatePicker.Я взглянул на шаблон стиля по умолчанию и не увидел никакого состояния фокуса для VisualStateManager.

. Единственное, что я увидел, это примитивный элемент управления для TextBox, как показано ниже:

<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, ComboBox и CheckBox.

Пожалуйста, помогите!

Answer 1

Вы правы, элемент управления DatePicker не имеет состояния фокуса для VisualStateManager.Обратите внимание, что позволяет добавить группу состояний и Сосредоточенные / Несосредоточенные состояния для DatePicker, но здесь это не лучший подход.

Шаблон для элемента управления DatePicker содержит элемент управления DatePickerTextBox , который, согласно MSDN, "представляет собой текстовый ввод DatePicker".

Глядя на шаблон для DatePickerTextBox, мы обнаруживаем, что он имеет группу состояний FocusStates и определения для состояний Unfocused и Focused.Мы также находим эту строку:

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

Таким образом, как вы можете видеть, «сфокусированный цвет» по умолчанию равен #FF6DBDD1.Состояние Focused для DatePickerTextBox устанавливает свойство Opacity этой границы на 1.

Чтобы изменить цвет границы для состояния Focused, вы можете создать копию этого шаблона, заменив #FF6DBDD1 на нужный вам цвет.Затем создайте копию шаблона DatePicker, в которой должно быть указано, что DatePickerTextBox, содержащийся в нем, должен использовать ваш измененный шаблон.

В качестве альтернативы, вы можете создать копию шаблона DatePickerTextBox, сделатькорректировка цвета границы и поместите этот шаблон в стиль с TargetType, установленным на 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>

Надеюсь, это полезно для вас!

---

РЕДАКТИРОВАТЬ: Шаблон по умолчанию для DatePickerTextBox
Большинство стилей и шаблонов по умолчанию для элементов управления доступны на MSDN .Однако (по какой-либо причине) DatePickerTextBox нет.Если у вас есть копия Expression Blend (которую я настоятельно рекомендую, если вы работаете с внешним видом элементов управления; она неоценима - загрузите бесплатную пробную версию здесь ), вы можете сделать следующее:

Щелкните правой кнопкой мыши DatePicker, выберите «Редактировать шаблон -> Редактировать копию ...».Вы увидите DatePickerTextBox на панели «Объекты и временная шкала».Щелкните правой кнопкой мыши на этом, нажмите «Изменить шаблон -> Редактировать копию ...» еще раз.Затем вы можете щелкнуть правой кнопкой мыши Шаблон на панели «Объекты и Временная шкала» и нажать «Просмотр XAML».

Опять же, если вы выполняете какую-либо работу, подобную этой, я не могу рекомендовать Blend достаточно высоко.Это сэкономит вам много времени в долгосрочной перспективе (и вы узнаете много нового о XAML, стилях, шаблонах, их совместимости и т. Д.).Однако, если у вас нет к нему доступа, вот шаблон по умолчанию для элемента управления 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> 

Извинения за длину, и большое спасибо этой теме (который имел ту же проблему).

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