我正在编辑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
,我们将不胜感激!
答案 0 :(得分:3)
您可以为Style
:
DatePickerTextBox
这只是原始Style
的副本,并将两个Visibility
的{{1}}更改为Border
。
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>
如果您创建新的 <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>
,还可以将{Khaki“Style
与Border
包括在一起。
感谢@OfficeAddinDev
此答案通过设置“watermark_decorator”边框来删除边框。 CornerRadius
。只需将其更改为Visibility = Hidden
并更改Visible
,而不是显示“选择日期”,而不会出现威胁性的白色边框。
答案 1 :(得分:0)
文本周围有一个白色边框,而不是实际的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>