Saturday, February 28, 2009

Setting border at RunTime Using C#, In WPF

After two busy weeks in my office work, and learning the WPF in my new office project, Now i am back with the new article of how to apply the border at runtime, by setting the shadow, linear Gradient on the border using C#. Then on weekend i have explore and try learning more about WPF which may help me in future work.So by doing some R&D i came to a solution which i will share with you. So lets start the with the article.
For this articel i have Grid added in the window, with 3 Row so that i can add one border at one row and between 2 rows i have set one row for space. Here is the complete xaml for the window. you can see that i have use the Grid for my layout and then i have added three rows in the grid with same height.

And i have added XAML code for the border and added that border in the First row. Here is the C# code you can use to set the border at runtime.

DropShadowBitmapEffect myTestBorderEffect = new DropShadowBitmapEffect();
myTestBorderEffect.Direction = 315;
myTestBorderEffect.Color = Color.FromRgb(84, 84, 84);

LinearGradientBrush myTestBorderGradient = new LinearGradientBrush();
myTestBorderGradient.EndPoint = new Point(0.5, 1);
myTestBorderGradient.StartPoint = new Point(0.5, 0);
myTestBorderGradient.GradientStops.Add(new GradientStop(Color.FromRgb( 75, 218, 92), 1));
myTestBorderGradient.GradientStops.Add(new GradientStop(Color.FromRgb( 12, 126,4), 0));

Border TestBorder = new Border();
TestBorder.Margin = new Thickness(2, 2, 2, 2);
TestBorder.CornerRadius = new CornerRadius(5, 5, 5, 5);
Grid.SetRow(TestBorder, 2);
TestBorder.BitmapEffect = myTestBorderEffect;
TestBorder.Background = myTestBorderGradient;
In the above code what i did is to declare the DropShadowBitmapEffect object which i will use to set the shadow of my border, then i have set the Direction of the shadow in which angle the shadow is cast. I have set the 315 angle so that the shadow is shown on the bottom and right side of the border. You can set the angle of your choice. And then i have set the color property of my shadow object in which color the shadow is shown. i have choose gray color for my shadow.
Next is to declare the LinearGradientBrush object for my border object, i have declare and set the properties of my LinearGradientBrush object, First i have set the EndPoint of my linear gradient object which are 0.5 and 1 , and then i have set the starting point of my gradient object which are 0.5 and 0(zero). Next i have set the GradientStop of the Linear Gradient object. And set the color and the offset of the Gradient stop , which is in first case 1 and then set the stop color of the second Gradient stop and set the offset to 0(zero). Now my shadow and Gradient objects are ready.
Now i have to declare the border object and set the shadow and gradient object to that border object and then add that border object to the Grid row. First i declare the border object and then set the properties of the border object like i have set the Margin of the border from left, top , right and bottom. Then i set the CornerRadius of the border so that the corner of the border looks curvy. I have set 5 from each side you can increase or decrease the corner radius of the border as you like.
Now i will set the Grid row , in which row the border will be placed i have use Grid.SetRow function to set the grid row of the border, As i have only rows defined in my grid so i only set the Grid row. If you have the column defined in you grid and you want to set teh column of the your border then you can use the Grid.SetColumn function to set the border column as well. Similery if you want to set the columnSpan then you can set it by using Grid.SetColumnSpan function. And you can use Grid.SetRowSpan function to set the Row span of your control( in this case for border).
In the last three statement what i have done is to set the BitmapEffect property of the border object to the shadow object which i have declare and then i have set the background property of the border to the LinearGradientBrush object and at the end i have add the border to the my grid where i want to display the grid, as i have set the row of the border. And you can see the out put of the above work as below.

The first border is added using XAML and then second border is added using C# code, you can see that output of both the code is same.Hope you like this article and it will help you.

All and any comments / bugs / suggestions are welcomed!

No comments: