CanOz Blog

Reaching the code behind with Windows Presentation Foundation

V. Neil Knobbe — Wed, 16 Jul 2008 14:58:00 GMT

I mentioned in an earlier post that for a control in a Windows Presentation Foundation (WPF) application that you had to give each control that you wanted to write code behind for a name in the XAML of the form.

Strictly this is not true. If you want don’t want to use the built in features of the Visual Studio’s IDE for selecting classes and methods on the code behind page you could type in the code on the code behind yourself.

For me, at least, the easiest way to reach the code behind is to give each control a name in the XAML markup

then from the code behind page, you can select the control from the dropdown list.

After you select the control, you have access to all the events associated with the particular control.

By selecting a method from the list Visual Studio automatically generates the method declaration for you.

Once the declaration is made you can happily enter the necessary code you want for that event.

If you don’t want to take advantage of this great feature of Visual Studio, then you can write methods for controls the slightly more difficult way.

Instead of giving your control a name in the XAML of the form, have toadd an attributes for the control in the XAML.

The attribute needs to include are the action of the control you want to code against and the name of the method that you will write on the code behind.

Once you have added this to the XAML, go to the code behind and declare the method adding the two required parameters of Object and RoutedEventArgs.

Then you can add the required code for that method just as you would if you had Visual Studio declare the method for you.

So there you have it. Two ways to reach the code behind with a Windows Presentation Foundation (WPF) application.

Setting background colours with Windows Presentation Foundation

V. Neil Knobbe — Wed, 16 Jul 2008 14:48:00 GMT

I don't think I will ever get over just how much easier it is to do some things in a Windows Presentation Foundation (WPF) application than it is in a Windows application.

I was messing around with changing the background colour of a button to see what could be done. I ended up looking at how to apply a gradient to be the background of a button and realized that doing gradients with Visual Basic was just about as easy, if not easier, than creating them by modifying XAML markup. (You could also easily create gradients for the background properties of controls in a couple of mouse clicks by using Expression Blend.)

I started out with a plain button on my Form.

