Geeks With Blogs

News

  
Bill Evjen's Blog Code, Life and Community

I just really started playing around with WPF and XAML and how to build an application in this new format. I really like it, but at the same time, I have a lot to still learn! For my first example, I wanted a form that would have some sort of event that caused UI to change in some manner. For this, I put together a form with a simple Button control on it and a place to put some results on the form after the button is clicked. This form really needs two pieces to work - Window1.xaml and Window1.xaml.cs. Window1.xaml is the visual form and it is laid out using XAML, while Window1.xaml.cs is the code-behind file.

What I really like about this WPF model is that it is very much like the ASP.NET model - which I find quite attractive. You have a page dealing with presentation and another page that deals with all of the business logic surrounding the page. The code for the Window1.xaml file is presented here:

<Window x:Class="XAML_Example.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAML_Example" Height="300" Width="300"
>
<
Grid>
   <
Button Height="23" Margin="15,15,125,0" Name="button1" VerticalAlignment="Top" Click="button1_Click">Random Number</Button>
   <
ScrollViewer Margin="0,50,0,0">
      <
TextBlock Name="textBlock1" TextWrapping="Wrap" FontSize="20" FontWeight="Bold" />
   </
ScrollViewer>
</
Grid>
</
Window>

From this, you can see the entire form is defined using the <Window> element. Looking at the attributes of the element, you can also see that I defined the title of the form and its size. All the items within the <Grid> element can actually be in any order you want as the real emphasis is on the Margin attribute which specifies the location of the object. You can see that I have a Button control, a ScrollViewer control, and a TextBlock control on the form. Looking more closely at at the <Button> control, you can create an event for this by simply adding the appropriate attribute. In this case, the Click attribute is added and a method name is assigned to it (button1_Click()). This points to a method that is contained in your code-behind file - Window1.xaml.cs.

using System;

namespace XAML_Example
{

   public partial class Window1: System.Windows.Window
  
{
      
public Window1()
       {
             InitializeComponent();
        }

        public void button1_Click(object sender, EventArgs e)
       
{
            
Random generator = new Random();
            
int randomValue;
             randomValue = generator.Next(10, 100);
             textBlock1.Text +=
" " + randomValue.ToString();
         }

       }
}

Running this bit of code and pressing the button to initiate the button1_Click event will give you something like the following results as presented here:

Enjoy!

Posted on Monday, November 20, 2006 7:16 AM Windows , Microsoft , MSDN , HOW-TOs | Back to top


Comments on this post: HOW TO: Build Your First WPF Application

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
I've some problems to define the events , for example with the button , how can I create an event ? Usually in 2.0 I use double click on the button and the event is created.
Thanks.
Left by Rafael on Feb 16, 2007 12:00 PM

# RE: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Many thanks for this, I converted it to VB and it worked great and was a really useful first exercise.
Left by Kevin Crampton on Aug 10, 2007 9:14 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Great!
Thanx.
Left by Tamir From Israel on Mar 13, 2008 10:47 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
thank you!

please learn creade a custom theme for wpf application

my email : i.lover3000@gmail.com
Left by Gholamreza Sofalzadeh from iran on Sep 22, 2008 4:34 PM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Thanks for this good example. my first practice successful with your eg.
Left by deo on Sep 23, 2008 7:26 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
hii..

send me some more examples
Left by asis on Jan 06, 2009 1:26 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
how to publish it
?
Left by sobhy on Mar 04, 2009 7:14 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
its was very easy to do. thanks a lot. keep posting
Left by Rakhi Bansal on Apr 02, 2009 4:46 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Thanks, nice example for a starter like me.
Left by Davis on Jul 13, 2009 9:54 PM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Pls.Explain situations when WPF is used?
Explain With Example please.
Left by santosh on Aug 19, 2009 12:25 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
i have used the MediaElement in the wpf for a Media Player. Over all XAML is a good choice for the windows stand alone applications
Left by VB Reader on Sep 24, 2009 7:49 PM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Hey! This was the first example which helped me to execute my first WPF application..
Thank you..
Left by Prachi on Oct 12, 2009 1:07 AM

# re: HOW TO: Build Your First WPF Application
Requesting Gravatar...
Very nice.. easy.. post some tough ones also
Left by Rakhi Bansal on Jul 15, 2010 9:59 PM

Your comment:
 (will show your gravatar)


Copyright © Bill Evjen | Powered by: GeeksWithBlogs.net