I have been scripting since 2years from now and when i saw this link:
June 22, 2009
Power of semi-colon in javascript
0 comments 6/22/2009 05:38:00 PM Posted by kalyan kumar BJune 19, 2009
Masked Slider Plugin in jQuery
0 comments 6/19/2009 05:15:00 PM Posted by kalyan kumar BHi All,
This is my post after a long break. Well i have been looking into different technologies like photoshop, blend and i stopped at flash. I saw a simple and sweet animation in flash that suits excatly for displaying products.
After few days i succeeded to implement the same feature in jQuery.
So here is a sample screen-shot of how it looks like.
The slider moves up and down giving a pretty cool visual experience for viewers. The image is set a background image for the containing div element. You just need to call the slider plugin as,$("#divWithBgImage").maskedSlider({defaultOpacity : 0.6, stripHeight: 55});
That's it and the rest of the visual effects are applied by the plugin. Also the plugin has many options that it supports. Here are the list of supported options:{
defaultOpacity : 0.6,
stripHeight : 40,
topSliderColor : gray,
bottomSliderColor : gray,
duration : 2000,
horizontal : true
}
The options are self explainable. The last option specifies that the slider will move vertically if horizonal : false is specified.
Note: The function can be called only once within a page. i.e., it can be called on any div element within a page once and only once.
The problem here is - i m adding new html elements on given div and animating their height and position. If its called for more than one div then there will be a runtime conflict in the browser because the same id exists(newly added html elements thru plugin) for called div elements.
I assure you my next post will give a solution to this problem.
If any one is intrested to get the plugin, Reply me or email me at calyan.bandi@gmail.com or you can email me at buntychitti@yahoo.com
April 23, 2009
Convert a Canvas into an Image
0 comments 4/23/2009 06:16:00 PM Posted by kalyan kumar BHi,
I have once faced this problem and google produced me with pieces of information which i grouped into the following. The below function will take a Canvas element as an input and makes an image out of it.
public static BitmapDecoder CreateImageFromCanvas(UIElement element, int dpix, int dpiy, ImageFormat format)
{
double dpiX = 96;
double dpiY = 96;
FrameworkElement fwElement = element as FrameworkElement;
Rect bounds = VisualTreeHelper.GetContentBounds(fwElement);
bounds = new Rect(0, 0, fwElement.Width, fwElement.Height);
// create the renderer.
RenderTargetBitmap rendertarget = new RenderTargetBitmap((Int32)(bounds.Width * dpiX/96.0),
(Int32)(bounds.Height*dpiY / 96.0), dpiX, dpiY, PixelFormats.Pbgra32);
// Render the element on screen.
rendertarget.Render(element);
BitmapEncoder bmpe;
// Select the image format.
if (format == ImageFormat.Png)
{
bmpe = new PngBitmapEncoder();
}
else if (format == ImageFormat.Bmp)
{
bmpe = new BmpBitmapEncoder();
}
else if (format == ImageFormat.Jpeg)
{
bmpe = new JpegBitmapEncoder();
}
else
{
bmpe = new PngBitmapEncoder();
}
bmpe.Frames.Add(BitmapFrame.Create(rendertarget));
Stream fl = new MemoryStream();
bmpe.Save(fl);
BitmapDecoder bmpd;
// Select the image format.
if (format == ImageFormat.Png)
{
bmpd = new PngBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else if (format == ImageFormat.Bmp)
{
bmpd = new BmpBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else if (format == ImageFormat.Jpeg)
{
bmpd = new JpegBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else
{
bmpd = new PngBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
MemoryStream mStream = (MemoryStream)fl;
System.IO.File.WriteAllBytes("F:\\Samples\\myimage."+format, mStream.ToArray());
fl.Close();
return bmpd;
}
Remember you can only pass a canvas element as an argument to this function. Ofcourse it accepts any UIElement but if you pass anything other than a Canvas element you will get a blank image.
Subsequently you can use this function in your main class file like,
myImage.Source = GrapSnapShot(myCanvas, 89,89,ImageFormat.Png).Frames[0];
where myImage is an Image element in your xaml file and it displays your canvas as an image.
April 21, 2009
Difference between Logical and Visual Tree in WPf
0 comments 4/21/2009 06:01:00 PM Posted by kalyan kumar BHi All,
Just go through this link:
http://blogs.msdn.com/mikehillberg/archive/2008/05/23/Of-logical-and-visual-trees-in-WPF.aspx
April 13, 2009
Accessing template elements of a usercontrol
0 comments 4/13/2009 03:13:00 PM Posted by kalyan kumar BHi Frnds,
In the last post I explained of creating a user control which acts like a container. In this post I will explain how to change the properties of your user control. The following steps will clear you about this,
1. Create a public property for the user control, accessing on which you will change the properties of your usercontrol. This is something like,
Private string someText;
Public string SomeText
{
Set { this.txtName.Text = value; }
Get { return txtName.Text; }
}
2. Since your properties are kept inside control template you cannot refer them simply by name as above.i.e.,this.txtName is not accessible if txtName is name of an element inside the control template.To access that element you need to have something like,
TextBlock txtBlock = (TextBlock)Template.FindName(“txtName”,this);
So if you think of something like,
Set
{
TextBlock txtBlock = (TextBlock)Template.FindName(“txtName”,this);
txtBlock.Text = value;
}
Then you are mistaken. This is because inside the setter you cannot fill the object txtBlock. This means that you will get a null reference when you run the above code. The reason is control hierarchy loading. When your setter method is executing your TextBlock is not yet created and so it will return an error(a run-time error).So the solution would be to set the value inside onApplyTemplate().The overall code looks like this:
MyUserControl.xaml
<USerControl x:Class="MyUserControl" Height="Auto" Width="Auto"......>
<UserControl.Template>
<ControlTemplate>
<Grid>
<Border Height="Auto" Width="Auto" Background="{TemplateBinding Property=ContentControl.Background}" CornerRadius="10" Name=”myContainer”>
<ContentPresenter Content="{TemplateBinding Property=ControlContent.Content}" />
</Border>
</Grid>
</ControlTemplate>
</UserControl.Template>
MyUserControl.xaml.cs
Public partial class MyUserControl : UserControl
{
Public MyUserControl()
{
InitializeComponent();
}
Public override void OnApplyTemplate()
{
Border border = (Border)Template.FindName(“myContainer”,this);
border.CornerRadius = new CornerRadius(topLeftRadius,0,10,0);
base.OnApplyTemplate();
}
Private double topLeftRadius;
Public double TopLeftRadius
{
Set { topLeftRadius = value; }
Get { return topLeftRadius; }
}
}
And in the main window Main.xaml
<Window…….>
<MyUserControl Background=”Chocolate” Height=”100” Width=”65” TopLeftRadius=”20”>
<TextBlock HorizontalAlignment=”Center” VerticalAlignment=”Center”>Some Text </TextBlock>
</MyUserControl>
</Window>
Please feel free to scold me if anything wrong mentioned.
Hope this was helpful
April 01, 2009
Creating UserControl to hold other controls in WPF
4 comments 4/01/2009 07:42:00 PM Posted by kalyan kumar BHi Friends,
You can find many samples in google for creating user controls and my post stands little adhead of them.
Firstly if you create a user control and in the main window where you use the usercontrol, if you try to put some content within your usercontrol, it will throw an error. This is because your usercontrol is not designed to handle other wpf elements within it. To make this happen you have to follow a different apporach.
The following is a sample code for creating such a control:
<UserControl.Template>
<ControlTemplate>
<Grid>
<Border Height="Auto" Width="Auto" Background="{TemplateBinding Property=ContentControl.Background}" CornerRadius="10">
<ContentPresenter Content="{TemplateBinding Property=ControlContent.Content}" />
</Border>
</Grid>
</ControlTemplate>
</UserControl.Template>
And in your main window just add it as
<MyUserControl Background="LightBlue" Height="50" Width="75">
<Button content="Push Me">
</MyUserControl>
Remember here both MyUserControl and the Main window remain in the same namespace. The result of the above code will be a rounded rectangle with a button inside it. Creating a rounded rectangle as an usercontrol is easy but it will not act like a container for holding for other elements. What the magic i have done here is, i've defined the look of my usercontrol as rounded rectangle inside the usercontrol template and mainly the ContentPresenter Tag which makes the control to hold other items. Other important issue to look at is the TemplateBinding. I will not explain about TemplateBinding for now but you can find many sites that will help you around.
In my next post i'll explain how to change/access the cornerradius of the rectangle from code-behind of the usercontrol which will help you to expose the accessibility to the main window.
March 24, 2009
Double-click solution file to create your web site
0 comments 3/24/2009 02:20:00 PM Posted by kalyan kumar BLabels: IIS, Web Application
Hi all,
In Visual Studio, if you have to go for any web based content you will be left with two choices - web site/web application. Here is one difference that may be helpful for your selection criteria:
- Create a solution file.
- Add a new project and select the project type as "Asp.Net Web Application".
- Right click on this web application and select properties - go to 'Web' tab, under server you will find the radio box 'Use Visual Studio Development Server' selected. Below that is the radio box 'Use Local IIS Web server'. Uncheck the former and select the later one.
- Now when you export your solution file to another machine and when you double-click the solution file, your web site is automatically created in the IIS Server of that machine.