WPF Page Hosted Windows Applications and XAML Browser Applications (XBAPs)

WPF Page Hosted Windows Applications and XAML Browser Applications (XBAPs)

In WPF, you can also make page based applications. These page based applications are of two types:

1. Pages Hosted in Windows Application

2. Stand-alone XAML Browser Application(XBAPs)

Lets try to understand these WPF Page based applications:

1. Pages Hosted in Windows Application

In this approach, you create your windows application and host some of the pages in that Windows application using NavigationWindow or Frame. This approach is generally used in WPF applications to integrate some kind of wizard in your application, to show some help contents and documentation.

Hosting Pages in Navigation Window

System.Windows.Controls.Page class is used as top level container instead of Windows. 

<Page...>

...

...

</Page>

But actually, there is one more top level container known as NavigationWindow (derives from Windows class) in which Page container is hosted. The NavigationWindow looks like an ordinary window aside from the backward and forward buttons that appear in the bar at the top. Page class is derived directly from FrameworkElement class. You can add a page to any WPF project. Just choose Project --> Add Page in visual studio.

Hosting Pages in other Window

You have to use Frame class to host your page inside other windows. You can use several frames in your window. You have to use the Source property of the Frame class to point to the page which you want to host.

<Window...>

  ....

  ....

  <Frame Source="Page2.xaml"></Frame>

  ....

  ....

</Window>

Hosting Pages in other Pages

You can also host your page into another page. Again you have to use Frames for this task. Just keep a frame container in other page where you want to host your page.

Ways to move from one page to another:

1. Forward and Back Button:

Set Page.ShowNavigationUI property set to true to show the forward and back button. By default, the property is set to true. There is also one more property called NavigationUIVisibility property which you can use to hide/show the Navigation buttons. By default its value is Automatic. But you can set it to Hidden or Visible as per your need.

2. Hyperlinks

Hyperlinks include NaviageUri property using which you can jump from one page to another.

Example: 

Navigating to other page: 

<Textblock>Click <Hyperlink NavigateUri="Page2.xaml">here</Hyperlink></TextBlock>

Fragment Navigation: Navigating to other page and at specific control on that: 

<Textblock>Click <Hyperlink NavigateUri="Page2.xaml#myTextBox">here</Hyperlink></TextBlock>

You will land on Page2.xaml and scroll up to the myTextBox control. But myTextBox control will not have any focus.

Navigating to websites:

<Textblock>Click <Hyperlink NavigateUri="http://theprofessionalspoint.blogspot.com">here</Hyperlink></TextBlock>

2. Stand-alone XAML Browser Application(XBAPs)

Page Based Applications run directly on IE or Firefox and you don't have to install this application. Just point your browser to correct location. This model is called XBAP. Client system must have .NET framework installed to run the XBAP application. The XBAP applications have limited permissions like XBAP applications cannot write files, cannot interact with system resources and registry, cannot connect to databases etc. But you can give permissions to XBAP applications when required.

To create XBAP application, you have to choose WPF Browser Application template in Visual Studio. After that if you see csproj file, you will find these four elements which point that it is a XBAP application:

<HostInBrowser>True</HostInBrowser>

<Install>False</Install>

<ApplicationExtension>.xbap</ApplicationExtension>

<TargetZone>Internet</TargetZone>

Related Article: To know the difference between Windows and Page Controls, visit my previous post.

Localization and Satellite Assemblies in WPF: How to support Localization in your WPF application?

Localization and Satellite Assemblies in WPF: How to support Localization in your WPF application?

In WPF applications, the unit of localization is the XAML file (technically, the compiled BAML resource that is embedded in your application). If you want to support three languages, you need to include three BAML resources. Satellite assemblies play an important role in localization of WPF applications. When you create a localized WPF application, you place each localized BAML resource in a separate satellite assembly.

To add localization support to your WPF application, just go to your .csproj file and add <UICulture>en-US</UICulture> under <PropertyGroup> element. Now Build your project and you will get a folder named en-US created where your exe is placed. 

If you go inside this folder, you will get an assembly with the same name as that of your exe but with different extensions. For example, if your application exe name is MySampleApplication.exe, its name would be MySampleApplication.resources.dll. This is called satellite assembly.

Now if you closely examine the size of your exe, it would be reduced because the BAML file is not embedded to it, but it is now contained in the satellite assembly which you just created.

When you run this application, the CLR automatically looks for satellite assemblies in the correct directory based on the computer's regional settings and loads the correct loacalized resource.

For example, if you are running in the fr-FR culture, the CLR will look for an fr-FR subdirectory and use the satellite assemblies it finds there.

Note: Extension for satellite assembly is .resources.dll.

