Focus Visual Effect for Text box and Button controls Silverlight

Hello, One day one of my client asked me to give the best effect which is ever implemented , for the application, he gave the best challenging task, and i have taken it as a challenging and started R&D. After 3 days of R&D i have came to create a wonderful style for every Content control of Silverlight, and showed that to the client, he is became mad after seeing that 🙂 , after that he sent a “I phone” for me as a compliment 🙂

I named it as “” Classic Focus Visual “” and  i have applied for Creative common Rights.

I would like to share this wonder full style with all folks. Look at the below sample snap shot of that style in which you can see a small square L shape will appear at four corners.

FocusVisualElementTo view live click here

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

Design time resources and Attributes in Silverlight/WPF/WP7

When you open a Silverlight/WPF/WP7 application in design mode in Visualstudio or Expression Blend, we may not see the exact look as we expect and see at runtime because of designtime.

There are several reasons for this, major reasons are:

–          Controls are not embedded in a view(Majorly this problem will come if we don’t give width and height)

–          Constructor of a root element is not called.

–          ViewModel is not created

to avoid this you need to provide information to make design view correctly.  You can specify this kind of information by using the design-time attributes.

The designtime attributes are defined in a special namespace, that is usually mapped to the d: prefix. To tell the XAML parser not to interprete these attributes at runtime, the markup compatibility namespace is mapped to mc: and with the mc:Ignorable="d" instruction, the d: namespace is excluded.

EX:

 <UserControl
   xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" />

d:DesignHeight and d:DesignWidth:

The d:designHeight and d:DesignWidth are used to provide fixed height and width at design time.

EX:

<UserControl
    xmlns="http://schemas.microsoft.com/..."
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    d:DesignWidth="640" d:DesignHeight="480" >
<UserControl />

d:LayoutOverrides:

If a property is set to a control at runtime and if we want to change this property at design time we can use the LayoutOverrides.

EX:

<Border Height="250" Width="160" d:LayoutOverrides="Width, Height" >
</Border>

For more information see MSDN

Difference between Style and Template.

One day my colleague asked(the same question was asked by many people) me about the difference between Style and Template, so i though to explain the difference between these two things by writing a blog post. So that  others can also read this.

Style:

Brief:

Style can be applied to any Silverlight control which is derived from the Framework Element. With the help of style we can modify the default property values of a control for which the style is applied. We can override the property value which are defined in style when we initialize the control on UI. With the help of Style we can specify the default behavior of the control.

Detailed:

The default properties of a controls are defined in <Setter> tag which are defined in the style,

EG:

<Style TargetType=”TextBox” x:Key=”TextboxStyle”>

  <Setter Property=”Background”  Value=”White” />
      <Setter Property=”BorderThickness” Value=”1″ />
<Setter Property=”Template”>
<Setter.Value>

<Setter

</Style>

We can modify the default properties of a control by overriding the properties when we initialize the control on UI.

EX:

<TextBox Background=”Red” Style=”{StaticResource TextboxStyle}”/>

the Background property will changes to red by default it is White which is defined in the style.

Template:

Templates   Used only those elements that inherit from the Control class in the System.Windows.Control namespace.By using  Templates u can modify the structure of the Control to which the Template is applied.Templates      Values can’t be overridden by the values that are set on the control itself when it is drawn on the artboard .But , using Template Binding the property’s  value can set of a template according to the values of a properties of the control when it is drawn on the artboard.When u  Modify with Template u can access to more parts of control then styles.

EX for TemplateL

<ControlTemplate TargetType=”TextBox”>
<Grid x:Name=”RootElement”>

</Grid>
</ControlTemplate>

I hope this may give you basic idea of Template and style.

Busy Indicator Style

My client asked me to implement the busyindicator in a different fashion , which will match the theme, he don’t want to see the regular blue progress bar.  So that i got a wonderful idea to implement this, with which my client impressed a lot and he is so happy with that 🙂 .

I am interested to share my style with folks, so that others can use the same one in their projects. You can Modify the colors of controls by using :

Foreground: for changing the color of Hours and Minutes arrows,

Background: for changing the Background color(in this case Red),

BorderBrush: to change the black background.

and for Glow(in this case Red) you need to change it in the Control template.

please View it on live and download the sample from : Here

Please see the below sample image:

Design time resources in Expression Blend 4

Design time resources in Expression Blend 4

Design time resources are very useful while we working with design on Expression Blend, resources will apply at run time, this will not be a problem for developers, but it is most important while we working on design tasks .  If your design surface can’t find the resources at design-time your design will not display properly as we see it on run-time, so that we cannot work on design, also we get  XAML parsing errors. Expression blend will show a message box which will looks in the following image.

(This message box will appear when we miss any resources that are linked with Style=”{}” property, and blend tries to find out the appropriate resource in the existing resource dictionaries in the solution if it is not found, then throws the above message box to fix the problem)

in this message box, Expression blend 4 provides us the available resource dictionaries, if we select one of resource from dropdown blend creates a new resource file called DesignTimeResources.xaml. and this will store in properties node of Silverlight project in the solution.Check the below image

Blend will now find the missing resources during design-time and be able to render the design surface properly.This feature enables editing of resources in dynamic styled applications to be much easier. If you open the DesignTimeResources.xaml, you will see the following xaml code.

if you remove the <resourceDictionary.MergedDictionares> tag you will get the same message box again.

Customizing Silverlight Child window title/Adding Image on title

Today I have found a nice feature of child window control in Silverlight and. I had a requirement in my project to display a image beside the window title after some R&D i found that it is having a property is an “Objecy” and I assumed that it could be act as a contentPresenter/ContentControl.

we can do it like this:

<sdk:ChildWindow          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”                x:Class=”SilverlightApplication1.ChildWindow1″

Width=”400″ Height=”300″>

<sdk:ChildWindow.Title>

                                <StackPanel Orientation=”Horizontal”>

                                                <Image Source=”Profile.png” Width=”24″ Height=”24″ />

                                                <TextBlock Text=”Add User” Margin=”15,5″ />

                                </StackPanel>

                </sdk:ChildWindow.Title>

<Grid x:Name=”LayoutRoot”>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition Height=”Auto” />

</Grid.RowDefinitions>

<Button x:Name=”OKButton” Content=”OK” Click=”OKButton_Click” Width=”75″ Height=”23″ Margin=”0,0,79,0″ HorizontalAlignment=”Right” Grid.Row=”1″ />

<Button x:Name=”CancelButton” Content=”Cancel” Click=”CancelButton_Click” Width=”75″ Height=”23″ HorizontalAlignment=”Right” Grid.Row=”1″ />

</Grid>

</sdk:ChildWindow>