Previewing Navigation Pages In Silverlight 4

Introduction

In this article we will see how we can preview a page without actually navigating to it in Silverlight 4.

Create Silverlight Navigation Application

Fire up Visual Studio 2010, and select Silverlight Business Application Project from the templates. Name the solution as PreviewSample.

The template above will create two sample pages for you. Such as “Home” and “About Us”.

We would add a new page as “SlideShow.xaml”.

Let’s add some images to the page for a mock of slide show.

The following image displays the Slideshow.xaml page.

Now that our page is ready, let’s add the link to the Application. Open MainPage.xaml and add the link there as follows.

Now, we can test the application for the navigation purpose.

Now we will add two events such as MouseEnter and MouseLeave to the Hyperlink Buttons in MainPage.xaml.

As you see in above xaml display, Preview_On and Preview_Off are respective event handlers for MouseEnter and Mouse Leave.

We would create a Border and a Popup element to display the Preview.

Now in Preview_On event, we can write the following code.

As you see in the above code display, we are sending the position of mouse and the HyperlinkButtons’s NavigateUri property as a string to a method “CreatePreview”.

In CreatePreview method we create a Frame and add that to the Popup and display.

In the above code display, the Green blocked property is very much required otherwise you would not be able to see the mouse hovered link.

Let’s run the application and see how it would look.

That’s it. Worked fine, you can add some good designs for the preview. And for the user you can add a checkbox for preview on or off.

Hope this article helps.

Login and Logout Page Navigation In Silverlight 4

Introduction

In this article we will see how we can navigate to a default page when user logs out in Silverlight 4 navigation framework.

Create Silverlight Application

Fire up Visual Studio 2010, and select Silverlight Business Application Project from the templates. Name the solution as NavigationSample2.

Let’s talk about requirements; a particular link should not be visible if a user is not logged in and as soon as user logs out the link should not be visible. And the user would be navigated to the Home page if logged out.

The above requirement is pretty simple. To achieve this let’s add a page called EmployeePage.xaml to the View.

Now add the link of the EmployeePage to the MainPage.xaml.

As you see in the above xaml display, the visibility of the Hyperlink Button is made collapsed.

Now we would handle the LoggedIn and LoggedOut events of the RIA Authentication.

In MainPage.xaml.cs, we need to add the following in the constructor to achieve our requirement.

As you see in the above Constructor, we have handled the Visibility of the link button based on the Authentication.

If we run the application we can see the changes.

The above links are displayed when user hasn’t logged in.

The above links are displayed when user logs in.

Now we would do the second part of the requirement, which is if user logs out it would navigate to the Home Page.

As you can see in our requirement “EmployeePage” is the restricted Page and restricted Link and other links are public. So we would handle the LoggedOut event in EmployeePage’s constructor.

As you see in the above code, it’s very simple. We need to navigate to the required page when user logs out.

Hope this article helps.

Customize AutoCompleteBox In WPF

Introduction

In this article we will see how we can customize an AutoCompleteBox in WPF.

Creating A WPF Project

Fire up Visual Studio 2010, create a WPF Application, and name it as AutoCompleteSample2.

Sometimes we need to display more than one item in the auto complete box suggestion. For example state code with state names.

So we got two columns in the suggestion.

I was trying hard to customize it in Expression Blend, but turns out it was very simple.

Let’s have a class of Codes with the following properties.

Now let’s create a list of Codes and bind that to the AutoCompleteBox.

Now without customization, let’s run the application and see what we are getting as output.

So we are getting the Class name instead.

Now we can simply customize the Item Template of the AutoCompleteBox as follows:

As you see in the above code display, I have two textboxes which would bind to the respective properties of the ItemsSource.

Now let’s run the application again and see the output.

In the above figure, I have typed “a” but still it’s displaying all the states.

To achieve that we need to have the property called ValueMemberPath.

Set the value as the property you need to bind, in our case Name.

Now finally we can run the application for desired output.

Hope this article helps.

Interactive Menu Using ListBox In WPF

Introduction

In this article we will see how we can make use of a ListBox control to look like a menu.

Creating A WPF Project

Fire up Visual Studio 2010, create a WPF Application, and name it as ListBoxMenuSample.

First thing we need to add is a ListBox.

Then we would create a class which would have the following properties.

As you see in the above class, we have two Image Uri, this is because when we would mouse hover an item then the large image should be displayed.

We can achieve this by simply modifying the ListBoxItem template and the ItemsPanelTemplate.

Let’s start with the ListBoxItem customization.

Then we need to customize the ItemsPanelTemplate.

The above xaml code is for the customization of the ListBoxItem and ItemsPanelTemplate.

Before running the application let’s create some sample data.

Now run the application, and you can see the template is working fine.

Now, with the help of Trigger we can apply to the ControlTemplate and we can achieve the mouse over functionality.

Add the above Trigger for the ControlTemplate of the ListBoxItem. Remember the values are fully dependent on the image’s size. Such as if your image has some big padding then you need to reduce, otherwise you may not achieve your target requirement.

Now, let’s run the application once again and you would see the Mouse over effect.

Hope this article helps.

Change Theme Dynamically In Silverlight 4

Introduction

In this article we will see how we can change theme dynamically in Silverlight 4.

Create Silverlight Application

Fire up Visual Studio 2010, and select Silverlight Project from the templates. Name the solution as ChangeThemeSample.

We need to have System.Windows.Controls.Theming DLL reference, along with the references of the Theme DLLs.

The following figure shows the assemblies to refer for themes.

As you see we have chosen all themes, but it’s not necessary. You can take the required themes as per your requirement.

Now let’s create an User Control which will have the log in form.

We are not going to see any code behind for this User Control as it’s only a demo. So the design would look like the following.

Now, come back to MainPage.xaml, where we would place the user control along with the Combo Box to populate the Themes.

The following is the xaml code for the above design.

Now, let’s populate the themes into the Combo Box.

Let’s have class called MyThemes, which would have the following properties.

Generate the list of themes in a list and bind it to the ItemsSource of the Combo Box.

Now the important part, we need to handle the SelectionChanged event of the Combo Box to change the whenever the selection changed.

That’s it, we can now run the application.

As you see in the above display, all the themes are displayed.

After the selection the theme is changed.

This is only an example, how you can change the theme, you can use it more interactive way.

Hope this article helps.