Text selection in WPF TextBox

There are so many methods and properties which deals with selection in WPF TextBox.

Name	Description
TextBox.Select()	Accepts initial position and length of selection.
TextBox.SelectAll()	Selects full text.
TextBox.SelectionStart	Direct property which tells the start of selection.
TextBox.SelectionLength	Direct property which tells the length of selection.
TextBox.SelectedText	Gives the currently selected text.

But if you just use these methods and properties the selection will not come as expected.ie the text won't get selected even if we set these properties or call methods.

The reason for this is very simple.The TextBox is not in focus.So make sure that the TextBox is in focus before using programmatic selection related members.Or give Focus to the TextBox before selecting.

tbResult.Focus();

tbResult.SelectionStart = tbResult.Text.IndexOf("ControlTemplate TargetType=");
tbResult.SelectionLength = 230;

Limitations of XamlWriter.Save method

XamlWriter.Save method is very much useful if we need to preserve the state of an application.But when I used this method extensively, I came to know some limitations.Here is the list.

1. From Microsoft http://msdn.microsoft.com/en-us/library/ms754193.aspx
2. We can't save Style of a control which contains VisualStateManger nodes ie we will loose vsm support if we save using XamlWriter.Save method.

Will be extending whenever I find more.

Composite Application Guidance for WPF and Silverlight

Guidelines for architecting enterprise-level applications using WPF and Silverlight.
Prism in Codeplex
http://msdn.microsoft.com/en-us/library/dd458809.aspx

Readymade XAML Styles and Templates

Designer free development in WPF

A great look and feel matters everywhere in WPF.If you had selected WPF for your project developement ,it's UI design should be stunning and excellent.

But what to do if there are no designers in your company ? Or the designers in your company don't have enough knowledge in XAML and Blend.Some time the project doesn't have enough budget to employ a designer.

Here comes the importance of ready made XAML Style packs and templates.Style packs or Xaml templates library means a collection of global Styles and templates for all standard controls which can be inserted in to your resource dictionary.Thus all your controls in that application will be in the same theme.

I just saw a site which provides these type of xaml templates.I think there will be some more companies or sites which provide ready made xaml assets.So the below list will grew as I come across new style pack providers.

• http://www.xamltemplates.net/
• http://www.reuxables.com/
• Silverlight toolkit themes

Creating WPF Watermarked TextBox using Expression Blend

Here are the steps to create a watermarked TextBox in WPF using Expression Blend as I promised in my last post.

1. Create a new WPF application in Expression Blend
   
   • Click on File menu
   • Then click on New Project.Select WPF Application
   • Name as "WaterMarkedTextBox"
2. Create a TextBox control and set it's Text="".
3. Now create a Button control .Button is to test the focus lost event of TextBox.
4. Set the Width and Height of These controls in order to get displayed properly.
5. Now edit the template of TextBox.
   
   • Right click on the TextBox shown in Objects and Timeline panel.
   • Select "Edit Control Parts (Template)"
   • Then select "Edit a copy"
     
     
   • Select location and press "OK".
6. Now put the ScrollViewer named "PART_ContentHost" into a grid
   
   • Right click on the ScrollViewer in Objects and TimeLine.
     
     
   • Select "Group into" then "Grid".
7. Now add a TextBlock named "watermark" into the newly created Grid
   
   • Double click on the newly created Grid to select it.
   • Add a TextBlock.
   • Set its Text as "Enter here".
   • Set Visibility="Hidden".
   • Set Opacity=".35" ie 35%
8. Now add a Multi Trigger which fires on the condition IsFocused="False" and Text=""It sets the visibility of TextBlock "watermark" to Visible.
   
   • Click on the "+ Property" Button in the interaction pan to create trigger.
   • Change the Property Name to "IsFocused" and Value to "False" in the first record of "Activated when" area.Don't change the target-element.
   • Now click on the "+" button available in the same row of "Activated when" to add one more condition.
   • In the new condition set property as Text and Value as "" ie empty string.Better leave value as it is.By default it will take the empty string.
   • Now select the watermark TextBlock.Set it's visibility.
     
9. Now the Template editing is over.Save and run the application.

N.B : It is recommended to see the generated XAML to ensure the output.The XAML may differ if you had clicked in wrong places.

WPF Watermark TextBox using XAML Style

What is watermarked TextBox

Watermarked TextBox is a special type of text input control which displays a message or image when it is empty.Usually the message will be "Enter the text" and sometimes it may be description about that data field.

When we click on the TextBox ie getting focus the watermark text ("Enter the text") will disappear and it will become an ordinary TextBox.

Developing Watermark TextBox

The tasks of developer are hiding the watermark on getting focus and showing again on lost focus, if the user doesn't entered value in that.ie if the TextBox is empty watermark should come again.

In earlier days this itself was a control which is inherited from normal TextBox.But with the help of Templating and Trigger support in WPF we could achieve it very easily without inheriting.Just by Stying and Templating an ordinary TextBox.

Structure of Watermark TextBox Style

The style can be based on the style of TextBox itself.This reduces our effort in implementing normal TextBox behaviors.We are just going to concentrate on Template.

The normal TextBox template contains a ScrollViewer to hold the data.We are just going to put a TextBlock over that which is going to hold the Watermark text("Enter the Text").By default the visibility of this new TextBlock will be hidden.

Inside ControlTemplate

<Grid>

    <ScrollViewer x:Name="PART_ContentHost"

                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

    <TextBlock x:Name="textBlock"

               Opacity="0.345"

               Text="Enter Text Here"

               TextWrapping="Wrap"

               Visibility="Hidden" />

</Grid>

Now we write Trigger to  show this TextBlock on demand.There are two conditions which shows this watermark.They are "IsFocused=False" and Length of the Text=0.So we write a MultiTrigger with 2 conditions in it.One is for LostFocus and other is for Text.Length respectively.

<ControlTemplate.Triggers>

    <MultiTrigger>

        <MultiTrigger.Conditions>

            <Condition Property="IsFocused"

                       Value="False" />

            <Condition Property="Text"

                       Value="" />

        </MultiTrigger.Conditions>

        <Setter Property="Visibility"

                TargetName="textBlock"

                Value="Visible" />

    </MultiTrigger>

</ControlTemplate.Triggers>

Now whenever the TextBox comes in a state where the IsFocused=False and Text="" the Watermark TextBlock will get displayed.You can replace the watermark TextBlock by any image or what ever you want..

Complete Style

<Style x:Key="WaterMarkTextBoxStyle"

       BasedOn="{StaticResource {x:Type TextBox}}"

       TargetType="{x:Type TextBox}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type TextBox}">

                <Grid>

                    <ScrollViewer x:Name="PART_ContentHost"

                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                    <TextBlock x:Name="textBlock"

                               Opacity="0.345"

                               Text="Enter Text Here"

                               TextWrapping="Wrap"

                               Visibility="Hidden" />

                </Grid>

                <ControlTemplate.Triggers>

                    <MultiTrigger>

                        <MultiTrigger.Conditions>

                            <Condition Property="IsFocused"

                                       Value="False" />

                            <Condition Property="Text"

                                       Value="" />

                        </MultiTrigger.Conditions>

                        <Setter Property="Visibility"

                                TargetName="textBlock"

                                Value="Visible" />

                    </MultiTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

This can be done by a graphics designer alone.That means using Expression Blend.Will be posting steps later.

WPF Databinding sheet

If you can't remember all the formats of databinding just have a look here
http://www.nbdtech.com/Free/WpfBinding.pdf