Rounded Corners Using CSS

Hi All,

Ever wondered if you have an option to create rounded div using css. Not in all browsers but the most popular browser i.e., the mozilla has such an option. To have rounded corner for a div we just need to give it as,

#myDiv
{
border:solid 1px black;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

or you can give all in a single line as

#myDiv
{
border: solid 1px black;
-moz-border-radius: 10px;
}

For Safari broswer, you can use

-webkit-border-radius: 10px;

or you can specify individually as

-webkit-border-top-right-radius: 10px;
-webkit-border-top-leftt-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

For more information, please visit:
http://www.the-art-of-web.com/css/border-radius/

Power of semi-colon in javascript

I have been scripting since 2years from now and when i saw this link:

http://robertnyman.com/2008/10/16/beware-of-javascript-semicolon-insertion/

I thought there is some thing new, infact a lot more about javascript that i should know. Please go thru this link to have more understanding of semicolon.

Also while using jquery if you use the jquery file as,

<script src="js/jquery-1.2.6.min.js" type="text/javascript" /> //bad

The correct usage would be

<script src="js/jquery-1.2.6.min.js" type="text/javascript" ></script> //correct usage

Masked Slider Plugin in jQuery

Hi 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

Convert a Canvas into an Image

Hi,
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.

Difference between Logical and Visual Tree in WPf

Hi All,
Just go through this link:

http://blogs.msdn.com/mikehillberg/archive/2008/05/23/Of-logical-and-visual-trees-in-WPF.aspx

Accessing template elements of a usercontrol

Hi 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

Creating UserControl to hold other controls in WPF

Hi 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 x:Class="MyUserControl" Height="Auto" Width="Auto"......>
<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.