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

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

WPF Grid Shared Size Groups

A WPF Grid contains a collection of rows and columns, which are sized explicitly,proportionately, or based on the size of their children. There’s one other way to size a row or a
column—to match the size of another row or column. This works through a feature called shared size groups.

The goal of shared size groups is to keep separate portions of your user interface consistent.For example, you might want to size one column to fit its content and size another column to
match that size exactly. However, the real benefit of shared size groups is to give the same proportions to separate Grid controls.

To understand how this works, consider the example shown in below Figure. This window features two Grid objects—one at the top of the window called Grid 1 (with three columns) and one at the bottom called Grid 2 (with two columns). The second column of the second grid(Grid 2)is linked with the first column of the second column of the first grid(Grid 1), if we resize  the column width of the first grid when the width of the second column also changes accordingly with first grid. The same way with the Hello text’s column.
second Grid stays synchronized.

Shared Grid Size

 <TextBlock Background=”Azure” Margin=”0″ VerticalAlignment=”Bottom”><Run Text=”Grid 1″/></TextBlock>
<Grid Background=”ForestGreen”  ShowGridLines=”True” Margin=”0,-3,0,0″ Grid.Row=”1″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”Auto” SharedSizeGroup=”ShareThis”/>
<ColumnDefinition Width=”Auto” SharedSizeGroup=”MyCustom” MinWidth=”66.42″/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Width=”Auto” Foreground=”White” x:Name=”SharedTextBlock” Padding=”5″ Background=”#FF5B76AB” Text=”Ravi Srinivas”/>
<TextBlock Padding=”3″ Foreground=”White”  Grid.Column=”1″ Background=”#FFAB9D5B” Text=”Hello”/>
<TextBlock Padding=”3″ Foreground=”White”  Grid.Column=”2″/>
<GridSplitter Grid.Column=”1″
Width=”5″
ShowsPreview=”True” Background=”#FF1D5015″ ToolTip=”Drag me and see the Hello in Second Grid”/>
<GridSplitter Grid.Column=”0″ Width=”5″ Background=”#FF160505″ ToolTip=”Drag me and see the Ravi Srinivas in Second Grid” />
</Grid>
<TextBlock Background=”Azure”  Grid.Row=”2″ Margin=”0,16,0,0″><Run Text=”Grid 2″/></TextBlock>
<Grid Grid.Row=”3″ Background=”ForestGreen”  ShowGridLines=”True”>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”Auto” SharedSizeGroup=”MyCustom”/>
<ColumnDefinition Width=”Auto” SharedSizeGroup=”ShareThis” />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Foreground=”White”  Width=”Auto” x:Name=”SharedTextBlock2″ Background=”#FFAB9D5B” Text=”Hello”/>
<TextBlock Foreground=”White”  Grid.Column=”1″ Background=”#FF5B76AB” Text=”Ravi Srinivas”/>
<GridSplitter Grid.Column=”1″ Width=”5″ Background=”#FF160505″ ToolTip=”Drag me and see the Hello in First Grid” HorizontalAlignment=”Left” Margin=”0″ />
</Grid>

Download the sample here