Rich Application

Search TextBox – WPF

Posted on: February 22, 2009

This is an simple style for Textbox for using search. Here I am using Datatrigger to find content of textbox. If it is content is empty textbox will show “Search” or else textbox will display the content.


This is the style with simple animation šŸ™‚

  <setter Property="Template">
                        </setter><setter .Value>
                            <controltemplate TargetType="{x:Type TextBox}">
                                <border CornerRadius="2" BorderThickness="1" BorderBrush="#FFCCCCCC" ClipToBounds="True">
                                    <grid>


                                        <textblock Visibility="Collapsed" x:Name="emptyText"   HorizontalAlignment="Left" 
                                                   VerticalAlignment="Top" Margin="2,2,0,0" Text="Search" 
                                               TextWrapping="Wrap" FontFamily="Calibri" FontSize="12" 
                                               Foreground="#FF808080" FontStyle="Italic" />

                                        <border x:Name="Bd" SnapsToDevicePixels="True"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" >
                                            </border><border .Background>
                                                <solidcolorbrush Color="#00FFFFFF" x:Name="solidColor"/>
                                            </border>
                                            <scrollviewer Opacity=".6" x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                        </grid></border>
                                    
                                
                                </controltemplate><controltemplate .Triggers>

                                    <datatrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                     Path=Text}" Value="">
                                        <setter Property="Visibility" Value="Visible" TargetName="emptyText"/>
                                    </datatrigger>

                            

                                    <trigger Property="IsFocused" Value="True">
                                        </trigger><trigger .EnterActions>
                                            <beginstoryboard>
                                                <storyboard>
                                                    <coloranimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#FFFFFFFF"
                                                                    Duration="00:00:00.3" />
                                                    <thicknessanimation Storyboard.TargetName="Bd" 
                                                                        Storyboard.TargetProperty="BorderThickness" To="1,1,1,1" Duration="00:00:00.3"/>
                                                    <doubleanimation Storyboard.TargetName="PART_ContentHost" 
                                                                        Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3"/>

                                                </storyboard>
                                            </beginstoryboard>
                                        </trigger>
                                        <trigger .ExitActions>
                                            <beginstoryboard>
                                                <storyboard>
                                                    <coloranimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#00FFFFFF"
                                                                    Duration="00:00:00.2" />
                                                    <thicknessanimation Storyboard.TargetName="Bd" 
                                                                        Storyboard.TargetProperty="BorderThickness" To="0,0,0,0" Duration="00:00:00.2"/>
                                                    <doubleanimation Storyboard.TargetName="PART_ContentHost" 
                                                                        Storyboard.TargetProperty="Opacity" To=".6" Duration="00:00:00.2"/>

                                                </storyboard>
                                            </beginstoryboard>
                                        </trigger>
                                    
                                    
                                </controltemplate>
                            
                        </setter>
                    

Here is the Source

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • monwsh.over-blog.com: I love what you guys tend to be up too. This sort of clever work and reporting! Keep up the amazing works guys I've included you guys to our blogrol
  • incense burner: This is very interesting, You are an excessively professional blogger. I have joined your rss feed and look forward to looking for more of your fanta
  • Online Low cost Hotels scheduling in The capital: We're a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful info to work on. You've performed
February 2009
M T W T F S S
     
 1
2345678
9101112131415
16171819202122
232425262728  
%d bloggers like this: