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.

Friday, February 13, 2009

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.

Monday, February 9, 2009

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>

<ScrollViewerx:Name="PART_ContentHost"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

<TextBlockx: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>

<ConditionProperty="IsFocused"

Value="False"/>

<ConditionProperty="Text"

Value=""/>

</MultiTrigger.Conditions>

<SetterProperty="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

<Stylex:Key="WaterMarkTextBoxStyle"

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

TargetType="{x:Type TextBox}">

<SetterProperty="Template">

<Setter.Value>

<ControlTemplateTargetType="{x:Type TextBox}">

<Grid>

<ScrollViewerx:Name="PART_ContentHost"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

<TextBlockx:Name="textBlock"

Opacity="0.345"

Text="Enter Text Here"

TextWrapping="Wrap"

Visibility="Hidden"/>

</Grid>

<ControlTemplate.Triggers>

<MultiTrigger>

<MultiTrigger.Conditions>

<ConditionProperty="IsFocused"

Value="False"/>

<ConditionProperty="Text"

Value=""/>

</MultiTrigger.Conditions>

<SetterProperty="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.