Grouped RadioButton for WPF Datagrid

Hi,

One of my friend was having a problem in implementing the radio button in datagrid, if implemented he wanted to know how to group them so that in 2 different columns radio button will be grouped as one. So after few attempts I found the following method and explained him the implementation.

To implement a radio button you have to use the DataGridTemplateColumn, where you can create your custom column for datagrid.

Download Code(5.7Kb)

The radio button was quite easily implemented as the following code

<dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>

After the implementation of the radio button we faced a challenge to group it up and we came with a very beautiful idea of giving a group name to both of them and here is what we did, we gave a groupname as “RadioGroup” to both of the radio button as

<dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="RadioGroup" IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="RadioGroup" IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>

Oops we were again into a problem, now all the cells were grouped together so we could select only one out of whole group.
Think Think Think is what we did, then we got a idea to have a group name that is unique for each row that is created. So we created a property called index which will be unique across each person, and we binded our column with the index, so that for each person instance the index will be same but not for 2 persons in the collection.
And this gave us the final solution of grouped radio button. Here is what we did.

 <dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="{Binding Index}" IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="{Binding Index}" IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>

So the main thing that has to be noted is, we should have a property that will remain unique accross the collection. If we have such property just bind it with the groupname and radio button will work absolutely fine.

Hope you found it useful. For any clarification or any better suggestions please revert back.

Happy Learning,
Codingsense

Find row count of all tables in given database

Hi,
Last week I wanted to know which tables in my database are having records and it was quite big database and would take a lot of time opening all tables and check. So I planned to write a query and find out. And here is what I wrote.

Select rows, OBJECT_NAME(id)
from sysindexes where id in
(select Object_ID(TABLE_NAME) from INFORMATION_SCHEMA.TABLES)
and indid < 2 and rows > 0

And this fetched me the exact result i wanted. There are lot of metadata tables in MSSQL which can be handy.
For more information on metadata information in MSSQL click here

Happy Learning
Codingsense

Rounding off to nearest in C#

Hi,

Here I am posting a simple post but its very useful and I saw lot of questions arising on the same. So made a sample to share with you.
There are 2 types of rounding off in the following sample
1) Rounding off to nearest 10, 100, 1000 and other multiples of 10
2) Rounding off to nearest decimal place

Rounding off to nearest 10, 100, 1000 and other multiples of 10

public static double RoundToNearest(double Amount, double RoundTo)
{
double ExcessAmount = Amount % RoundTo;
if (ExcessAmount < (RoundTo / 2))
{
Amount -= ExcessAmount;
}
else            
{
Amount += (RoundTo - ExcessAmount);
}

return Amount;
}

Rounding off to nearest decimal place

public static decimal RoundToNearestDecimal(decimal Amount, int DigitsToRound)
{
return Math.Round(Amount, DigitsToRound, MidpointRounding.AwayFromZero);
}

Sample usage of the above code

Console.WriteLine("Amount = 123456789");
Console.WriteLine(RoundToNearest(12345678, 10));
Console.WriteLine(RoundToNearest(12345678, 100));
Console.WriteLine(RoundToNearest(12345678, 1000));
Console.WriteLine(RoundToNearest(12345678, 10000));
Console.WriteLine(RoundToNearest(12345678, 100000));

Console.WriteLine();

decimal deci = Convert.ToDecimal(123.456789);
Console.WriteLine("Amount = 123.456789");
Console.WriteLine(RoundToNearestDecimal(deci, 1));
Console.WriteLine(RoundToNearestDecimal(deci, 2));
Console.WriteLine(RoundToNearestDecimal(deci, 3));
Console.WriteLine(RoundToNearestDecimal(deci, 4));
Console.WriteLine(RoundToNearestDecimal(deci, 5));

Sample output for the above code

Happy Learning
Codingsense

GetDaylightChanges with TimeZoneInfo

Hi,

A good feature given by microsoft in .Net 3.5 is adding new classes like TimezoneInfo, AdjustmentRule and TransitionTime.
Earlier we were able to get only the daylight changes of the timezone that is currently set on our machine using TimeZone.CurrentTimeZone and if we wanted other daylightchanges then we had to do lot of manipulation using Kernel.dll and access the registry values for each entry but now its readily available for us.

I had a requirement few days back to get the timezones and their next 5 years daylight start and end date and time, it just happened so easily with the given features.

The main thing that I had to implement is changing from transition time to DateTime and here is the function that I made to acheive the same.

