先看效果图咯：

前面的文章中，button样式告一段落。接下来分享几个TextBox样式。

后续持续更新中~

代码都在git上同步。有需要的可以下载查看。项目地址在之前的文章中都有写哦。

依旧是老规矩，话不多说，上代码咯。

首先要做搜索框当然要有一个搜索的图标啦，幸运的是，fontawesome里面有的~

在Fonts.xaml里面加上这个 图标资源

 <system:String x:Key="FontAwesomeSearch">&#xf002;</system:String>

显示出来就是上面这个。

在Texts.xaml里面写样式，代码如下 ：

<Style x:Key="SearchTextBox" TargetType="TextBox">
        <Setter Property="FontSize" Value="{StaticResource FontSizeRegular}"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="CaretBrush" Value="White"/>
        <Setter Property="Text" Value="66"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Grid>
                        <Border x:Name="border" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="20">
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost" 
                                              HorizontalAlignment="Left"
                                              VerticalAlignment="Center"
                                              Width="100"
                                              Margin="10 0 0 0"
                                              Focusable="False"
                                              HorizontalScrollBarVisibility="Hidden" 
                                              VerticalScrollBarVisibility="Hidden"/>
                                <Button Style="{StaticResource IconGrowButton}"
                                        Content="{StaticResource FontAwesomeSearch}" 
                                        HorizontalAlignment="Right"/>
                            </Grid>
                        </Border>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="True">

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>




效果是这样滴：









哈哈，成功了。再写一个textbox样式

代码如下 :




<Style TargetType="{x:Type TextBox}" x:Key="LineTextBox">
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Margin" Value="0 5 0 5"/>
        <Setter Property="BorderBrush" Value="#007Add"/>
        <Setter Property="BorderThickness" Value="0 0 0 1"/>
        <Setter Property="CaretBrush" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>

        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Grid>
                        <Border x:Name="border" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Border>

                        <TextBlock IsHitTestVisible="False"
                                   Text="{TemplateBinding Tag}"
                                   x:Name="placeholder"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   Padding="{TemplateBinding Padding}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                   Foreground="Gray"
                                   >
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
</Style>
                            </TextBlock.Style>

                        </TextBlock>

                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

效果是这样滴：






下面就是在MainWindow.xaml中使用样式~




<TextBox Style="{StaticResource SearchTextBox}"/>
 <TextBox Width="200" Style="{StaticResource LineTextBox}"
                     Tag="请输入字符"/>

动态效果见文章顶部动图~

看到这里明白了吧，Tag就是水印~

今天就先写到这里了~




分享代码的 目的是学习不是复制粘贴能跑就行哈哈，如有不明白的地方，可以联系我，非常欢迎哈哈。




02

—

经典回顾




往期推荐

C# WPF框架Caliburn.Micro入门实例1

C# WPF MVVM项目实战(进阶①)

C# WPF MVVM项目实战(进阶②)

C# WPF框架Caliburn.Micro快速搭建

C# WPF项目实战

C# WPF mvvm模式下combobox绑定(list<enum>、Dictionary<int,string>)

C# WPF MVVM模式下在主窗体显示子窗体并获取结果

C# WPF Caliburn.Micro框架下利用Mef加载其它项目界面

C# WPF文本框TextEdit不以科学计数法显示

C# 通过正则表达式来限制控件输入有效性

C# datagridview、datagrid、GridControl增加行号

C# =>符号的使用

C# 无意间写了一段线程死锁的代码

C# 看懂这100+行代码,你就真正入门了(经典)

C# WPF项目实战(经典)

WPF 如何修改button圆角(经典)

WPF XAML 为项目设置全局样式