Adjusting Client Area on Client End

In this short post I will show you how to fix the client area of the web page. I have worked in desktop application, if some of you work in desktop application then you notice one that form will re size according to the resolution of the screen, So here in this post I will try to adjust the size of the client area so that the scroll on the page is not appear and the scroll in the client area is shown. Let us start our example code. I have main table which consist of three rows one is the header, then body and at the end the footer row. And One grid view control which is used to show records to the user and below is the image and here you can see that the grid view control has adjust the height and the height of the grid view control depends the number of record.

Now what I did is , place a div tag in the body row and set the width and height of the div in the onLoad event of the body tag. Below is the javascript which is used to set the height and the with of the divMain to the 92.5 percent.

var divMain=document.getElementById ("<%=divMain.ClientID %>");
divMain.style.height =document.documentElement.clientHeight*.925;
divMain.style.Width=document.documentElement.clientWidth*.925;

Here is the output after setting the width and height on client side. The above code is working fine in the internet explorer but not in the fire fox.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Read More......

Animation of Expander Control in Expand/Collapsed Event

During exploring of the WPF I have work for the expander control when expander control is expanded then apply some sort of animation and when the expander control is Collapsed then same animation is executed in same order. I have successfully applied animation in the expanded event of the expander but couldn't perform any sort of animation when the expander is collapsed. Then I have search on google about the collapsed animation on the expander control and I have find such a nice solution about Collapsed animation and you can says the structure of the expander. Now I will share this work with you, for this example I have expander control and I have used the Expression Dark theme from CodePlex. I have only used the expander control template from the expression Dark theme and remove other control template from the expression dark theme. Here is the expander control when it is expanded.

By Reading the article, I have made the following changes in the expander control template which is found in the expression dark theme. As the ContentPresenter is placed inside the border control so, I have removed the Visible attribute of the border and set the height of the border to 0(zero), Below is the xaml of the border control which is used in the expander template.

<Border Background="{DynamicResource ShadeBrush}" BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1,1,1,1"  CornerRadius="3,3,3,3" Margin="1,1,1,1" x:Name="border"/>

Then in the control template trigger remove the blow line of xaml which is used to set the visibility of the border to visible and add the enterAction and the exit action of the trigger which are used to begin two different story boards.

<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" TargetName="border" Value="Visible"/>
</Trigger>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource strbExpand/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource strbCollapse}"/>
</Trigger.ExitActions>

And here are the two story boards which are in the control template resource. the strExpand which is used to increase the height of the border and the strbCollapse which is used to decrease the height of the border.

<ControlTemplate.Resources>
<Storyboard x:Key="strbExpand">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="strbCollapse">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrame KeyTime="00:00:0" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Read More......