TextBox crop behavior WPF/Silverlight

WPF provides an innovative feature called attached properties, which can be used to add behavior to existing controls. These new properties are not defined on the control being extended, but rather they are defined on a separate object (generally a
DependencyObject). Thus, we end up with a source object that defines the attached properties and a target object on which you attach these properties. The target is the object being extended with new functionality contained in the source. When the attached property is set on the target object, a property change event is fired on the source. The event handler is passed information about the target and the new and old values of the property.
By hooking up property changed handlers, we can add additional behavior by calling methods on the target, changing properties, and listening to events. We look at more detailed examples of using attached properties in Chapter 6, “The Power of Attached Properties.” Keep in mind that attached properties are only a means to extend functionality; the original target control still needs to be considered a “black box,” and its internals cannot be modified.

Let’s consider a simple example that illustrates the use of attached properties. Let’s say you want to display a tooltip on the TextBox when the content in the TextBox is exceeded the size of the available size, note that here we are not going to use the TextWrapping on TextBox instead we simply crop the text at the right end and we will display tooltip when user mover mouse on TextBox.

namespace TextBoxCrop
{
public static class TextBoxCropBehavior
{
public static bool GetTextBoxToolTip(DependencyObject obj)
{
return (bool)obj.GetValue(TextBoxCropToolTipProperty);
}
public static void SetTextBoxToolTip(DependencyObject obj, bool value)
{
obj.SetValue(TextBoxCropToolTipProperty, value);
}

public static readonly DependencyProperty TextBoxCropToolTipProperty = DependencyProperty.RegisterAttached(“TextBoxToolTip”, typeof(bool), typeof(TextBoxCropBehavior), new UIPropertyMetadata(false, OnTextCropChanges));
private static void OnTextCropChanges(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var textbox = d as TextBox;
if(textbox != null)
{
textbox.SizeChanged += textbox_SizeChanged;
}
else
{
textbox.SizeChanged -= textbox_SizeChanged;
}

}

static void textbox_SizeChanged(object sender, SizeChangedEventArgs e)
{
var textbox = sender as TextBox;
textbox.Measure(new Size(Double.MaxValue, Double.MaxValue));
var width = textbox.DesiredSize.Width;

if (textbox.ActualWidth < width)
{
ToolTipService.SetToolTip(textbox, textbox.Text);
}
else
{
ToolTipService.SetToolTip(textbox, null);
}
}
}
}

And inside XAML attache the behavior to the control like below:

<Window x:Class=”TextBoxCrop.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
Title=”MainWindow” Height=”350″ Width=”525″
xmlns:local=”clr-namespace:TextBoxCrop”>
<Window.Resources>
<Style TargetType=”TextBox”>
<Setter Property=”local:TextBoxCropBehavior.TextBoxToolTip” Value=”True”/>
<Setter Property=”BorderBrush” Value=”Green”/>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<TextBox Text=”Textbox with long text Long text long text long text long text” local:TextBoxCropBehavior.TextBoxToolTip=”True” x:Name=”x” HorizontalAlignment=”Right”/>
</Grid>
</Window>

When you run the application you will see the below UI, notice at the TextBox there is a tooltip on it, it is appearing because the text in the Textbox is exceeded the width limit of available size.

Capture

If your application is having similar requirement in more that one view then you can attach the same behavior to a Textbox style and make it implicit so that it will apply to all the Textbox controls.

Below is the example:

<Window x:Class=”TextBoxCrop.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
Title=”MainWindow” Height=”350″ Width=”525″
xmlns:local=”clr-namespace:TextBoxCrop”>
<Window.Resources>
<Style TargetType=”TextBox”>
<Setter Property=”local:TextBoxCropBehavior.TextBoxToolTip” Value=”True”/>
<Setter Property=”BorderBrush” Value=”Green”/>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<TextBox Text=”Textbox with long text Long text long text long text long text” x:Name=”x” HorizontalAlignment=”Right”/>
</Grid>
</Window>

That’s it 🙂 enjoy coding.

Cheers.

Advertisements

Silverlight Controls Styles

Since many months i have planned to create styles for commonly used sinlverlight controls, but due to busy schedule in office, i didn’t get time to create them, recently i have got some free time and i started creating styles, finally i have taken 2 days of time(Free time).

I have used three base colors for styles and with those colors i have played around the control styling.