Like all experiments of mine I started off with the basics. I wanted to have a button with a two colour gradient background so I declared a variable as a LinearGradientBrush. (Note - Now before I hear back from people saying: "You could have declared and set your variable on one line…" or "You could have just set the Background property…." ... I know. Due to limitations with taking the screen shots (the screen resolution didn't allow me to get the whole line of code without scrolling or having the code on multiple lines) I wanted everything to be as easy to read as possible.)

The next thing I did was declare the variable as a New LinearGradientBrush and set the parameters which were the starting colour, the finishing colour and the angle that I wanted to gradient to be displayed at. A 0 degree angle shows the gradient from left to right and a 90 degree angle shows the gradients from top to bottom. You can also declare any degree from 0 to 360. (I thought that being able to change the angle of the gradient this easily was a wonderful feature.)

Then all that was left was to apply the brush to the background property of the button.

Run the project and I had the desired effect of a button with a two colour gradient background.

Now my creative juices started flowing and I got to wondering about having more than two colours in the gradient.

(Note - I have apologized in the past for my rather horrible colour matching abilities and I will do so again now and warn those who have not witnessed my graphical abilities to be prepared.)

Having more than two colours for a gradient background is just as easy as a two colour gradient. One of the overloaded constructors of the LinearGradientBrush is to pass an array of gradient stops as one of the parameters.

To create the array of gradient stops, you start be declaring and defining variables as New GradientStops. The overloaded constructor for a gradient stop requires that you pass a colour and an offset. (The offset is where the colour is at its full colour in the gradient. The first colour starts at 0 and the last colour ends at 1).

For my button I decided to try three colours and have the colours starting with red on the left then becoming green in the middle and then changing to from green to blue on the right side.

Next I needed to declare an array to hold the gradient stops in. The type of array that is used for this is a GradientStopCollection and you add the gradient stops to the array by using the Add method.

With all the gradient stops in the array/collection, you then set the background of the button as a New LinearGradientBrush and pass the array and an angle for the gradient as parameter to the overloaded new constructor for the brush.

Now when the project is run, the three colours are displayed on the button.

I mentioned the angle parameter of the constructor for the LinearGradientBrush earlier and changing it can lead to some very different looks.

Using the same code for the three colour button, but changing the angle of the gradient to 45 degrees

the colour change goes from the top left corner of the button to the bottom right.

One thing I did notice once I started changing the angle of the gradient I did find that if I wanted the gradient to show evenly I would also have to also change the offset property of the first and middle colours to even out the effect.

By changing the offset of the red, there is a little more solid red on before the colour starts mixing with the green. The offset of the green is moved over by .2 as well to keep the green close to the middle of the button.

By using the GradientStopCollection adding more colours is a breeze. You just need to create another gradient stop and then add that to the collection.

As you can see doing gradient colours is now a simple process with Windows Presentation Foundation (WPF) and Visual Basic.NET 2008.

Project for all VB TabControl content

V. Neil Knobbe — Fri, 11 Jul 2008 00:36:00 GMT

I have uploaded the project showing how to do all the Tab content which I posted in this post.

The project can be downloaded from here.

TabControl with WPF and Visual Basic.NET 2008 revisited

V. Neil Knobbe — Thu, 10 Jul 2008 16:25:00 GMT

When I last visited the TabControl project, I changed it so that the look of the Tab content was done via VB. One thing that has been niggling at me since was how the first Tab content was done.

The content on the Tab was still entered on the XAML code and the spans were defined there as well so the look could was not really created purely with VB. Since I was after creating the look with VB, the first Tab also be included with this rather than a mixture of XAML and VB.

I did find that getting the same visual look took a lot more lines of code but, if you were to use the same process on a TextBlock, adding more text in various styles during run time could be done.

The beginning XAML for the Tab is now very basic with just a Grid on it.

On the code behind starts with declaring variables for both a TextBlock and a Span.

The textblock is going to be placed inside the grid on the tab and the span is going to end up being the content of the textblock.

Using a span for this is really great. A span is used for grouping a set of different inline content together. Thus allowing several different look to be incorporated in the same span and the really great thing about spans is that they are not inherited so each inline element you add to a span can have its own totally separate look. You don’t need to get rid of the formatting of the previous element before applying a new formatting.

The first line I add to the span is going to be in plain text. The text is added by passing the text I want as a Parameter of the Run Class. The run class is an inline content element that may contain either formatter or unformatted text. So basically it is a container for the text I want to add to the span.

The run is passed into the Add method of the Inlines property. The inlines property is actually a collection of inline elements which make up the span.

From this plain text beginning it is just a matter of declaring a new span for the style that is wanted to be added next, defining the style and adding that span to the inlines collection of the root span.

One the span is formatted as is wanted, the textblock is added to the grid on the tab and the Span is applied to the inlines property of the textblock.

Initially I thought that the property of the textblock to apply the span to would have been the text property, but after a little digging I found that because a span is an inline property, it needed to be included in the inline collection of the control.

Running the App shows that all the formatting that is set with the code behind is working perfectly.

Thus giving a more pure VB setup of the tab contents.

Gadget style window with WPF and Visual Basic.NET 2008 Project

V. Neil Knobbe — Sun, 06 Jul 2008 23:45:00 GMT

I have uploaded the project for the Gadget Style Window with one minor change. Beethoven is out and a small midi file has replaced it.

I know that some of you are probably saddened as I am by Beethoven's departure, but I didn't want to subject everyone to a 30Mb+ download.

The project can be downloaded from here.

TabControl with WPF and XAML Project

V. Neil Knobbe — Sat, 05 Jul 2008 23:56:00 GMT

I have made the project that goes with the post for the TabControl with WPF available for download.

The project can be downloaded from here.

Again I must apologise for the file size. Like the project for the Visual Basic.NET version of the TabControl it is a little bloated due to the video file.

TabControl with WPF and Visual Basic.NET 2008 Project

V. Neil Knobbe — Sat, 05 Jul 2008 16:44:00 GMT

Sometimes it just takes me a while, but I finally got to the point where I figured I should also be including the Visual Basic projects to go along with the posts and the videos.

You can download the project that goes along with the TabControl with WPF and Visual Basic.NET 2008 post.

The project can be downloaded from here.

My apologies for the size of the file. It is a little bloated because of having the video file.

TabControl with WPF and Visual Basic.NET 2008

V. Neil Knobbe — Sat, 05 Jul 2008 02:44:00 GMT

A while back I posted up about showing more interesting content on that tab of a tab control using Windows Presentation Foundation (WPF).

In the example that I posted, I created the custom look of the tab control just using XAML and I thought that it would be good to also show how to do the same thing using Visual Basic.

To do this I decided to cut back to the basics for the content of the tabs and I started with a tab control with four tabs. The first tab had a textblock with some text as well as a couple style blocks in it. The second tab starts with a stack panel. The third and fourth tabs have grids on them.

The XAML for my base project is.

<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="Window1"

Title="Window1" Height="437" Width="532" WindowStartupLocation="CenterScreen">

<TabItem.Header>

<TextBlock x:Name="Tab1TextBlock">
<Span x:Name="Tab1TbSpan1">Words</Span> <Span x:Name="Tab1TbSpan2">in</Span>
<Span x:Name="Tab1TbSpan3">Italics</Span>

</TextBlock>
</TabItem.Header>

</TabItem>
<TabItem x:Name="Tab2">

<TabItem.Header>

</TabItem.Header>

</TabItem>
<TabItem x:Name="Tab3">

<TabItem.Header>

</TabItem.Header>

</TabItem>
<TabItem>

<TabItem.Header>

</TabItem.Header>

</TabItem>

</TabControl>

</Grid>

</Window>

The window does not look too interesting yet,

but we will make it look better soon.

Tab 1

Within the XAML of the text block that is in the first tab, I have added in where I want the different styles to be. I have giving the each span block a name so that it can be referenced by the code behind.

There are different ways to go about this depending on what you want to do. As you will see I have created one style with several different properties, since I am only going to be setting one property per span block I have only created one new style, or you can create a new style for each span block if you are going to have different styles for overlapping properties.

I started off by declaring a variable as a New Span, then I set the properties for the variable that I wanted.

Dim s As New Span

s.Foreground = Brushes.Blue
s.FontWeight = FontWeights.Bold
s.FontStyle = FontStyles.Italic

Now that I have the properties set, I just need to assign them to the various spans that I have on my tab.

Tab1TbSpan1.Foreground = s.Foreground
Tab1TbSpan2.FontWeight = s.FontWeight
Tab1TbSpan3.FontStyle = s.FontStyle

Tab one now has something more elaborate on it.

Admittedly, I could have just used Brushes.Blue to set the Foreground of the first span, but by creating and using a new span I can now re-use this over and over in my code if I wanted to and if I wanted to change the colour, then I would only have to change one line of code rather than possibly having to several to change.

Tab 2

Tab 2 starts out with a stack panel on it with the orientation of the stack panel set to horizontal.I could have set the orientation of the stack panel with VB code if I wanted by using:

With Stack

.Orientation = Orientation.Horizontal

End With

if I wanted.

In the stack panel I am going to place a text block, a rectangle and a circle.

To add the text block, I need to start out with declaring a new text block then set the Text property. With that done the last line of code adds the text block to the stack panel.

With tb As New TextBlock

tb.Text = "Circles and Rectangles"

Stack.Children.Add(tb)

I now have a caption on the second tab.

Next I want to have a circle showing on the tab, so I declare a variable to hold a new ellipse and then set the Height, Width, and Fill. I also set the Margin for the ellipse to a new thickness and pass the numeric representations of left, top, right and bottom to position the ellipse on the tab. Once I have the properties I want set, I add the ellipse to the stack panel.

Dim c As New Ellipse

c.Height = 20
c.Width = 20
c.Fill = Brushes.Blue
c.Margin = New Thickness(10, 0, 0, 0)

Stack.Children.Add(c)

Tab 2 now has a caption and a circle on it.

The last item I wanted on the tab was a rectangle, so I did much the same for this as for adding the ellipse. I declared a variable to hold a new rectangle then set the Height, Width and Fill. Again I set the margin property to a new thickness to position the rectangle on the tab. Then I added the rectangle to the stack panel.

Dim r As New Rectangle

r.Height = 15
r.Width = 25
r.Fill = Brushes.Red
r.Margin = New Thickness(10, 0, 0, 0)

Stack.Children.Add(r)

I now have my desired look for the second tab.

Tab 3

Tab 3 will hold an image.

Once again I start off by declaring a variable which will hold a new image, then set the Width and Source properties.The source property is declared as a New BitmapImage and the path of the image file, as well as what kind of Uri the path is, are passed as parameters of the Uri of the file. The image control is then added to the grid on the tab.

Dim v As New Image

v.Width = 80
v.Source = New BitmapImage(New Uri("Lizard004_RJ.JPG", UriKind.Relative))

Grid1.Children.Add(v)

The third tab now displays an image.

Tab 4

The last tab on my tab control is going to display a video.

I start out by declaring a variable to hold a new instance of a media element, then set the Width and Source properties of the element before adding the control to the grid on the fourth tab.

Dim m As New MediaElement

m.Width = 80
m.Source = New Uri("butterfly.wmv", UriKind.Relative)

Grid2.Children.Add(m)

The tab now displays the video and completes the effect I was after.

So you can see that it can be just as easy to do in Visual Basic what you can with XAML.

Video for Gadget Window

V. Neil Knobbe — Wed, 02 Jul 2008 12:15:00 GMT

I have finished the video showing the process for creating a Gadget Style window.

You can download it from here.

Creating a Gadget style window with WPF and Visual Basic.NET 2008

V. Neil Knobbe — Sun, 29 Jun 2008 05:03:00 GMT

I don’t know if it is a case of my actually knowing more or the fact that doing stuff with Windows Presentation Foundation (WPF) is easier. To me it seems doing what I want is getting quicker these days.

The ability to create and use semi-transparent forms has been around for a while now, but the process to creating these types of forms has not been the easiest.

Visual Basic.NET 2005 gave us access to the opacity property of a Windows form. The down side of this was that it made the whole form, including any controls on the form, opaque thus still showing some of the form itself.

With very little code, creating a gadget type window with WPF is relatively easy. In fact look of the Window can be created with as few as 5 lines of code. How and what your gadget window does is entirely up to you. (I will apologize at this point in time for how bad my gadget will look. I am not a graphical person at all and my colour coordination is really, really bad.)

What I decided to do was I wanted something that would play some music as I worked on my computer. VbCity Leader and Microsoft MVP Ged Mead showed us how to add sound to a WPF app, so I decided to incorporate that idea to my project.

Now admittedly what we will end up at the end of this post is not very exciting or versatile, but it is a start and can be expanded on to suit your wishes. I just want to show the basics on how to create the gadget window.

The first thing we need to do is create a new WPF Application and the XAML for it is pretty basic.

Before you can start adding code to the code behind page there is one thing that you must do and that is you must add a Name property to the XAML of the Window. Until you do that you don’t have, on the code behind page, access to the Events of the window.

I know that it looks like can get to the Window1 Events, but if you tried to set or change any settings for Window1 you would get errors.

So in the XAML of your page you just need to add a Name property.

I also changed the Title of the page as you can see the title in the Taskbar of your computer.

Now that we have a name for the form we can tap into the events of the page itself and start adding code to the code behind. This was when I ran into the first gotcha.

The first gotcha I ran across was in the placement of the code I was using. The first time I tried to add the code I used the Form_Loaded event, an event that I have used for setting properties of the form in the past, which has always worked like a charm. The code I used was:

What happened, however, when I tried to run my project to see what happened was I got an InvalidOperationException . The reason this exception was thrown is because you can not set the AllowsTransparency property of a form once the window has been shown.

To get around this problem I put the code in the Initialize event of the form which let me set all the properties of the form that I wanted.

As you can see by the code above, I have set the height and width of the form to 200, then I made changes to the three properties that really make this a gadget type window.

The first property I set was to set the AllowsTransparency to True. What this property does is indicates whether the client area of the window supports transparency.

The second property set was the Background of the form. This is set to the color Transparent.

The third property set was the WindowStyle. What the WindowsStyle property does is tell the application what sort of border to put on the window. By setting the style to None, the ControlBox which you would normally see at the top right of a window are not show effectively removing the border of the form.

If you were to run the project now you would not actually see anything because your form is transparent and there are no other controls on it just yet. You could verify that it is running by taking a look at the Taskbar on your computer.

(You certainly don't need to set the properties of the form, then add controls like I am doing, you could set up your form like you want it then make whatever changes you want to make.)

On my form I decided that I am going to have an Ellipse and two Buttons. One button is to start the music and one to exit the Application.

Let's start with the Ellipse since this will be what our "form" will end up looking like.

First off I added the Ellipse to the XAML of my form making sure that I gave it a name so that we could set its properties on the code behind page.

Next I made the changes to the properties of the Ellipse on the code behind page. I set the Fill property (again I apologize for any lack of graphic artistry), the Opacity, Width, Height and because I didn't want to just have a flat Ellipse showing I added a BitmapEffect.

The Opacity and BitmapEffect properties are the interesting ones here. By setting the Opacity I can regulate how see through my ellipse is and the BitmapEffect has added a beveled edge around the ellipse, just to add a little bit of depth to the graphic.

Now when the project is run you can see the ellipse on the form.

Next buttons are added to the XAML of thewindow again making sure that Names are given to each one.

Then set the properties of the buttons on the code behind page.

The Height, Width and Content are set for both buttons as well as the VerticalAlignment property. For the button that will exit the application the Forground property is set to Red to have it stand out.

The last property that is assigned for the buttons is the Margin property which is used to position the buttons where I wanted them on the form over the ellipse. Setting this property was a little hit and miss as I was setting it via code so I could not see on the form where the buttons were actually going to end up.

Now that I had the form looking like I wanted, all that was left was to be able to move and position the window anywhere I wanted to put it, have music play when I clicked the > button and to be able to quit the application.

To make the window move to a different position on the screen all that is required is one small line of code in the MouseLeftButtonDown event of the window.

Now if the application is run and the left mouse button is held down you can move the ellipse anywhere on your screen.

To close the application, just put the following code in the Click event of the close button.

The last thing to be done is to make music. (Thanks once again to Ged for pointing out the pitfalls of playing music.)

(Admittedly there could be a whole lot more functionality to the application here to let, for example, the user either enter or select a path and have the application play each audio file in the directory one after the other, but that is more than I wanted to show here. Maybe I will get to that in a future post.)

We start with adding the Imports Statement

Imports System.Media

Add a Variable to hold our instance of a media player

Dim MyPlayer As MediaPlayer

Lastly the code to play the music

So the complete XAML for the gadget is:

<Grid>

<Ellipse Name="Ellipse1" />
<Button Name="Button1">Button</Button>
<Button Name="Button2">Button</Button>

</Grid>

</Window>

and the complete code:

Imports System.Media
Class Window1

Dim MyPlayer As MediaPlayer
Private Sub Win1_Initialized(ByVal sender As Object, ByVal e As System.EventArgs) Handles Win1.Initialized

With Win1

.Height = 200
.Width = 200
.Background = Brushes.Transparent
.AllowsTransparency = True
.WindowStyle = Windows.WindowStyle.None

End With
With Ellipse1

.Fill = Brushes.Tomato
.Opacity = 0.5
.Width = 150
.Height = 110
.BitmapEffect = New System.Windows.Media.Effects.BevelBitmapEffect

End With
With Button1

.Height = 20
.Width = 20
.Content = "X"
.Foreground = Brushes.Red
.VerticalAlignment = Windows.VerticalAlignment.Center
.Margin = New Thickness(40, 70, 20, 20)

End With
With Button2

.Height = 20
.Width = 20
.Content = ">"
.VerticalContentAlignment = Windows.VerticalAlignment.Center
.Margin = New Thickness(0, 70, 20, 20)

End With

End Sub
Private Sub Win1_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Win1.MouseLeftButtonDown

Me.DragMove()

End Sub
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click

Me.Close()

End Sub
Private Sub Button2_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click

MyPlayer = New MediaPlayer
MyPlayer.Open(New Uri("symphony5_beethoven_radio3.mp3", UriKind.Relative))
MyPlayer.Play()

End Sub

End Class

How simple can it get?

Multi-Line commenting

V. Neil Knobbe — Sat, 07 Jun 2008 02:00:00 GMT

There are times when I have to wonder if I am the only person who does not know some things.

I ran into this self doubt again the other day when I was watching one of Ron Cundiff's VB.NET Soup To Nuts WebCasts.

During the WebCast one of the participants asked if there was a way to comment multiple lines of code. When I heard this my ears perked up and I got very interested.

In the, almost, ten years that I have been writing code, I always have commented out any lines of code I didn't want to run one line at a time. What a time consuming effort that can be depending on the number of lines you are working with. I also ended up with unformatted (not indented) code,

and usually put the comment apostrophe in the wrong place when an indented line of code moved once the one above had been commented out.

Well this is all changed now. Low and behold there are buttons in the Visual Studio IDE that let you comment out, or uncomment, any lines of code that you have selected. All this time I had a simple way literally staring me in the face.

Right in the main Toolbar there is the Comment Button

and the Uncomment Button.

Now all I need to do to comment, or uncomment, multiple lines is highlight the code I want and click a button.

One other great thing about this feature is that the code stays formatted (indented) even after commenting which, I believe, makes it much easier to read.

*sigh* Now I only have to wonder what other time saving “wonders” I will have to wait ten years to discover.

ClickOnce Deployment – Deploying files with your application

V. Neil Knobbe — Sat, 07 Jun 2008 01:30:00 GMT

In a previous post, I showed you how you can deploy your application using ClickOnce. Looking at how to deploy extra files, like my first look at ClickOnce, was prompted by a post on vbCity.

Now I will admit that I wasn’t as sharp answering the original question as I could have been so be gentle with your opinion of me if you read through the thread. (In fact it took me two days to work out that when the person asking mentioned the "Publish" tab that they meant ClickOnce. I guess this is what I get for trying to answer questions a 3:30am.)

Once I was in synch with the problem a little research provided me with an answer.

You would have thought that once you added the files to your project in Visual Studio that they would be automatically included in the deployment package but this is not the case. I added the file to my project,

but if you were to then take a look at the files that are included in the deployment package by going to the Publish tab of your projects properties page and click the "Application Files" button you get a nasty little shock.

No additional file even though we have added it to the project.

The reason for this is that we have not told Visual Studio what we want to do with the file. What is needed is to make one change to the properties of the file. The property we want to change is the Build property.

By default, depending on the extension of the file, when you add a file to a Visual Studio project the Build property is set to "None".

(If you were using a deployment method like creating a Windows Installer file (.msi) then this would not be a problem because of the was you create the Installer file. With ClickOnce deployment unless you change the Build property it assumes that you don’t want to include the file in the deployment package.)

In the properties window of the file select “Content” from the choices for the files Build property.

Now ClickOnce will recognize that the file is to be deployed with your application and if you go back to the My Properties page of your app, click on the "Publish" tab and click on the "Application Files" button you will see that the file in the list of files to be included.

Publish your application, then you can do a test install and you will see by looking at the files that are installed on your computer now include the additional files.

ClickOnce increments

V. Neil Knobbe — Fri, 23 May 2008 22:51:00 GMT

Rockford Lhotka posted up some details about how ClickOnce handles what is downloaded when it performs an incremental update.

The more I look at ClickOnce the more I am coming to appreciate it.

I know this goes against the ClickOnce idea, but if the end user could only determine where the Application is installed. I suppose if I want to be that fussy I would just distribute and install via a Windows Installer file.

ClickOnce deployment videos

V. Neil Knobbe — Fri, 09 May 2008 20:59:00 GMT

I have finished making videos showing how to deploy and update Applications using ClickOnce. All the videos have been zipped so that you can download them and watch at your leisure.

I orignally thought it was going to be in two parts, but decided in the long run to make it three parts to keep the length ove the video and size of the files down.

Part 1 goes through the settings.

Part 2 shows the publishing process as well as downloading and installing.

Part 3 shows how ClickOnce handles updates to the Application.

Deploying applications with ClickOnce

V. Neil Knobbe — Sat, 03 May 2008 19:49:00 GMT

ClickOnce Deployment

A recent post on vbCity regarding deploying an application with ClickOnce got me wondering about doing deployment with ClickOnce.

I have always done deployment of applications by creating and using a Setup and Deployment package which created a .msi installer file, so it was interesting to see some of the differences between the two distribution methods.

First off I created a simple application to test the ClickOnce distribution and installation method with. What I created was nothing special, just a windows form with at button that, when it is clicked, a message box is shown.

As you can see the application is nothing special. One other thing that I did was add a version number to the text of the form. I did this to show how ClickOnce deployment installs newer versions as they are available. I will get to this a little later.

Once your application is ready to go you want to open up the My Project page from the solution explorer.

On the My Project page click the Publish tab.

From this page, you define where your application is going to be available from and how it is going to be installed on the client machine.

Taking a look at the publish page from the top down the first thing you will want to enter will be the location (URL) that you are going to publish to.

As you can see from the image above, you have three options for the location that you are going to publish to. You can publish to a web site (http://www.somesite.com) but to do this you must have FrontPage extensions enabled on the web site. You can publish to a ftp server (ftp://www.somesite.com) as long as you have ftp permissions for the site, or you can publish to a local file (C:\myApplication). (For distribution this last option is not really that realistic unless you are on an internal network where you can share out the directory to others on the network.)

The next option you have is to determine if you application is available offline or not.

If you don’t want the users to be able to access your application offline then select the online option. This will cause your application to run, but not show in the start menu of the user’s computer. They would need to download the application each time they wanted to use your application.

If you make the application available offline then a shortcut is included in the start menu of the computer making the application accessible all the time.

To the right of the Install settings there is a group of four buttons.

These buttons define what files are to be included with your application, any prerequisites that the end user must have installed on their computer to run your application, how and when to get updates as well as options such as adding the publishers name, product name etc.

Under the install mode and the buttons there is the version boxes plus the option to automatically increment the revision with each publish.

Keeping the increment box checked is, I believe, quite important. If you don’t remember to increment the version number when you republish the application then the next time the application checks for updates it looks at the version number and if that number has not changed, even though your application may have, it assumes that there is nothing newer and opens the currently installed version.

The last two items on the window are the Publish Wizard and Publish Now buttons.

The Publish Wizard button will open a series of dialogues and walk you through the settings that you want your installer to use.

The Publish Now button will use the information that you have entered on the page and create the installer files then, if you are deploying the files to either a web site or ftp site, prompt you for log on details.

Simply insert your username and password then click the OK button and the files required will be uploaded to the URL you specified.

You can see in the image above that ClickOnce has created two files and one directory on the web server. Within the Application Files directory you would find one directory containing each version that has been published and uploaded.

I just happen to have two versions in the application files directory and the one that will get distributed will always be the latest version. (I mentioned earlier that I had put a version number on the text of the form and the version number you should see is 2 not 1 like the image of the form above.) It would not matter how many older versions I have on my server.

Now you may distribute the address of your application to your clients. The file that you want to point to is the Application Manifest file, not the setup file. From the image above I would point people to the URL http://www.neilknobbe.com/clickonce/ClickOnce.application. (The link is live and you can navigate to it, download and install the application that I mentioned at the start of this post. It is not very exciting, but it shows how ClickOnce works.)

The prerequisites for installation, which you would have set earlier, are checked.

If all is ok, the user will be prompted to install the application.

Once installed your ClickOnce deployed application is ready to use.