How to localize your WPF application?

Step 1 (msbuild and Uid)

Add UID attribute to all the elements in your WPF application, you want to localize. You can use MSBUILD for adding the UID attribute to all elements used in your all the XAML files througout the application.

msbuild /t:updateuid MySampleApplication.csproj

Step 2 (LocBaml)

To extract the localizable content of all your elements, you need to use the LocBaml command-line tool. To extract the localizable details, you point LocBaml to your satellite assembly and use the /parse paramenter as shown here:

lcobaml /parse en-US\MySampleApplication.resources.dll

A .csv file will be generated named MySampleApplication.resources.csv

Step 3 (Build Satellite Assembly for other cultures e.g. fr-FR)

Again use locbaml tool with /generate parameter to create a satellite assembly with culture fr-FR.

locbaml /generate en-US\MySampleApplication.resources.dll

               /trans:MySampleApplication.resources.French.csv

       /cul:fr-FR /out:fr-FR

WPF Elements and Controls: Basic Concepts and Questions

WPF Elements and Controls: Basic Concepts and Questions

In this article, I have covered very basic concepts of WPF Elements and Controls in the form of questions and answers like the difference between elements, controls, content controls, headered content controls and layout containers, difference between tooltip and popup, difference between radiobutton and checkboxes, lexicon file etc. Last question illustrates the difference between resource files and content files in WPF (this question is out of the blog post title as these files are not WPF elements).

1. What is the difference between WPF Elements and WPF Controls?

There is a difference between WPF Elements and WPF Controls. All the WPF Controls are WPF Elements but vice-versa is not true. Any WPF element which can receive focus and accepts inputs from keyboard or mouse is called WPF Control.

For example: Textbox, Button are WPF Controls.

Exceptions: Tooltip and Label are also considered as WPF Controls because Tooltip appears and disappears depending on user's mouse movement. Similarly, Labels support mnemonics (shortcut keys), that's why Labels are also considered as WPF Controls.

Note: All the WPF Controls are derived from System.Windows.Control class.

2. What is the difference between WPF Controls and WPF Content Controls?

A WPF Content Control is the Control that can hold and display a piece of content.

For example: Button, RadioButton, CheckBox, Label, Tooltip, ScrollViewer, UserControl, Window etc.

Note: All the WPF Content Controls are derived from System.Windows.ContentControl Class.

3. What is the different between WPF Content Controls and Headered Content Controls?

Headered Content Controls are the Content Controls which have both content region and header region which can be used to display some sore of title.

For example: GroupBox, TabItem and Expander

Note: All the WPF Headered Content Controls are derived from HeaderedContentControl class.

4. What is the difference between WPF Content Controls and WPF Layout Containers?

WPF Content Controls can contain only a single nested element while layout containers can contain as many nested elements. You can also take a lot of elements in Content Controls but the condition is that all the elements should be wrapped in a single parent layout container like stackpanel or grid.

5. What is the difference between Label and Textblock in WPF?

Label and Textblock are used to display the content on the screen. The basic difference is that Label support mnemonics (shortcut keys) while Textblock does not. If you do not want shortcut features, you can simply use Textblock as it is lightweight and also supports text wrapping which label does not.

6. What is the different between RadioButton and CheckBox in WPF?

You can do grouping in RadioButton but not in CheckBoxes.

For example: If you place 3 radio buttons in a stack panel, all the radio buttons in that stack panel are grouped i,e you can select any one of them but that feature is not there in CheckBoxes.

Note: Button, RadioButton and CheckBox are derived from ButtonBase class. Further, RadioButton and CheckBox are derived from ToggleButton class.

7. What is the different between Tooltip and Popup in WPF?

There are many differences between WPF Tooltip and Popup:

A) You cannot put user interactive controls in Tooltip as it cannot accept focus but same is possible in Popup.

B) Tooltip is opened and closed automatically when mouse is hovered but Popup does not.

8. How will you get the list of all the fonts installed on your system in WPF?

I will use static SystemFontFamilies collection defined in the System.Windows.Media.Fonts class.

foreach (FontFamily fontFamily in Fonts.SystemFontFamilies)

{

  lstFonts.Items.Add(fontFamily.Source);

}

9. What is the lexicon file in WPF? What is its use?

Lexicon file with exetension .lex is used to create customize the dictionary which is used for spell checking feature in WPF. In your WPF application, when you enable spell checking feature, WPF uses its default dictionary to recognize the words. If you want to add some extra words to that dictionary, you will have to create a lexicon file and add your words there. WPF supports dictionaries in English, German, Spanish and French.

10. What is the difference between Resource Files and Content Files in WPF?

