WPF DatePicker 文本框白色边框不可编辑答案

【问题标题】：WPF DatePicker textbox white border not editableWPF DatePicker 文本框白色边框不可编辑
【发布时间】：2017-05-17 09:30:31
【问题描述】：

我正在编辑DatePicker 的控件模板，但TextBox 样式存在问题。文本周围有一个白色边框，它不是实际的TextBox 边框。以我目前的风格，我将TextBox 放在Border 中，TextBox Background 设置为透明，BorderThickness 设置为 0。

<Border Grid.Column="0" 
        Height="25"
        Background="DarkKhaki"
        CornerRadius="5"
        Grid.ColumnSpan="1">

<DatePickerTextBox x:Name="PART_TextBox" 
                   Background="Transparent"
                   Grid.Column="0" 
                   BorderThickness="0"
                   Focusable="{TemplateBinding Focusable}" 
                   HorizontalContentAlignment="Stretch" 
                   Grid.Row="0" 
                   Grid.ColumnSpan="1" 
                   Margin="1.143,0,1.056,0"/>
                            </Border>

这就是DatePicker 在这种风格下的样子：

如果我将Border 添加到TextBox，它会出现在白色Border 周围：

如果有人知道如何删除这个额外的Border，将不胜感激！

【问题讨论】：

标签： wpf xaml datepicker textbox controltemplate

【解决方案1】：

您可以为DatePickerTextBox 创建一个新的Style：

XAML 样式

这里只是复制了原来的Style，把两个Border的Visibility改成了Hidden。

<Style x:Key="DatePickerTextBoxStyle1" TargetType="{x:Type DatePickerTextBox}">


<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <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">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement"/>
                                            <ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="watermark_decorator"/>
                                        </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="PART_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}" 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" Visibility="Hidden"/>
                                    <Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1" Visibility="Hidden">
                                        <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>
                </Setter.Value>
            </Setter>
        </Style>

XAML

    <Border
        Background="DarkKhaki" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center"
        CornerRadius="5">
        <DatePickerTextBox 
            x:Name="datePickerTextBox" 
            Height="25" 
            Width="120" 
            TextWrapping="Wrap" 
            Text="DatePickerTextBox" 
            Background="Transparent"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"                 
            Style="{DynamicResource DatePickerTextBoxStyle1}"/>
    </Border>

预览

如果您创建一个新的Style，您还可以在CornerRadius 中包含您的“卡其色”Border。

感谢@OfficeAddinDev

此答案通过设置“watermark_decorator”边框来移除边框。 Visibility = Hidden。只需将其更改为 Visible 并更改 BorderThickness = 0 即可显示“选择日期”而没有威胁性的白色边框。

【讨论】：

谢谢！虽然我将两个边框设置为可见并将 BorderThickness 更改为 0，否则“选择日期”文本不可见。
此答案通过设置“watermark_decorator”Border.Visibility = Hidden 来移除边框。只需将其更改为可见并更改 BorderThickness = 0 即可显示“选择日期”而没有威胁性的白色边框。
@OfficeAddinDev 谢谢你的回答！我已经添加了你的解决方案?

【解决方案2】：

文本周围有一个白色边框，它不是实际的 TextBox 边框

是的，是的。 Border 是 DatePickerTextBox 的默认控件模板的一部分。

如果您不想要它，您将按照@Dominic Jonas 的建议覆盖模板。您应该能够摆脱两个内部 Border 元素，它们都具有硬编码的 BorderThickness 或 1：

<Border Grid.Column="0" 
        Height="25"
        Background="DarkKhaki"
        CornerRadius="5"
        Grid.ColumnSpan="1">
    <DatePickerTextBox x:Name="PART_TextBox" 
                   Background="Transparent"
                   Grid.Column="0" 
                   BorderThickness="0"
                   HorizontalContentAlignment="Stretch" 
                   Grid.Row="0" 
                   Grid.ColumnSpan="1" 
                   Margin="1.143,0,1.056,0">
        <DatePickerTextBox.Template>
            <ControlTemplate TargetType="DatePickerTextBox">
                <Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2"/>
                    <ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </DatePickerTextBox.Template>
    </DatePickerTextBox>
</Border>

【讨论】：