Please see the below image for sample, and you can download the sample and view the live one by clicking here

Silverlight UI

Silverlight Alert Box

Recently i have created a alert box in which we can display alert messages or warning messages, i have done this by editing generic Silverlight Child window control. to have the header less window i removed Childwindow’s Chrome part and made some changes in layout system on Child Window . please look in to the below sample image.

For Live sample and Download Click Here

Message Box

 

 

WPF Group Box Style

Recently one of my client asked me to show a good looking group box for our application, so that after a 15 min research i decided to create a group box which will contains a banner at right corner of group box with nice appearance.

I thought it may be useful for others, so i have added this sample in Expression’s Gallery, if you like and wish to use that, download the style and use in your project.

Download Sample project from Here

Sample View:

WPF Group Box

Bullet Decorator in WPF XAML

The BulletDecorator control is used to display a single item and bullet in a bulleted list in WPF. There are many ways to represent the bulleted list in WPF. Following examples are defines different kind of representations.

The BulletDecorator control is used to display a single item and bullet in a bulleted list in WPF. There are many ways to represent the bulleted list in WPF.

Following examples are defines different kind of representations.

<BulletDecorator Margin=”249,109.5,282.167,0″ Height=”23.5″ VerticalAlignment=”Top”>

<BulletDecorator.Bullet>

<Image Source=”ihc_account_24.png” Width=”16″ Height=”16″

VerticalAlignment=”Center”/>

</BulletDecorator.Bullet>

<TextBlock Text=”Image Bullet” Margin=”3.5,0.75,-3.5,3.75″/>

</BulletDecorator>

<BulletDecorator Margin=”249,137,282.167,0″ Height=”23.5″ VerticalAlignment=”Top”>

<BulletDecorator.Bullet>

<Rectangle Fill=”Green” Width=”16″ Height=”16″/>

</BulletDecorator.Bullet>

<TextBlock Text=”Square Bullet” Height=”19″ VerticalAlignment=”Top”

Margin=”3.25,0,-3.25,0″/>

</BulletDecorator>

<BulletDecorator Margin=”249,167,291.167,0″ Height=”23.5″ VerticalAlignment=”Top”>

<BulletDecorator.Bullet>

<Ellipse Fill=”Green” Width=”16″ Height=”16″/>

</BulletDecorator.Bullet>

<TextBlock Text=”Circle Bullet” Height=”19″ VerticalAlignment=”Top”

Margin=”3.25,0,-3.25,0″/>

</BulletDecorator>

<BulletDecorator Margin=”249,197,245.167,0″ Height=”23.5″ VerticalAlignment=”Top”>

<BulletDecorator.Bullet>

<RadioButton Width=”16″ Height=”16″ Margin=”2.5,0,-2.5,0″/>

</BulletDecorator.Bullet>

<TextBlock Text=”Radio Button Bullet” Margin=”4.5,-3.25,-4.5,7.75″/>

</BulletDecorator>

See the below representation

Bullet Decorator Image

Converting any part into User Control using Expression Blend

Why This ??

We know how to create(Steps to create) a new user control in silverlight by using Visual Studio or Expression Blend(Add New – > Selecting usercontrol from templates etc .. etc..), but what if we have to convert an existing silverlight object????? well cut copy and paste in newly created user control is risky, so what is the best way ?? well here i tell you the easy way.

Solution:

In this article i am going to demonstrate to convert any existing silverlight object(like Grid, Group of buttons etc…) into User Control.

Here i am taking a sample application with header menu, i am going to convert this menu part(which is already created) into a User Control.

Step 1:

Inside Objects and Time line, right click on required object, in this case “MenuGrid”, a context menu opens look for “Make into UserControl”  and select. see in below image

Contextmenu

Select Make into UserControl

Setep 2:

After selection this option a popup will appears where you need to enter your user control’s name, in this case i am just leaving the default one, see it in below image.

popup

Provide a name to your user control

Now our control is created, if you can check in solution explorer a new xaml page(not a page it’s a User Control) is automatically created by Blend, see it in below image.

New page created

if you can see in xaml, you can find a xaml tag called <Local/> in this example <Local:MenuGridControl /> that is our User control, Blend automatically adjusts our controls margins as per our layout design. see it in below image.

Blend automatically added a Margin property to our control.

Updated layout

That’s it it’s very easy to convert a existing object in a user control, using Expression Blend.