WPF简单⾃定义控件模板之TextBox
WPF中⾃带的TextBox的外观如下：
现在要把它变成有⽔印提⽰的TextBox，并且主题可以改变：
⽩⾊主题：
⿊⾊主题：
以下是⾃定义控件需要考虑的：
1.需要为TextBox增加⼀个⽔印属性，并且这个⽔印属性可以⾃定义设置
2.⿊⽩风格的颜⾊样式
⽔印属性
采⽤附加属性来给TextBox增加⽔印属性：
public class TextBoxHelper: DependencyObject
{
public static string GetWaterMark(DependencyObject obj)
{
return(string)obj.GetValue(WaterMarkProperty);
}
public static void SetWaterMark(DependencyObject obj,string value)
{
obj.SetValue(WaterMarkProperty,value);
}
// Using a DependencyProperty as the backing store for WaterMark. This enables animation, styling, binding,
public static readonly DependencyProperty WaterMarkProperty =
DependencyProperty.RegisterAttached("WaterMark",typeof(string),typeof(TextBoxHelper),new PropertyMetadata("请输⼊值")); }
TextBox的模板中增加⽔印⽀持
先把系统的TextBox的模板拿到：
这样我们在系统的模板上更改。
增加⽔印，其实就是在Border下再增加⼀个TextBlock，如果TextBox的Text为空，则显⽰⽔印，否则不显⽰。修改后的模板如下：
其中使⽤到了helper:TextBoxHelper.WaterMark需要引⽤xmlns:helper="clr-namespace:MyControls2020.Helper
<Style Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource TextBox.BackgroundColor}"/>
<Setter Property="BorderBrush" Value="{DynamicResource TextBox.NotMouseOver.BorderBrushColor}"/>
<Setter Property="Foreground" Value="{DynamicResource TextBox.ForegroundColor}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="helper:TextBoxHelper.WaterMark" Value="请输⼊信息"></Setter>
<Setter Property="CaretBrush" Value="{DynamicResource TextBox.ForegroundColor}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThic kness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<TextBlock Margin="2,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" x:Name="PART_WaterMark" Text="{TemplateBinding help er:TextBoxHelper.WaterMark}" Foreground="{DynamicResource TextBox.WaterMarkColor}"></TextBlock>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/ >
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<!--<Setter Property="Opacity" TargetName="border" Value="0.56"/>-->
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource TextBox.NotMouseOver.BorderBrushColor}"></Setter >
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource TextBox.MouseOver.BorderBrushColor}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource TextBox.MouseOver.BorderBrushColor}"/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter TargetName="PART_WaterMark" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
borderbox</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource{x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
关键点：
<Trigger Property="Text" Value="">
<Setter TargetName="PART_WaterMark" Property="Visibility" Value="Visible"></Setter>
</Trigger>
这⼀句触发器，控制了⽔印的显⽰与隐藏
上⾯⽤到了⼏个颜⾊样式，需要在⿊⽩风格中去定义它们：
⽩⾊风格：
<ResourceDictionary xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
x="schemas.microsoft/winfx/2006/xaml"
local="clr-namespace:MyControls2020">
<SolidColorBrush Key="Basic.Window.BackgroundColor" Color="White"></SolidColorBrush>
<SolidColorBrush Key="Basic.ForegroundColor" Color="Black"></SolidColorBrush>
<!--#region TextBox-->
<SolidColorBrush Key="TextBox.BackgroundColor" Color="Transparent"></SolidColorBrush>
<SolidColorBrush Key="TextBox.ForegroundColor" Color="Black"></SolidColorBrush>
<SolidColorBrush Key="TextBox.MouseOver.BorderBrushColor" Color="Blue" Opacity="0.5"></SolidColorBrush>
<SolidColorBrush Key="TextBox.NotMouseOver.BorderBrushColor" Color="Gray"></SolidColorBrush>
<SolidColorBrush Key="TextBox.WaterMarkColor" Color="Gray"></SolidColorBrush>
<!--#endregion-->
</ResourceDictionary>
⿊⾊风格
<ResourceDictionary xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
x="schemas.microsoft/winfx/2006/xaml"
local="clr-namespace:MyControls2020">
<SolidColorBrush Key="Basic.Window.BackgroundColor" Color="Black"></SolidColorBrush>
<SolidColorBrush Key="Basic.ForegroundColor" Color="White"></SolidColorBrush>
<!--#region TextBox-->
<SolidColorBrush Key="TextBox.BackgroundColor" Color="Transparent"></SolidColorBrush>
<SolidColorBrush Key="TextBox.ForegroundColor" Color="White"></SolidColorBrush>
<SolidColorBrush Key="TextBox.MouseOver.BorderBrushColor" Color="#FF16ECE2" Opacity="0.5"></SolidColorBrush>
<SolidColorBrush Key="TextBox.NotMouseOver.BorderBrushColor" Color="Gray"></SolidColorBrush>
<SolidColorBrush Key="TextBox.WaterMarkColor" Color="Gray"></SolidColorBrush>
<!--#endregion-->
</ResourceDictionary>
注意：两个颜⾊样式的字典中的KEY值必须完全⼀样
使⽤⾃定义的TextBox
<Window Class="MyControls2020.Window_Black"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
x="schemas.microsoft/winfx/2006/xaml"
d="schemas.microsoft/expression/blend/2008"
mc="/markup-compatibility/2006"
local="clr-namespace:MyControls2020"
helper="clr-namespace:MyControls2020.Helper"
Ignorable="d"
Title="Window_Black" Height="450" Width="800" Background="{DynamicResource Basic.Window.BackgroundColor}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="BlackStyle.xaml"></ResourceDictionary>
<ResourceDictionary Source="TextBox.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBox Height="30" Width="200"TextBoxHelper.WaterMark="请输⼊姓名" Style="{DynamicResource TextBoxStyle1}"></TextBox> </Grid>
</Window>
这两个资源字典
<ResourceDictionary Source="BlackStyle.xaml"></ResourceDictionary>
<ResourceDictionary Source="TextBox.xaml"></ResourceDictionary>
是上⾯定义的⿊⾊颜⾊样式和TextBox的模板，使⽤的时候需要引⽤
helper:TextBoxHelper.WaterMark="请输⼊姓名"便是使⽤附加属性来设置TextBox的提⽰⽔印
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论