WPF自定义样式系列(二)——TextBox输入框样式(部分带水印)

2017-09-30 12:14:42来源:CSDN作者:qq_36663276人点击

分享

奶油TextBox(不带水印)

样式如图。边框、背景、文字颜色都可以自己改。
这里写图片描述

<Style x:Key="TEXTBOX" TargetType="TextBox">    <Setter Property="Background" Value="Transparent" />    <Setter Property="Cursor" Value="IBeam" />    <Setter Property="Template" >        <Setter.Value>            <ControlTemplate>                <Grid>                    <Border Name="bdr"  CornerRadius="3" Background="White" BorderThickness="1" >                        <Border.Effect>                            <DropShadowEffect ShadowDepth="0" Color="{TemplateBinding BorderBrush}" BlurRadius="5" />                        </Border.Effect>                    </Border>                    <Grid Background="Transparent">                        <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" BorderThickness="0"  IsTabStop="False" Margin="4,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center" Foreground="{TemplateBinding Foreground}" />                    </Grid>                </Grid>                <ControlTemplate.Triggers>                    <Trigger Property="IsFocused" Value="True"  >                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="LightGray" BlurRadius="8" />                            </Setter.Value>                        </Setter>                    </Trigger>                    <Trigger Property="IsFocused" Value="False">                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="LightGray" BlurRadius="5" />                            </Setter.Value>                        </Setter>                    </Trigger>                </ControlTemplate.Triggers>            </ControlTemplate>        </Setter.Value>    </Setter></Style>

使用方法:

<TextBox Width="200" Height="30" Style="{StaticResource TEXTBOX}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,300,0,0" BorderBrush="Gray" Foreground="Gray"/>

单下划线TextBox(带水印)

这里写图片描述

<Style x:Key="TEXTBOX_1" TargetType="TextBox">    <Setter Property="Cursor" Value="IBeam" />    <Setter Property="Template" >        <Setter.Value>            <ControlTemplate TargetType="TextBox">                <Grid>                    <Border Name="bdr" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" BorderThickness="0,0,0,1" >                        <Border.Effect>                            <DropShadowEffect ShadowDepth="0" Color="White" BlurRadius="5"/>                        </Border.Effect>                    </Border>                    <Grid Background="Transparent">                        <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" BorderThickness="0"  IsTabStop="False" Margin="4,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center" Foreground="{TemplateBinding Foreground}" />                        <TextBlock Margin="7,7,1,1" x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Text="{TemplateBinding Tag}" VerticalAlignment="Top" Foreground="{TemplateBinding Foreground}" Opacity="0.8"/>                    </Grid>                </Grid>                <ControlTemplate.Triggers>                    <Trigger Property="IsFocused" Value="True"  >                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="White" BlurRadius="10" />                            </Setter.Value>                        </Setter>                    </Trigger>                    <Trigger Property="Text" Value="">                        <Setter Property="Visibility" TargetName="WaterMark" Value="Visible"/>                    </Trigger>                    <Trigger Property="IsFocused" Value="False">                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="White" BlurRadius="5" />                            </Setter.Value>                        </Setter>                    </Trigger>                </ControlTemplate.Triggers>            </ControlTemplate>        </Setter.Value>    </Setter></Style>

使用方法:

<TextBox Tag="请输入文字" Width="200" Height="30" Style="{StaticResource TEXTBOX}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,20,0,0" BorderBrush="Gray" Foreground="Gray"/>

双线TextBox(带水印)

这里写图片描述

 <Style x:Key="TEXTBOX_2" TargetType="TextBox">    <Setter Property="Cursor" Value="IBeam" />    <Setter Property="Template" >        <Setter.Value>            <ControlTemplate TargetType="TextBox">                <Grid>                    <Border Name="bdr" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" BorderThickness="0,1,0,1" >                        <Border.Effect>                            <DropShadowEffect ShadowDepth="0" Color="LightGray" BlurRadius="0"/>                        </Border.Effect>                    </Border>                    <Grid Background="Transparent">                        <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" BorderThickness="0"  IsTabStop="False" Margin="4,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center" Foreground="{TemplateBinding Foreground}" />                        <TextBlock Margin="7,7,1,1" x:Name="WaterMark" Focusable="False" Visibility="Collapsed" Text="{TemplateBinding Tag}" VerticalAlignment="Top" Foreground="{TemplateBinding Foreground}" Opacity="0.8"/>                    </Grid>                </Grid>                <ControlTemplate.Triggers>                    <Trigger Property="IsFocused" Value="True"  >                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="LightGray" BlurRadius="2" />                            </Setter.Value>                        </Setter>                    </Trigger>                    <Trigger Property="Text" Value="">                        <Setter Property="Visibility" TargetName="WaterMark" Value="Visible"/>                    </Trigger>                    <Trigger Property="IsFocused" Value="False">                        <Setter TargetName="bdr" Property="Effect" >                            <Setter.Value>                                <DropShadowEffect ShadowDepth="0" Color="LightGray" BlurRadius="0" />                            </Setter.Value>                        </Setter>                    </Trigger>                </ControlTemplate.Triggers>            </ControlTemplate>        </Setter.Value>    </Setter></Style>

使用方法:

<TextBox Tag="请输入文字" Width="200" Height="30" Style="{StaticResource TEXTBOX}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,150,0,0" BorderBrush="Gray" Foreground="Gray"/>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台