How to make background transparent in WPF DatePicker

Question

I am trying to make a DatePicker background transparent in wpf but I can't get rid of this white line. Does any one knows how it is called so I can make it transparent? I painted background blue and border red so the white line is visible to troubleshoot. the end result will not have the white line across the text in the lower right image below. i use this line of code to assign the colors

 <DatePickerTextBox x:Name="PART_TextBox"  Grid.Column="0" Background="Blue" BorderBrush="red" BorderThickness="2"  Opacity="{Binding Path=MinHeight, ElementName=placeholder}"  Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="Stretch" Grid.Row="0" VerticalContentAlignment="Stretch"/>
              

Answer 1

You need to create a custom template that removes the white border. See ContentElement and watermark_decorator below. They have a hardcoded BorderThickness of 1 by default.

<DatePickerTextBox x:Name="PART_TextBox"  Grid.Column="0" Background="Blue" BorderBrush="red" 
                   BorderThickness="2"  Opacity="{Binding Path=MinHeight, ElementName=placeholder}" 
                   HorizontalContentAlignment="Stretch" Grid.Row="0" VerticalContentAlignment="Stretch">
    <DatePickerTextBox.Template>
        <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">
                            <Storyboard>
                                <ColorAnimation Duration="0" Storyboard.TargetName="ContentElement" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/>
                                <ColorAnimation Duration="0" Storyboard.TargetName="watermark_decorator" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/>
                            </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" Storyboard.TargetName="ContentElement" To="0" Storyboard.TargetProperty="Opacity"/>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="PART_Watermark" To="1" Storyboard.TargetProperty="Opacity"/>
                            </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" Storyboard.TargetName="FocusVisual" To="1" Storyboard.TargetProperty="Opacity"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
                    <Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="0"/>
                        <Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="0">
                            <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}"/>
                        <Border x:Name="FocusVisual" BorderBrush="#FF45D6FA" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>
    </DatePickerTextBox.Template>
</DatePickerTextBox>