Posted by: Zeeshan Amjad | August 13, 2009

Using XAML in VC++


Other than lots of tools available for C# and VB.Net for WPF programming, one of the biggest advantage is probably strong integration of XAML with C# and VB.Net. But we can do the same thing with VC++. In other words we can use XAML in VC++ and take the advantage of declarative programming while working in VC++. The only difference is here we are going to load the XAML file at run time. Let’s take a look at this by example. Here is a simple XAML file to just display one window, set its height, width and title.

  1: <Window
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="XAML in VC++" Height="400" Width="400">
  5: 
  6: </Window>
  7: 

Noticed that in this XAML file we are not using Class attribute, which is automatically generated by when creating XAML file from Visual Studio. We can load this XAML file at runtime by using XamlReader class. Here is a simple code to load this XAML file at run time and display one window.

  1:  #include <windows.h>
  2: using namespace System;
  3: using namespace System::Windows;
  4: using namespace System::Windows::Markup;
  5: using namespace System::IO;
  6: 
  7: [STAThread]
  8: int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
  9: 				   LPSTR lpCmd, int nCmd)
 10: {
 11: 	Window^ win = nullptr;
 12: 
 13: 	FileStream^ fs = gcnew FileStream("TestFile.xaml", FileMode::Open, FileAccess::Read);
 14: 
 15: 	win = (Window^)XamlReader::Load(fs);
 16: 
 17: 	fs->Close();
 18: 
 19: 	Application^ app = gcnew Application();
 20: 	app->Run(win);
 21: 
 22: }
 23: 

Here is the output of this program.

vcxaml_01

This is not limited to display only plan window. In fact we can do almost everything in this XAML file what we used to do in C# or VB.Net project with XAML file. Here is another simple XAML file to draw four elliptical command button.

  1: <Window
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="XAML in VC++" Height="400" Width="400">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>
 10: 
 11:         <Grid.ColumnDefinitions>
 12:             <ColumnDefinition/>
 13:             <ColumnDefinition/>
 14:         </Grid.ColumnDefinitions>
 15: 
 16:         <Button Margin="10" Content="Press Me" Name="btnBlue" Grid.Row="0" Grid.Column="0">
 17:             <Button.Template>
 18:                 <ControlTemplate TargetType="{x:Type Button}">
 19:                     <Grid Margin="10">
 20:                         <Ellipse Stroke="Blue" StrokeThickness="2">
 21:                             <Ellipse.Fill>
 22:                                 <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1">
 23:                                     <GradientStop Color="azure" Offset="0.1" />
 24:                                     <GradientStop Color="CornflowerBlue" Offset="1.1"/>
 25:                                 </RadialGradientBrush>
 26:                             </Ellipse.Fill>
 27:                         </Ellipse>
 28:                     </Grid>
 29:                 </ControlTemplate>
 30:             </Button.Template>
 31:         </Button>
 32: 
 33:         <Button Margin="10" Content="Press Me" Name="btnRed" Grid.Row="0" Grid.Column="1">
 34:             <Button.Template>
 35:                 <ControlTemplate TargetType="{x:Type Button}">
 36:                     <Grid Margin="10">
 37:                         <Ellipse Stroke="DarkRed" StrokeThickness="2">
 38:                             <Ellipse.Fill>
 39:                                 <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1">
 40:                                     <GradientStop Color="azure" Offset="0.1" />
 41:                                     <GradientStop Color="Red" Offset="1.1"/>
 42:                                 </RadialGradientBrush>
 43:                             </Ellipse.Fill>
 44:                         </Ellipse>
 45:                     </Grid>
 46:                 </ControlTemplate>
 47:             </Button.Template>
 48:         </Button>
 49: 
 50:         <Button Margin="10" Content="Press Me" Name="btnYellow"  Grid.Row="1" Grid.Column="0">
 51:             <Button.Template>
 52:                 <ControlTemplate TargetType="{x:Type Button}">
 53:                     <Grid Margin="10">
 54:                         <Ellipse Stroke="Brown" StrokeThickness="2">
 55:                             <Ellipse.Fill>
 56:                                 <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1">
 57:                                     <GradientStop Color="azure" Offset="0.1" />
 58:                                     <GradientStop Color="Yellow" Offset="1.1"/>
 59:                                 </RadialGradientBrush>
 60:                             </Ellipse.Fill>
 61:                         </Ellipse>
 62:                     </Grid>
 63:                 </ControlTemplate>
 64:             </Button.Template>
 65:         </Button>
 66: 
 67:         <Button Margin="10" Content="Press Me" Name="btnGreen" Grid.Row="1" Grid.Column="1">
 68:             <Button.Template>
 69:                 <ControlTemplate TargetType="{x:Type Button}">
 70:                     <Grid Margin="10">
 71:                         <Ellipse Stroke="Green" StrokeThickness="2">
 72:                             <Ellipse.Fill>
 73:                                 <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1">
 74:                                     <GradientStop Color="azure" Offset="0.1" />
 75:                                     <GradientStop Color="DarkGreen" Offset="1.1"/>
 76:                                 </RadialGradientBrush>
 77:                             </Ellipse.Fill>
 78:                         </Ellipse>
 79:                     </Grid>
 80:                 </ControlTemplate>
 81:             </Button.Template>
 82:         </Button>
 83:     </Grid>
 84: </Window>
 85: 

We this file is used with the same VC++ program we discussed above then its output will be like this.

vcxaml_02

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: