Working with 2D Graphics in WPF

Hey guys, in this article I am going explain how to draw home with 2D drawings in WPF.

This topic provides an overview of 3-D functionality in the Windows Presentation Foundation (WPF) graphics system. The WPF 3-D implementation allows developers to draw, transform, and animate 3-D graphics in both markup and procedural code, using the same capabilities afforded by the platform to 2-D graphics. Developers can combine 2-D and 3-D graphics to create rich controls, provide complex illustrations of data, or enhance the user experience of an application’s interface. 3-D support in WPF is not designed to provide a full-featured game-development platform. Windows Presentation Foundation 3-D classes allow developers to create 3D models in Windows applications as a part of GUI.

Creating 3D Models involves following features:

  1. Creating 3D surfaces by defining more number of triangular surfaces
  2. Assigning Material property for the 3D model
  3. Creating light sources
  4. Creating camera to visualize the 3D model from different angle.
  5. Animating the models
  6. 3D graphics is to produce 2D images from 3D models suitable for displaying on an output such as your computer screen.

Here is snap shot.

3DGraphics

Here is design:

<Grid>

<Image>

<Image.Source>

<DrawingImage>

<DrawingImage.Drawing>

<DrawingGroup x:Name=”House”>

<GeometryDrawing x:Name=”Front” Brush=”Orange” Geometry=”M0,260 L0,600 L110,670 L110,500 L190,550 L190,710 L300,775 L300,430 L150,175″>

</GeometryDrawing>

<GeometryDrawing x:Name=”Side” Brush=”Blue” Geometry=”M300, 430 L300, 775 L600, 600 L600, 260″>

</GeometryDrawing>

<GeometryDrawing x:Name=”Roof” Brush=”Yellow” Geometry=”M150,175 L300, 430 L600, 260 L450, 0″>

</GeometryDrawing>

</DrawingGroup>

</DrawingImage.Drawing>

</DrawingImage>

</Image.Source>

</Image>

</Grid>

Expander Control in WPF

In this article, I am going to explain how to use the Expander control available in WPF.

An Expander control is used to wrap or expand the content of items. You may have noticed some websites provide functionalty to close and open some controls. This can be achieved in WPF using the Expander control.

Let’s say, I have a ListBox control. The ItemTemplate for the items in the ListBox uses an Expander to wrap the contents of the item.  If I expand an item in the list, the ListBox expands to handle the new height of one of its items.  If I collapse that item, the ListBox’s height doesn’t adjust automatically.  I need the ListBox to reclaim that space so that my dialog looks correct. In this article I am using ListBox control.
See the attached source code for more details.

Here are few snapshots of this control.

Figure 1.

This snapshot is before the items in the list are expanded.

Figure 2.

This snapshot is taken after the items in the ListBox are expanded.

The following XAML code creates the Expander control at design time. Copy and paste this code in your application.

<Expander Background=”DarkGreen”  x:Name=”Expander1″ Header=”Expander1″>

<StackPanel Background=”Blue”>

<Expander Background=”Red”  Header=”Expander2″>

<ListBox Background=”Chocolate”  Name=”listbox11″>

<ListBoxItem>

<TextBlock>raj beniwal</TextBlock>

</ListBoxItem>

<ListBoxItem Background=”Blue”>

<StackPanel Background=”Yellow”>

<TextBlock>dinesh kumar</TextBlock>

<Expander Background=”Pink” Header=”Expander3″>

<ListBox Name=”list2″>

<ListBoxItem>

<TextBlock>rahul saxena</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>naresh kumar</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>suhel</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>steve</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>varman</TextBlock>

</ListBoxItem>

</ListBox>

</Expander>

</StackPanel>

</ListBoxItem>

</ListBox>

</Expander>

</StackPanel>

</Expander>

JavaScript Calendar Control in ASP.NET 2.0

In this article, I am going to explain, how we can use a JavaScript Calendar control in ASP.NET 2.0. In this article I am using a JavaScript file (Calendar.js) and a CSS file (Calendar.css). JavaScript file has all functions and methods, which are used in calendar and CSS file has all calendar style sheets.

You can call JavaScript file on page like this:

<script language=”javascript” src=Calendar.js type=”text/javascript”></script>

and stylesheet file like this:

<link href=Calendar.css rel=”stylesheet” type=”text/css”>

Here is a snapshot of Calendar control.

showcalendar
Figure 1:

You can call JavaScript file on a Button click event handler.

Auto Refresh Data on Page Using AJAX

Hi this is my first article on C# corner. I have some good topics in my mind, stay tuned.

In this article, I explain how to auto-refresh data on an ASP.NET page after a certain interval using AJAX UpdatePanel and other controls.  I am using some AJAX controls and using a SQL Server database and a Data Grid control. The Database name is Northwind. In this application my interval time for refresh data is 30 seconds. You can change your time by the times interval property.

Here is a snapshot:

This code is for binding data:

public void BindData()

{

con = new SqlConnection(“Initial Catalog=Northwind; Data Source=localhost; Uid=sa; pwd=;”);

cmd.CommandText = “select * from Employees “;

cmd.Connection = con;

con.Open();

da = new SqlDataAdapter(cmd);

da.Fill(ds);

cmd.ExecuteNonQuery();

GridData.DataSource = ds;

GridData.DataBind();

}

You can check your current time on page load. Write this code:

MyLabel.Text = System.DateTime.Now.ToString();
BindData();

And the grid refresh time is:

protected void Timer1_Tick(object sender, EventArgs e)

{

Label1.Text = “Grid Refreshed at: ” + DateTime.Now.ToLongTimeString();

}

Here is the HTML design code:

<form id=”form1″ runat=”server”>

<asp:Label ID=”Label2″ runat=”server” Text=”This is Time, When The Full Page Load :” Font-Bold=”true”></asp:Label>&nbsp;

<asp:Label ID=”MyLabel” runat=”server”></asp:Label><br /><br />

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<div>

<asp:Timer ID=”Timer1″ OnTick=”Timer1_Tick” runat=”server” Interval=”30000″>

</asp:Timer>

</div>

<asp:UpdatePanel ID=”UpdatePanel1″ UpdateMode=”Conditional” runat=”server”>

<Triggers>

<asp:AsyncPostBackTrigger ControlID=”Timer1″ EventName=”Tick” />

</Triggers>

<ContentTemplate>

<asp:Label ID=”Label3″ runat=”server” Text=”This is The Time when Only Data Grid will Referesh :”Font-Bold=”true”></asp:Label>&nbsp;

<asp:Label ID=”Label1″ runat=”server” Text=”Grid not refreshed yet.”></asp:Label><br />

<asp:Label ID=”Label4″ runat=”server” Text=”(Grid Will Referesh after Every 30 Sec)” Font-Bold=”true”></asp:Label>&nbsp;

<br /><br />

<asp:DataGrid ID=GridData runat=”server” Width=”100%” GridLines=”Both” HeaderStyle-BackColor=”#999999″ AutoGenerateColumns=”false”>

<Columns>

<asp:BoundColumn DataField=”EmployeeID” HeaderText=”Employee ID”></asp:BoundColumn>

<asp:BoundColumn DataField=”FirstName” HeaderText=”First Name”></asp:BoundColumn>

<asp:BoundColumn DataField=”LastName” HeaderText=”Last Name”></asp:BoundColumn>

<asp:BoundColumn DataField=”City” HeaderText=”City”></asp:BoundColumn>

</Columns>

</asp:DataGrid>

</ContentTemplate>

</asp:UpdatePanel>

</form>

I hope you will like this article. If yes then drop me a line or write a comment below in the comments section.