public DateTime GetDateTime(int Year, TimeZoneInfo.TransitionTime transactionTime)
{
//Create a datetime to begin with 1st of the transition month           
DateTime dt = new DateTime(Year, transactionTime.Month,
1, transactionTime.TimeOfDay.Hour,
transactionTime.TimeOfDay.Minute, transactionTime.TimeOfDay.Second);

//If the dayofweek of 1st is same as the transition day then exit            
//otherwise             
if (dt.DayOfWeek != transactionTime.DayOfWeek)
{
//If transition dayofweek is greater than 1st dayofweek then we need to move further                
//Eg : Transition dayofweek is tuesday and 1st day of week is monday then we need to move 1 day ahead to point to                 
//the transition day                
if (dt.DayOfWeek < transactionTime.DayOfWeek)
{
dt.AddDays(transactionTime.DayOfWeek - dt.DayOfWeek);
}
else                
{
//else its not in the 1st week so we move 7 days ahead and move back again
                    dt = dt.AddDays(7 - (dt.DayOfWeek - transactionTime.DayOfWeek));
}
}

//Since we are already pointing to the first week of the transition date            
//Add remaining no of weeks to the datetime            
return dt.AddDays((transactionTime.Week - 1) * 7);
}

Sample source code 6Kb

By using the new classes we can get all the required information about the timezones accross the globe. Hope you found it useful.

Happy Learning,
Codingsense

Customize a slider in WPF, Step by Step Tutorial

Hi,

Today let us explore how to customize a slider control in WPF. I have seen a lot of explanation and looked many articles on net about the slider, but i got the the better idea about it only when I implemented it in my own way.
Let me share the same step by step method with you all.

Download Source (7.8 Kb)

So lets begin, First create a WpfApplication in VS2008 and insert a slider control in the grid layout.Open the designer and click on the XAML view. You will see the below code.

<Grid>
<Slider Name="CusomSlider" Height="25" VerticalAlignment="Top" Margin="46,65,37,0" />····
 </Grid>

Now we have to override the Style property of the slider to give it the look we want. We will name the style as MyCustomStyleForSlider and override the style method as below code,

<Slider Name="CusomSlider" Style="{StaticResource MyCustomStyleForSlider}" Height="25" VerticalAlignment="Top" Margin="46,65,37,0" />

Slider control is made up of many subcontrols, those include Track which inturn include Track.IncreaseRepeatButton, Track.DecreaseRepeatButton, Track.Thumb.
Thumb is the main sub control that makes the rectangle shape that moves left and right. The same thumb can also be found in horizontal and verticle scrollbars. So lets insert the following default template of all the controls that all together make the slider control.

<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"><Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="{TemplateBinding Foreground}" Placement="Top" Height="4" Grid.Row="0"/>
<TickBar x:Name="BottomTick" Visibility="Collapsed" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground"  
 BorderThickness="1" CornerRadius="1"
 Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Hidden" x:Name="PART_SelectionRange" Height="4.0"
 Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
 Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
 StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Now run the application and check how it looks and works, click on its right and left and a small dot i.e Thumb without any style moves right and left.

Now lets apply style to the thumb and name it as CustomThumbForSlider, below is the implementation.

·<Style x:Key="CustomThumbForSlider" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Fill="#FF8F4040" Stroke="#FF000000" Height="15" Width="15"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

and override the above style to the thumb.

<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>

After overriding the Thumb style lets have a look of the slider control,

Great, i.e The important thing that makes the slider control is the IncreaseRepeatButton and DecreaseRepeatButton, when clicked on ends they decrease in the size to the amount of the Tickbar value making the other button grow in size and that gives us the illusion that the thumb is moving. Nice move right ok lets get furthur.

Now we need to hide the Increase and decrease repeat buttons so lets create their styles.

<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Ok apply the styles to the repeat buttons and run the application, you will see that we have only the thumb that moves left and right on clicking but we dont see any track. So now we shall give border control a proper background and brush so that we get a good look at the starting and ending of the slider control. Lets create a style for both of these properties and apply them to the border.

<SolidColorBrush x:Key="HorizontalSliderTrackNormalBackground" Color="#FFE7EAEA"/>
<LinearGradientBrush x:Key="HorizontalSliderTrackNormalBorder" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFAEB1AF" Offset="0.1"/>
<GradientStop Color="White" Offset=".9"/>
</LinearGradientBrush>

<Border x:Name="TrackBackground" 
 Background="{StaticResource HorizontalSliderTrackNormalBackground}"
 BorderBrush="{StaticResource HorizontalSliderTrackNormalBorder}"                                        
 BorderThickness="1" CornerRadius="1"
 Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >

Now run the application, you can see that we have customized the design of our slider control.

Change the ellipse control or the border styles to whatever you desire and you will be able to create your own design for the slider control.
Change some of the properties of tickbar, thumb and repeat buttons and see how they behave, which will give you more hands on with slider controller.

References:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.thumb.aspx
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.tickbar.aspx

Happy Learning,
Codingsense

ListBox with Tooltip for each item

Hi,

Currently I had a requirement to show tooltip for each item of the listbox control becuase, if any item lenght was exceeding the width of the listbox then it was not fully shown and i dint wanted to enable the horizontal scroolbars. So just googled for the solution and got some which would display the tooltip at the bottom of the mouse pointer itself, I found it bit annoying to the user and decided to show the tooltip starting from the right end of the listbox.

Here is the control that I created using the normal Listbox control.

Download Source Code (9.34Kb)

In this control I Overridden 3 events of the Listbox control:

• OnMouseEnter : Here the tooltip will be Initialized
• OnMouseLeave : Here the tooltip will be disposed
• OnMouseMove : Here the tooltip will be shown

Here is MouseMove event,

protected override void OnMouseMove(MouseEventArgs e)
{
base.OnMouseMove(e);

//Get the index of the item on which mouse is hovering
int ListBoxItemIndex = this.IndexFromPoint(e.X, e.Y);

//If an item is present at that index then only the tooltip can be showed
if (ListBoxItemIndex > -1 && ListBoxItemIndex <= this.Items.Count)
{
//Get the string of the item
string Tip = this.Items[ListBoxItemIndex].ToString();

//If already tip of that item is shown then exit
if (Tip != CurrentTip)
{
//Get the rectangle of the item
Rectangle rect = GetItemRectangle(ListBoxItemIndex);

//Show the tooltip starting at the right border of the listbox
// and at the height of the rectangle
                    ItemToolTip.Show(Tip, this, this.Width, rect.Y);

//Make the tip as current tip
                    CurrentTip = Tip;
}
}
}

For any clarifications please revert back.

Happy Learning,
Codingsense

Data Triggers and Usage in XAML

Hi,

DataTrigger represents a trigger that applies property values or performs actions when the bound data meets a specified condition.

In this sample we will explore how this property can be utilized on how we need it to behave. In this sample I will concentrate on Style Triggers and apply them on the datagrid, in similar fashion it can be applied to any of the container control.

Till now I have been using Data Triggers in many of the places in my project. Combining all the solutions I have made a sample in which i will be describing all the types of usages of Data Triggers.

Let us imagine a collection of Fathers which hold FirstName of fathers. Each father has a kids collection where all his kids names are stored.
The collection are displayed in a datagrid and the rows are displayed using a Listview and a gridview.

<my:DataGrid AutoGenerateColumns="False" Margin="28,39,33,21" Name="dataGrid1">············
<my:DataGrid.RowDetailsTemplate>················
<DataTemplate>····················
<ListView Name="Kids" ItemsSource="{Binding Kids}">························
<ListView.View>····························
<GridView>································
<GridViewColumn  Header="Kids" DisplayMemberBinding="{Binding Name}"/>····························
</GridView>························
</ListView.View>····················
</ListView>················
</DataTemplate>············
</my:DataGrid.RowDetailsTemplate>············
<my:DataGrid.Columns>················
<my:DataGridTextColumn Header="Father Name" Binding="{Binding FirstName}"/>············
</my:DataGrid.Columns>········
</my:DataGrid>

Now lets create some scenarios in our project in the format the details are to be displayed
Scenario1: Make the families background red where there are no kids
Scenario 2: Hide the families where the name of the father is less than 8 chars
Scenario 3: Make the font bold where the fathers name is greater than 8 chars and there are 2 kids

Download Source Code – 423Kb

Make the families background red where there are no kids
Binding is very flexible in WPF you can easily bind to any of the properties available in the class. Like in this scenario we need to check if the kids count in the family is 0. For this we need to declare a style and bind our RowStyle of the grid to the defined style. Lets work on it.
Lets declare a style and name it as CheckKids and check for the kids.count condition for 0.

········
<Style x:Key="CheckKids" TargetType="{x:Type my:DataGridRow}">············
<Style.Triggers>················
<DataTrigger Binding="{Binding Kids.Count}" Value="0">····················
<Setter Property="Background" Value="Red"/>················
</DataTrigger>············
</Style.Triggers>········
</Style>

In the collection Mr.Ramiayaa has no kids so background of his row is made red.

Hide the families where the name of the father is less than 8 chars
Now comes the challange how will you check fatherName < 8 in XAML. Pretty tricky right. Here is a simple method to be followed. What if we have another property in our class which returns true or false by checking the fathername.length. It will help us to acheive our goal.

Lets Declare a property in Father class and name it as IsLengthLessThanEight, which will return if the father name is less than 8 char or not. It will look like

public bool IsLengthLessThanEight
{
get { return (FirstName.Length < 8); }
}

By this we can be very sure that we can write our own properties and bind it to make anything possible.
Now lets declare the style and name it FatherNameLessEightChar and bind it to our declared property IsLengthLessThanEight
and check the desired condition.

········
<Style x:Key="FatherNameLessEightChar" TargetType="{x:Type my:DataGridRow}">············
<Style.Triggers>················
<DataTrigger Binding="{Binding IsLengthLessThanEight}" Value="True">····················
<Setter Property="Visibility" Value="Hidden"/>················
</DataTrigger>············
</Style.Triggers>········
</Style>

In the collection we have only one father who has the name less than 8 that is Mr.Rocky that name is to be hidden.

Make the font bold where the fathers name is greater than 8 chars and there are 2 kids
Here comes the next challange how will we check more than one condition in XAML. Is it possible or should we declare another property and check 2 conditions in our class. For this we have MultiDataTrigger which will help us to check multiple conditions in XAML and set property accordingly. Cool.
Lets declare a style and name it CheckNameAndKidsCount and use the MultiDataTrigger.

<Style x:Key="CheckNameAndKidsCount" TargetType="{x:Type my:DataGridRow}">············
<Style.Triggers>················
<MultiDataTrigger>····················
<MultiDataTrigger.Conditions>························
<Condition Binding="{Binding IsLengthLessThanEight}" Value="False"/>························
<Condition Binding="{Binding Kids.Count}" Value="2"/>····················
</MultiDataTrigger.Conditions>····················
<Setter Property="FontWeight" Value="Bold"/>················
</MultiDataTrigger>············
</Style.Triggers>········
</Style>

Here we check both the conditions i.e First we check if father name is greater than 8 char with the help of the IsLengthLessThanEight that we have defined and next condition we check if the kids count is 2 or not. If both the conditions are satisfied then the font of the family is made bold.
In our collection we have Mr.Balasubramanyam whose name is greater than 8 char and has 2 childrens so his row should be made bold.

Wow all the scenarios have completed and we have got the desired output for all of them. Thanks to DataTrigger for simplifying the life. In this similar fashion we can declare style trigger and data trigger to make various styles depending on the data that is bound.

References :
http://msdn.microsoft.com/en-us/library/system.windows.datatrigger.aspx

Cheers
Naveen Prabhu

Refresh UI elements on collection changed using ObservableCollection in WPF

Hi,

In windows application when we would bind a list with any UI control, on changing of the list we should have refreshed the UI element or reload the list into the UI element. Imagine how tiresome it was if the list was referenced in many UI elements.
In WPF if we are implementing the same structure then we can use INotifyPropertyChanged or INotifyCollectionChanged to minimize our work.
If we are working on a list then we can inherit the list from ObservableCollection which in turn implements the 2 interface mentioned above. By using ObservableCollection we can notify the controls that the list to which they are bound has been changed and ask them to refresh their selves. This will minimize the work to maximum extent and the same time can be utilized for better activities.

In this post let me demonstrate you on how ObservableCollection can be implemented and how the changes to list can automatically refresh the UI element.

Download Source Code (11 KB)

Let me brief on the key things
Bind Textbox to a property of another UI element (Listbox) that returns Object in SelectedItem:
The text box is bound to ListBox.SelectedItem but the selected item will return a object of type PersonName. That is to be split into FirstName and LastName and shown in txtFirstName and txtLastName respectively. Here you have a good option while binding the textbox and the engine will take care of the splitting you can just bind as follows
For txtFirstName I have used binding as

Text="{Binding Path=SelectedItem.FirstName, ElementName=MyListBox, Mode=TwoWay, UpdateSourceTrigger=Explicit}"

As you can see i have specified SelectedItem.FirstName and at runtime the selectedItem will change to the object that is focused. Similarly we can bind to txtLastName.

UpdateSourceTrigger:
In UpdateSourceTrigger you have 3 options PropertyChanged, LostFocus, Explicity. I have used Explicity to handle our own customizations before updating the actual source and the customization can be handled in the save event.

NameList nameList = MyGrid.GetValue(Grid.DataContextProperty) as NameList;
PersonName currentPersonName = MyListBox.GetValue(ListBox.SelectedItemProperty) as PersonName;
PersonName NewPersonName = new PersonName(txtFirstName.Text, txtLastName.Text );
int IndexOfOriginal = nameList.IndexOf(currentPersonName);
nameList[IndexOfOriginal] = NewPersonName;

By just changing the List the newer values are reflected in the UI elements those are bound to the list.
For any clarifcation please feel free to comment.

References: http://msdn.microsoft.com/en-us/library/ms668604.aspx

Happy Learning
Codingsense

Customized animating listbox WPF

Hi All,
I had seen some of the 3rd party controls and was wondering what these people do in attaining good graphics in those controls. After carefully studying i got some tricks from which you can acheive the same styles.

Just have a look at this one, by just modifying some property i make the listbox to display items like a rack of books in a shelf .

And when you hover the mouse over it, the book will open and show you the details. Isnt it great

Download source code – 210 Kb

Steps taken to acheive the above effects,

• Databind a listbox using the xml file given in the project
• Right click on the listbox and navigate to Edit other template -> Edit layout of items -> Edit a copy -> Enter any name you want to define -> click ok
• In object and timeline in interaction window ( if not found click window menu -> interaction) click virtualizationStackPanel -> In properties( if not found click window menu -> properties) make orientation to horizontal from vertical
• Click the return button in objects and timeline to return to the main page.
• Select the listBox right click it and navigate to Edit Other Templates -> Edit generatated items -> Edit a copy
• In the opened screen go to objects and timeline window (interaction window)
• Select the stack panel and go to its properties, change the background that you want to apply to each item in the list box
• Go to Transform group in properties and in RenderTransform
• Select the rotate tab. Give an angle of -50
• Select the skew tab and enter X value as -50, you will see the transform in each listbox item
• Now just we need to remove the space between the items and its pretty much easier just give ve value in right margin. Eg: Give -30 in the right margin. This will bring all the items closer.

Now only we have to implement is Animation.First we shall create a story board

• Click + on in the object and timeline to create a new story board, enter OnMouseIn and click ok
• Select the stack panel
• In timeline set the current time to 0.5 sec and Record a keyframe to indicate the initial state of our item.
• Next we will tell the timeline what should happen after 0.5 sec. Move the timeline pointer to 1 Sec
• And open the properties of stack panel and set the following values, -10 to right margin, 0 to angle and 0 to x in skew.
• Run the timeline and see what happens and do any modification if it can enhance the animation.
• Stop the timeline recording.

Next we need to define another storyboard that will move the list item back to the original position

• So click Add new story board, Give it a name OnMouseOut and click ok
• Take the current timeline to 1sec and insert a keyframe to indicate the final position of our animation.
• Move the current pointer to 0.5 sec and set the properties, -30 as right margin, -50 as angle and -50 as x in skew.
• Now since our animation is ready we just need to bind an event to invoke the story board, for that follow the setps.
• In triggers click the +Event and select the target element Ismouseover event and set the value true.
• In actions when activating select OnMouseIn begin
• In actions when deactivating select on MouseOut begin
• Run the application

Happy Learning
Naveen Prabhu

 

Hosting WCF and ASP.NET application under same virtual directory in IIS

Hi,

I had created a WCF service and an ASP.NET application which would consume the service, I hosted both in separate virtual directories and it was working very fine. After some days and lots of changes I noticed that the dlls and other common files used in both WCF and ASP.net application, had to be replaced in both the virtual directories to synchronize them.

So I planned to see if it’s possible to host both the application under same virtual directory and got a solution of merging the web.Config files of both the application. Now I have to replace the necessary assemblies or files in only one virtual directory and it has made my job lot easier.

Following are the steps that were followed.
Note: At the end I removed the WCF virtual directory and made my ASP.Net virtual directory to host both the application.

• Copy the required files (Except Config file) from WCF virtual directory and place them appropriately in the structure in ASP.net virtual directory. (Eg: .svc file in the main folder and other required dlls into the bin folder)
• Now we have all files in appropriate locations, just we need to do is to merge the web.config files to contain both Service as well as client configuration.
• Open the web.Config file that was in WCF virtual directory and copy the <services> tag and <behaviour> tag with all its contents.



• Open the web.Config file of ASP.net application and paste the copied contents in the <system.serviceModel> tag.
• Copy the new path of the service by brosing the .svc file from IIS manager (inetmgr.exe) Note: If it wont run successfully check for required setting for the service in web.Config.
• In the web.Config in the ASP.net virtual directory and change the address of all the endpoints to point to the new location of service.
• Run the main application.

After following the above procedure I successfully hosted both applications under same virtual directory.

If you have any problem while following the steps or any other problem related to WCF or IIS you can please share it with me.

Happy Learning
Naveen Prabhu