1. Resource files are embedded into the assembly (exe or dll) while content files do not embed with assembly.

2. Content files are used instead of resource files in following scenarios:

A) You want to change the resource file without recompiling the application.
B) The resource file is very large.
C) The resource file is optional and may not be deployed with the assembly.
B) The resource file is a sound file.

How to make a resource file? Just add a file (say any image file) and set its Build Action to Resource (which is by default) in Properties Window.

How to make a content file? Just add a file (say any image file) and set its Build Action to Content in Properties Window. Set Copy to Output Directory to Copy Always.

For example: Suppose you have added a .jpg file of 30KB to your application as a resource. After you Build your application, you will notice an increase of approximately 30KB size in your exe. But if you use same file as content, there will be no increase in the size of exe, but you will notice that same file will be copied in the exe directory.

Related articles: I have written two posts on commonly asked WPF questions and answers. If you are looking for something like that, you can visit Part 1 and Part 2.

WPF XAML: Property-Attribute and Property-Element Syntax for Simple and Complex Properties

WPF XAML: Property-Attribute and Property-Element Syntax for Simple and Complex Properties

Property-Attribute and Property-Element are the two approaches in WPF XAML to set the properties of the elements. I will take a very simple example to clear the concepts of both of the Property-Attribute and Property-Element approaches. Lets try to set the background property of the grid. I want to fill the background of the grid with some gradient color. Lets see how can we do this using XAML in WPF?

Suppose I have to set the background of the grid to Green. I will set it like this:

<Grid Name="MyGrid" Background="Green">

....

....

</Grid>

In the above case, I have used Property-Attribute syntax for setting the Background property. WPF has used default brush and painted the area with solid color. But what if you want to use some complex brush and want to paint the background with gradients instead of simple solid color? 

In this scenario, you will have to use Property-Element syntax defined in WPF XAML. Property-Element syntax is represented as ElementName.PropertyName. For example, you have to use Background property in this case as Grid.Background.

So, to introduce gradients in my example, I will have to use LinearGradientBrush instead of the default brush used by WPF for solid fill.

<Grid Name="MyGrid">

  <Grid.Background>

    <LinearGradientBrush>

     <LinearGradientBrush.GradientStops>

       <GradientStop Offset="0.00" Color="Red" />

<GradientStop Offset="0.50" Color="Indigo" />

<GradientStop Offset="1.00" Color="Violet" />

     </LinearGradientBrush.GradientStops>

</LinearGradientBrush>

  </Grid.Background>

</Grid>

In the above example, I have chosen different gradient colors (Red, Indigo and Violet) to paint the background of the Grid.

With this, I think I have cleared the concept of Property-Attribute and Property-Element syntax used in WPF XAML.

WPF XAML Namespaces, Prefixes and Conventions

WPF XAML Namespaces, Prefixes and Conventions

In WPF, XAML contains namespaces for defining controls for your XAML document. You can also map other .NET namespaces to XML namespaces and use them in XAML document. There are some conventions for using prefixes with these namespaces in XAML. Lets go point to point to explore everything about XAML namespaces, prefixes used with namespaces and conventions for using prefixes in XAML.

<Window x:Class="SampleApplication.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Title="MainWindow" Height="350" Width="525">

  <Grid>       

  </Grid>

</Window>

1. xmlns attribute is a specialized attribute in the world of XML that is reserved for declaring namespaces.

2. The above default XAML code contains two XAML namespaces. 

http://schemas.microsoft.com/winfx/2006/xaml/presentation contains all the WPF classes, including the controls you use to build your user interface. This namespace is declared without any prefix, so this is the default namespace for the entire XAML document. Every element in XAML document, is automatically placed in this namespace unless you specify otherwise.

http://schemas.microsoft.com/winfx/2006/xaml includes various XAML utility features. This namespace is mapped to the prefix "x". That means you can apply it by placing prefix "x" before the element name.

3. The above namespaces are not URI unlike in XML.

4. You can also include .NET namespaces like System in XAML for string manipulation. Syntax for including external namespaces in XAML is:

xmlns:Prefix="clr-namespace:Namespace;assembly=AssemblyName"

For example, you can include System namespace in XAML like this:

xmlns:sys="clr-namespace:System;assembly=mscorlib"

Now you can use sys in your XAML document like this:

<sys:DateTime>10/30/2014 5:30 PM<sys:DateTime>

Similarly you can include you custom namespace that you have created in your project like this:

xmlns:local="clr-namespace:MyWPFApplication"

5. Prefix Conventions: In the above examples, I have take x, sys and local prefixes for declaring namespaces. You can take any prefix of your choice, but you should not do it because WPF says to follow this convention for prefixes while declaring XAML namespaces.