WPF DatePicker inner border deactivate

Question

I try to style a wpf datepicker in my ideas but have some trouble with deactivating the inner border. When i hover over the datepicker or click into it, a light blue border appears around the input area. You can see it clearly on the screenshot. How can i deactivate this border?

Try to extract the style using Blend for Visual Studio. And take a loot at what style is in there and try to disable the borders or give them a different color. This can also be a Chrome thingy that is harder to style. — Jordy van Eijk, Jul 12 '17 at 11:32
Unfortunatelly i have to use Visual Studio Express due to my working environment. As i understood it is not possible to use blend under express? — Julian, Jul 12 '17 at 11:39
I found out how to extract to style without blend. just followed the following thread: https://stackoverflow.com/questions/8825030/how-to-extract-default-control-template-in-visual-studio — Julian, Jul 12 '17 at 12:07

score 2 · Accepted Answer · answered Jul 12 '17 at 12:17

Override the template of the DatePickerTextBox and remove the visual state transitions that make the blue border appear:

<DatePicker>
    <DatePicker.Resources>
        <Style TargetType="DatePickerTextBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DatePickerTextBox}">
                        <Grid>
                            <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" />
                                </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="PART_Watermark"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
                                <Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
                                    <Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
                                        <ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2"/>
                                    </Border>
                                    <ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DatePicker.Resources>
</DatePicker>

And no, there is no easier way :)

This is it. Crazy and not intuitive in my opinion. But it works. Thanks a lot! I will try to put it into a static resource to keep the xaml cleaner — Julian, Jul 12 '17 at 12:36

score 0 · Answer 2 · answered Jul 12 '17 at 11:54

0

You can modify the default DatePicker ControlTemplate to give the control a unique appearance. For more information, see DatePicker Styles and Templates.

answered Jul 12 '17 at 11:54

acidbabies

97
7

As i understood it correctly, the blue border i want to get rid of is part of the datepickertextbox. so i added a BorderBrush to this tag in the default style. This only sets the border around the text box and leaves the blue border as it is – Julian Jul 12 '17 at 12:10

WPF DatePicker inner border deactivate

2 Answers2