Overview on Cider for Creating WPF Applications
Cider is the code name for the Visual Designer for Windows Presentation Foundation, i was browsing today some of the
functionality embedded in and really it's amazing to see things from both the designer and the XAML code and how
things works, also i created a simple Hello World application and here i'll introduce you with some of the basic
functionality providing visual assistance to go through this new tool,
first let me guide you to the following
post where Simon Guest provide a basic
introduction for the needed prerequisites and tools to start with the WPF
Here is where you start, you start by creating a new Windows Application under the .NET Framework 3.0 Projects node
Let us name it TestHelloWorld
A new Project will be created as shown in the Solution Explorer,
By looking into the project elements you will find the project references couple of Components, also you will note
the .XAML extension with the new added Window form,
Window1.XAML also has a code behind for it called Window1.XAML.CS,
This how the designer environment looks like 2 panes, one contains the designer area and the other contains the XAML
editor area, let us start by changing the Title of the Window form to Hello World
<Window x:Class="TestHelloWorld.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Hello World" Height="300" Width="300"
>
<Grid>
</Grid>
</Window>
We will notice the Grid element, the Grid element is one of the container elements that exists so lets currently use
the Grid Continer Control, as this control will be the working area for us to add our controls, so lets go to the next stage so fast.
Adding The Controls
First we will add a Button and a Label from the left toolbox , I have added some customizations and here is the XAML
representation
<Grid Background="Black">
<Button Margin="18,16,0,22" Background="Orange" Click="SayHello" Name="btnHelloWorld" HorizontalAlignment="Left" Width="75">Click Me!!</Button>
<Label Margin="120,44,10,41" Foreground="White" Name="lblHello" ></Label>
</Grid>
and here how it looks like in the design mood
Ok, but my target was to say Hello World to those who will click the button represented on the above image, so let
us see how we will fire this event in the WPF way :D
Events
Ok adding an event could be done through 2 ways as I have done till now, either by creating an event for that button
and this will not be different from how you add events in the old way of dealing with the regular .NET
applications, but the new is the XAML way of adding an event so let’s add an attribute called click to our button we
have and assign a value of SayHello as below
<Button Margin="18,16,0,22" Background="Orange" Click="SayHello" Name="btnHelloWorld" HorizontalAlignment="Left" Width="75">Click Me!!</Button>
What we still have is to add a method that will say Hello Word, so lets switch to the code behind and add the
following method in it
public void SayHello(object sender, RoutedEventArgs e)
{
lblHello.Content = "Hello World";
}
Yes lblHello.Content not .Text, it taked me 5 minutes to explore the properties to add a text value to that Label,
anyways let’s now run the application we have now and see the end result
That’s the final result we will get after we run the application and click on the button,
In the end I know that this was a simple one but I wanted to share with you the first hello world I have created
using the WPF designer “Cider”
Enjoy your time with it ;)