Chaitanya Venneti

Metrofy – Responsive Metro Inspired HTML Template on ThemeForest

Chaitanya Venneti — Tue, 07 Aug 2012 16:05:11 +0000

Metrofy is my first item on ThemeForest, a responsive Metro inspired HTML Template.

Metrofy – Responsive Metro Inspired HTML Template on ThemeForest

Metrofy is specially designed based on the Metro Design Language.

This template was designed for creating portfolios, agency & consulting firm websites and corporate websites.

Metrofy comes with 3 different homepage sliders.

Slider with Tiles
Elastic Slider
Flex Slider

The Tiles Layout, the elastic and Flex sliders will help you present your content beautifully, be it your line of products or services or portfolio items.

This template contains 10 different pages with the following features.

Home page with 3 different sliders
Scrollable home page
Blog page with 2 layouts
Blog post with Video, Featured image or Slider
Filterable Portfolio
Portfolio Item with featured slider
CSS Pricing Table
Fully Responsive
960 Grid based
HTML5 & CSS3

Click here to buy this template from ThemeForest.

A WordPress version is under development and will be available soon.

Buy It Next: One stop shop for all your shopping lists

Chaitanya Venneti — Fri, 16 Mar 2012 05:29:29 +0000

Buy It Next is another Windows Phone app from me, for managing your Shopping Lists.

Features

Create and manage multiple shopping lists
Color coded lists for easy categorization
Intuitive Metro interface

Screenshots

Download

Buy It Next is now live in the Marketplace. Click here to download it.

Do it, Push it : My first Windows Phone app in the Marketplace

Chaitanya Venneti — Wed, 07 Mar 2012 15:43:06 +0000

My first Windows Phone application ‘Do it, Push it’ crossed 600+ downloads.

It’s a simple to-do list for Procrastinators.

Yes, Planning is a tedious task. So why not just list down things and in the end push the pending ones to tomorrow or future.

Use the link below to download the app from Windows Phone Marketplace.

Do it, Push it Features

A simple to do list, with optional task description.
If not today, push tasks to tomorrow.
Pending tasks will be automatically moved to tomorrow.
Prioritize and unprioritize tasks.
Move tasks between today and tomorrow.
Live tile support for reminding about important tasks.

For feedback and learning about future updates of the application, check http://apps.themetroguy.com/

Windows Phone UX: When & How to use Panorama Control

Chaitanya Venneti — Fri, 14 Oct 2011 13:45:10 +0000

Panorama or Panoramic Control often referred as a ‘hub’ is where you can represent the UI of the application on a lengthy horizontal canvas that extends beyond the device boundaries.

The scrollable UI of the Panorama allows for a unique visual experience associated with the overall feel of Windows Phone 7. And is often the entry point for many applications.

Which means you need to be more careful with the quality of your Panorama and the feel it leaves.

The best examples are always on the device. The People hub on the Start screen is implemented using a Panorama and so is the Music + Videos hub.

DOs and DON’Ts of using a Panorama

It is better to use the Panorama as an entry point providing access to deeper content, instead of making the Panorama itself the entire app.
Limit the maximum number of panes to 6. The magic number is 4, as recommended by Microsoft to ensure smooth application performance.
Maintain a good mix of content formats across the panes. For example, if all the panes need show lists, it is better to go for a Pivot instead of Panorama.
Never fill the Panorama with floating buttons.
Take care of the space between items. Make better use of typography.
Use images sparsely and make sure they are relevant and linked to the content.
Use backgrounds with caution. Make sure the text is readable. It is better to use a light textured pattern or a photograph if it’s relevant to the content.
Don’t fill the application with your branding (logos and other images). You may change the accent colors in the app to your brand colors and show your logo on the top left of the first pane.

Below are screenshots of some apps showcasing the best practices,

Thanks for reading. Please provide your thoughts and ideas on creating better designs using Panorama. In next post, we’ll cover best practices using Pivot and Tiles.

WP7 Databound Application – Pizza App User Interface Design

Chaitanya Venneti — Thu, 21 Jul 2011 16:17:49 +0000

Last week, in the introduction to a Windows Phone 7 Databound application, we saw how a databound application works and how to show a collection on the UI.

In this second part, we’ll see how to convert it in to a real world app.

Things we cover

Adding new pages
Wiring up events
Creating a custom panel, the secret behind the toppings selection screen

Before going further, let’s see what we are going to create. Below are the screen-shots of the completed application.

If you observe closely, the toppings selections screen (shown left side in the above image) shows the Pizza topped only with the selected toppings. We’ll cover it later in the tutorial, first let’s start with the ViewModel.

Updating the ViewModel

We create the pizza items with the following structure,

ItemName String The name of a crust item or a topping
ItemImage String Image path of a crust item or a topping
ItemDescription String Description of the item
IsSelected Boolean Indicating if the item is selected

Open the ItemViewModel.cs class file and replace the existing properties with the following properties,

    
private string _ItemName;
        public string ItemName 
        {
            get 
            {
                return _ItemName;
            }
            set 
            {
                _ItemName = value;
                NotifyPropertyChanged("ItemName");
            }
        }

        private string _ItemImage;
        public string ItemImage
        {
            get
            {
                return _ItemImage;
            }
            set
            {
                _ItemImage = value;
                NotifyPropertyChanged("ItemImage");
            }
        }

        private string _ItemDescription;        
        public string ItemDescription
        {
            get
            {
                return _ItemDescription;
            }
            set
            {
                _ItemDescription = value;
                NotifyPropertyChanged("ItemDescription");
            }
        }

        private bool _IsSelected;

        public bool IsSelected
        {
            get { return _IsSelected; }
            set
            {
                _IsSelected = value;
                NotifyPropertyChanged("IsSelected");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName) 
        {
            if (null != PropertyChanged) 
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Add sample data

Open MainViewModel.cs.

We will create two collection objects of type ItemViewModel for Crust Items and Toppings,

    
public ObservableCollection CrustItems { get; private set; }     
public ObservableCollection Toppings { get; private set; }

Now, instantiate the collections in the constructor,

    
this.CrustItems = new ObservableCollection();     
this.Toppings = new ObservableCollection();

Find the method LoadData and replace the method with the following code,

public void LoadData()
        {
            #region // Sample data; Crust Items
            
            //Sample data: Crusts
            this.CrustItems.Add(new ItemViewModel() { ItemName = "Handmade", ItemImage = "../Images/hand.png",
                ItemDescription = "Delicious and soft handmade crust"});
            this.CrustItems.Add(new ItemViewModel() { ItemName = "Natural", ItemImage = "../Images/natural.png", 
                ItemDescription = "Crust with selected natural dough" });
            this.CrustItems.Add(new ItemViewModel() { ItemName = "Pan Crust", ItemImage = "../Images/pan.png", 
                ItemDescription = "Traditional Italian Crust" });
            this.CrustItems.Add(new ItemViewModel() { ItemName = "Stuffed Crust", ItemImage = "../Images/stuffed.png", 
                ItemDescription = "Seasoned with garlic, stuffed with cheese" });
            this.CrustItems.Add(new ItemViewModel() { ItemName = "Thin N Crispy Crust", ItemImage = "../Images/thincrispy.png", 
                ItemDescription = "Bread dough with cracked crust" });
            
            // Sample data: Toppings
            this.Toppings.Add(new ItemViewModel() { ItemName = "Ham", ItemImage = "../Images/toppings/ham.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Grilled Chicken", ItemImage = "../Images/toppings/grilled_chicken.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Italian Sausage", ItemImage = "../Images/toppings/italian_sausage_crumbled.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Black Olives", ItemImage = "../Images/toppings/olives_black.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Green Olives", ItemImage = "../Images/toppings/olives_green.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Mushrooms", ItemImage = "../Images/toppings/mushrooms.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Pepperoni", ItemImage = "../Images/toppings/pepperoni.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "White Onions", ItemImage = "../Images/toppings/onions_white.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Red Onions", ItemImage = "../Images/toppings/onions_red.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Diced Tomatoes", ItemImage = "../Images/toppings/tomatoes_diced.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Roma Tomatoes", ItemImage = "../Images/toppings/tomatoes_roma.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Pineapple", ItemImage = "../Images/toppings/pineapple.png" });
            this.Toppings.Add(new ItemViewModel() { ItemName = "Jalapenos", ItemImage = "../Images/toppings/jalapenos.png" });
             
            #endregion
         
            this.IsDataLoaded = true;            
        }

Now we have our ViewModel ready, let’s create the UI.

Creating the Application Screens

Start Screen (MainPage.xaml)

Open MainPage.xaml.

Remove the ListBox named MainListBox and add a button,

In the event handler, add the below code to navigate to Crust Selection screen,

NavigationService.Navigate(new Uri("/CrustSelection.xaml", UriKind.Relative));

Crust Selection Screen (CrustSelection.xaml)

Right click on the project in ‘Solution Explorer’ and add a new ‘Windows Phone Portrait Page’ to the project. Name it ‘CrustSelection.xaml’.

Go to xaml view and replace the ContentPanel with the following code,

Let’s see what we have in the above code snippet,

It creates a Panorama control bound to the CrustItems collection. The ItemTemplate contains an Image with Source property bound to ItemImage property. The HeaderTemplate contains a TextBlock with the Text property bound to ItemName.

Below is the panorama in action,

Add the below line in the click event handler of the button cmdSelectCrust, to navigate to Toppings Selection screen when clicked.

NavigationService.Navigate(new Uri("/ToppingsSelections.xaml?selectedItem=" + crustList.SelectedIndex, UriKind.Relative));

Toppings Selection Screen (ToppingsSelection.xaml)

Add a new ‘Windows Phone Portrait Page’ to the project and name it ‘ToppingsSelection.xaml’.

Update the ContentPanel Grid as shown,

The image shown below explains the layout of ToppingsSelection.

In code-behind, override the OnNavigatedTo method and update the data context.

OnNavigatedTo is executed when ever user navigates to the page. We will read the selected crust value and selected toppings if any and update the UI.

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string selectedIndex = "";
            if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
            {
                index = int.Parse(selectedIndex);
                SelectedCrust.DataContext = App.ViewModel.CrustItems[index];
                UpdateExistingToppings();
            }
        }
private void UpdateExistingToppings()
        {
            lstSelectedToppings.ItemsSource = null;

            var selectedToppings = from p in App.ViewModel.Toppings
                                   where p.IsSelected
                                   select p;

            if (selectedToppings != null && selectedToppings.Count() > 0)
            {
                lstSelectedToppings.ItemsSource = selectedToppings;
            }
        }

When ever user changes the toppings selections, call the method UpdateExistingToppings, which updates the selected topping images on the right side.

Navigate to order review page when clicked on ‘Check Out’.

        private void cmdReviewOrder_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/OrderReview.xaml?selectedItem=" + index, UriKind.Relative));
        }

        private void CheckBox_Click(object sender, RoutedEventArgs e)
        {
            UpdateExistingToppings();
        }

Custom Panel

The selected toppings ItemsControl, uses a ‘CustomPanel’ as ItemsPanelTemplate, which shows the toppings layered over each other as we see on a real pizza.

For detailed information on Custom Panel check Silverlight Custom Panel blog post.

Order Review Page (OrderReview.xaml)

Add another ‘Windows Phone Portrait Page’ and name it ‘OrderReview.xaml’

Update the ContentPanel with the following code, which shows a simple form for user address input and user selections. Again we use the same Custom Panel for showing the toppings.

Similar to what we did in Toppings Selection screen, update the data context in the method OnNavigatedTo and process the order when clicked on ‘Place Order’.

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string selectedIndex = "";
            if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
            {
                int index = int.Parse(selectedIndex);
                SelectedCrust.DataContext = App.ViewModel.CrustItems[index];
                lstSelectedToppings.ItemsSource = lstSelectedToppingsImg.ItemsSource = null;
                lstSelectedToppings.ItemsSource = from p in App.ViewModel.Toppings
                                                  where p.IsSelected == true
                                                  select p.ItemName;
                lstSelectedToppingsImg.ItemsSource = from p in App.ViewModel.Toppings
                                                     where p.IsSelected == true
                                                     select p; 
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(txtName.Text.Trim()))
                MessageBox.Show("Name cannot be empty");
            else if (string.IsNullOrEmpty(txtAddress1.Text.Trim()))
                MessageBox.Show("Address line 1 cannot be empty");
            else if (string.IsNullOrEmpty(txtAddress2.Text.Trim()))
                MessageBox.Show("Address line 2 cannot be empty");
            else
                ProcessOrder();            
        }

        private void ProcessOrder()
        {
            Random rndConfirm = new Random(1000);
            MessageBox.Show("Thanks for placing the order. Your order confirmation number: " + rndConfirm.Next().ToString());
            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }

Conclusion

In Process Order, we generate a random order number, clear the selections and navigate back to the MainPage. Ideally, we should store the order number and send a e-mail confirmation.

In next post, we will see how to connect this to a OData service instead of hard-coded data.

Click here to download the source code.

Happy Coding!

Creating a Custom Panel in Silverlight

Chaitanya Venneti — Wed, 20 Jul 2011 15:16:12 +0000

Silverlight allows StackPanel and WrapPanel to be used as items panels in a ItemsPanelTemplate, for controls like ListBox where a collection of items are shown.

Sometimes we need to create a custom panel where the out-of-box panels may not full-fill the need. I came across one such situation where I need to show the items layered over one another.

It’s a Windows Phone 7 Pizza application, where user can choose the toppings, which are shown on top of a Pizza as if its a real one.

I used the following approach to show toppings on a pizza base.

Use an Image control to show the base.
Place an ItemsControl with images at Z-index as the Image Control.

The following is the xaml code,

Which resulted in the following output,

In ordered to layer the topping images on one another, we need to change the ItemsPanel from StackPanel to a CustomPanel which removes the spacing between the collection items.

Creating the Custom Panel

Create a new class derived from Panel.

    public class CustomPanel : Panel
    {
        public CustomPanel() : base()
        {

        }
    }

All that’s required is to,

Override the MeasureOverride method to influence the size of the child elements.
Override the ArrangeOverride method to influence the position of the child elements in the panel.

The following code shows MeasureOverride,

     protected override Size MeasureOverride(Size availableSize)
        {
            Size availableSpace = new Size(double.PositiveInfinity, double.PositiveInfinity);
            Size desiredSize = new Size(0, 0);

            foreach (UIElement child in this.Children)
            {
                child.Measure(availableSpace);
                desiredSize.Width = Math.Max(desiredSize.Height, child.DesiredSize.Width);
                desiredSize.Height = Math.Max(desiredSize.Height, child.DesiredSize.Height);
            }
            return desiredSize;
        }

The following code shows ArrangeOverride, where all the child items are given a starting point (0, 0), such that every element is positioned at the same place in the panel.

     protected override Size ArrangeOverride(Size finalSize)
        {
            Size returnSize = finalSize;
            //The location where the child will be displayed
            foreach (FrameworkElement child in Children)
            {
                Point location = new Point(0, 0);
                child.Arrange(new Rect(location, child.DesiredSize));

                returnSize.Width = Math.Max(returnSize.Height, child.DesiredSize.Width);
                returnSize.Height = Math.Max(returnSize.Height, child.DesiredSize.Height);
            }
            //Return the total size used
            return returnSize;
        }

Now let’s change the ItemsPanel to our Custom Panel,

And here is the output,

Introduction to WP7 Databound Application

Chaitanya Venneti — Mon, 11 Jul 2011 11:56:59 +0000

This tutorial is part of the WP7 Databound Application series.

Read Part II, Creating the Pizza App User Interface (Opens in a new window)

In this tutorial, We will see what a Windows Phone 7 databound application is and how to create one. Specifically, we will create a simple pizza ordering application using a Windows Phone 7 databound project.

What is a databound application?

A databound application generates an application in a Model/View/ViewModel (MVVM) style, with sample data exposed in ViewModel classes. It creates a master view and details view which were bound to respective view models.

Why should I use a databound application?

When you create a databound application, it creates the pages with properly hooked up navigation and basic data usage, this includes both design time and run time data. Which means, you can see how the page looks without the need to run the simulator.

All you have to do is focus on your application logic.

Create a New Project

Open Visual Studio. Go to File -> New -> Project.
Under ‘Installed Templates’, go to ‘Silverlight for Windows Phone’ and select ‘Windows Phone Databound Application’.

Windows Phone 7 Databound Application Template

Name the solution as ‘OrderPizza’ and Click ‘Ok’. This will create a windows phone databound application.

Notice in the ‘Solution Explorer’ that Visual Studio already created the Views, ViewModel and Sample data.

Solution Explorer

Now let’s hit ‘F5′, and see the application running.

The application loads with the ‘MainPage’ showing the items from the view model. Clicking on any item will load ‘DetailsPage’ showing the item’s details.

Now let’s inspect the xaml pages, MainPage.xaml and DetailsPage.xaml, to see how the items were loaded.

MainPage.xaml

MainPage.xaml contains a ListBox with the ItemsSource set to ‘Items’ property and each list item having two TextBlock controls bound the properties LineOne and LineTwo.

DetailsPage.xaml

DetailsPage.xaml shows the selected item name and items details in two TextBlock controls bound to the properties LineOne and LineThree.

The View Model

Let’s see what the view model contains and how the data is loaded in the views.
The MainViewModel.cs contains a list of items of type ItemViewModel.

public MainViewModel()
{
     this.Items = new ObservableCollection();
}

ItemViewModel contains three string properties namely LineOne, LineTwo and LineThree.

The method LoadData is where the dummy data is created.

public void LoadData()
        {
            // Sample data; replace with real data
            this.Items.Add(new ItemViewModel() { LineOne = "runtime one", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime two", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime three", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime four", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime five", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime six", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime seven", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime eight", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime nine", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime ten", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime eleven", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime twelve", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime thirteen", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime fourteen", LineTwo = "Dictumst eleifend facilisi faucibus", LineThree = "Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime fifteen", LineTwo = "Habitant inceptos interdum lobortis", LineThree = "Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat" });
            this.Items.Add(new ItemViewModel() { LineOne = "runtime sixteen", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum" });

            this.IsDataLoaded = true;
        }

The view model is created and loaded from App.xaml.cs as shown,

public static MainViewModel ViewModel
        {
            get
            {
                // Delay creation of the view model until necessary
                if (viewModel == null)
                    viewModel = new MainViewModel();

                return viewModel;
            }
        }
private void Application_Activated(object sender, ActivatedEventArgs e)
        {
            // Ensure that application state is restored appropriately
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

Conclusion

Now that you have understood how a databound application works, in next post we’ll see how to convert this into a real world Pizza Ordering application.

Read Part II, Creating the Pizza App User Interface.

Happy Coding!

http://www.chaitanyavenneti.com/topics/wp7-pizza-app-ui/

Windows Azure Storage Constraints

Chaitanya Venneti — Tue, 28 Jun 2011 13:01:20 +0000

Tables and Queues in Windows Azure play a vital role in storage.

The following are the constraints that need to be considered while using tables and queues in Azure,

Constraints on Data types

String – 64 kb max

Binary – 64 kb max

Constraints on Field/Row Size

Maximum number of fields – 255

Partition Key – Less than 1 kb

Row + Partition – Less than 256 char

Silverlight Tip: RadioButton/CheckBox Binding ClickMode

Chaitanya Venneti — Wed, 11 May 2011 18:42:28 +0000

No doubt that Binding in Silverlight is a powerful feature. There are few caveats when considering RadioButton or CheckBox like controls.
The following code snippet is a common scenario where a RadioButton or CheckBox can be used with data binding.

Let’s consider a situation where you want to show a list of options to choose from for the user. And whenever a selection is made, you want to perform a certain kind of actions.
In that case you may change the code something similar to,

And in the RadioButton’s Checked event handler you may want to do some kind of action based on the IsSelected value. Now if you try to read the value of IsSelected in the event handler, you’ll still see it as False.

This is because the value of the binding property will be updated only after completing the cycle of UnChecked and Checked events.
To make sure of the binding property is updated, you can use the property ClickMode, exists for both RadioButton and CheckBox.

ClickMode takes the following three values,

Now let’s Change the Xaml as follows,

Note that we have changed the event handler to Click from Checked and set the ClickMode to Release.

Now if you read IsSelected in the Click handler, you’ll get the exact value.

Hope this helps.

Silverlight Password Strength Checker – Part 1 of 3

Chaitanya Venneti — Wed, 15 Dec 2010 18:10:06 +0000

Introduction

In this 3 part series, we are going to learn how to create a custom control, the parts and states of custom control and skinning. We will create a simple password strength checker, which will tell how strong your password is. In part 1, we will see how to create a fully usable custom control.

Overview

A Custom Control is same as any other User Control except the fact that it comes with the power of editable Styles and Templates. For more details, see Control Customization on MSDN.

You Will Learn

What is a Silverlight Class Library
How to create a Custom Control using a Class Library
How to create properties that can be accessed both from Xaml and code-behind

Before going further, let’s have a look at what we are going to create.

Creating The Solution

1. Open Visual Studio and create a new Silverlight Application, name it SilverlightPasswordStrength.

2. In MainPage.xaml, add the following row definitions to the Grid,

3. Add a TextBlock to the first row,

4. And add a StackPanel with another TextBlock and a PasswordBox to the second row,

By now, your UI should look like this,

Creating The Custom Control

1. Add a new Silverlight Class Library to the solution, name it PasswordStrengthChecker.

2. Rename the Class1.cs to PasswordStrengthChecker.cs, and derive it from Control.

public class PasswordStrengthChecker : Control
{

//...

}

3. Right-click on the project and select add new folder. Name it Themes.

4. Right-click on the Themes folder and select ‘Add New Item’. Add a new Xml File and name it generic.xaml.

Now, your Solution Explorer should look like this,

A Custom Control requires a control class and the default control template. You can place the control class in any code file template in your Silverlight class library. The control template must be placed in a file named generic.xaml. If your class library contains multiple controls, all of their default templates must be placed in the same generic.xaml file.

Creating the Control Template

The generic.xaml file holds a resource dictionary with a style for each custom control. The style must set the Template property of the corresponding control to apply the default control template.

1. In the generic.xaml file, declare a resource dictionary and Map the project namespace to an XML namespace prefix, so you can access your custom control in your markup.

2. Inside the ResourceDictionary, define the style for the control.

3. For now let’s define a simple template with a Border and ContentControl.

ContentElement is our content holder where we will show the required information, in this case the password strength.

Defining The Properties

1. Go to PasswordStrengthChecker class and in the constructor set the DefaultStyleKey property.


public PasswordStrengthChecker()

{

DefaultStyleKey = typeof(PasswordStrengthChecker);

}

The DefaultStyleKey tells the control to pick up the default style from the generic.xaml file. DefaultStyleKey indicates the type that is used to look up the style.

2. The first property we need is the PasswordBox control for which we need to calculate the password strength. Add the following DependencyProperty, which can take a PasswordBox.


public static readonly DependencyProperty PasswordControlProperty =

	DependencyProperty.Register("PasswordControl", typeof(PasswordBox),

		typeof(PasswordStrengthChecker), null);

	public PasswordBox PasswordControl

{

	get		{			return (PasswordBox)base.GetValue(PasswordControlProperty);

	}

		set

	{

			base.SetValue(PasswordControlProperty, value);

	}

	}

3. Add another read-only property PasswordStrength, using which the calculated password strength can be read.

public static readonly DependencyProperty PasswordStrengthProperty =
DependencyProperty.Register("PasswordStrength", typeof(string),
typeof(PasswordStrengthChecker), new PropertyMetadata("Not Valid"));
public string PasswordStrength
{
get { return (string)base.GetValue(PasswordStrengthProperty); }
private set
{
base.SetValue(PasswordStrengthProperty, value);
NotifyPropertyChanged("PasswordStrength");
}
}

4. When the control is being initialized, the protected method OnApplyTemplate from the base Control class will be called. So, let’s override the OnApplyTemplate method to do our initialization activities.



  public override void OnApplyTemplate()
  {
       base.OnApplyTemplate();
       //Get the template item named 'ContentElement' and set default value
       (this.GetTemplateChild("ContentElement") as ContentPresenter).Content =
                                                              PasswordStrength;
      //If the PasswordBox Control is not null, wire-up the PasswordChanged event
      //where we will calculate the password strength
       if(PasswordControl != null)
       {
            PasswordControl.PasswordChanged += new RoutedEventHandler
                                              (PasswordControl_PasswordChanged);
       }
}

The GetTemplatedChild method is used to find an element from the template with specific name.

5. Write the following code, to calculate the password strength and update the content in the template with the calculated value.


Regex rgLowerCase = new Regex(@"[^a-z]");
Regex rgUpperCase = new Regex(@"[^A-Z]");
Regex rgNumeric = new Regex(@"[^0-9]");
Regex rgSpecialChar = new Regex(@"[/\|_!@#$%^&*()=+.-]");
private void CalculatePasswordStrength(string p)
{
string[] strengths = new string[6] {
                               "Very Weak",
                               "Weak",
                               "Better",
                               "Medium",
                               "Strong",
                               "Very Strong"};
    int strength = 0;
    if (p.Length > 8 )
    {
       strength++;
         if (rgLowerCase.IsMatch(p) && rgUpperCase.IsMatch(p))
            strength++;
            if (rgNumeric.IsMatch(p))
                 strength++;
                 if (rgSpecialChar.IsMatch(p))
                     strength++;
                  if (p.Length > 14)
                      strength++;
    }
      PasswordStrengthValue = strength * 20;
    PasswordStrength = strengths[strength];
      if (string.IsNullOrWhiteSpace(p))
        PasswordStrength = "Not Valid";
      //Set new strength value to the ContentElement
    (this.GetTemplateChild("ContentElement") as ContentPresenter).Content =
                                                           PasswordStrength;
   }

Using The Custom Control

Now our Custom Control is ready. Let’s go back to our SilverlightPasswordStrength project and see how we can use this.

1. Right-click on the project and select ‘Add Reference…’. Under Projects tab, select PasswordStrengthChecker.

2. In MainPage.xaml, add a new namespace declaration to access the Custom Control.


xmlns:tools="clr-namespace:PasswordStrengthChecker;assembly=PasswordStrengthChecker"

3. Create the Custom Control in the StackPanel and set the PasswordControl property,

As the PasswordControl property takes a PasswordBox control, I used Element Binding to provide the control. If you want to set the same property from the code-behind, it should be as follows,


pwdChecker.PasswordControl = pwdPassword;

Run the application and type something in the password box, to see how our custom control behaves.

Download:

SL_PasswordStrength (SourceCode)

Summary

In Part 1, we learned how to create and use a custom control. In next part, we will see how to add States and Template Parts to the custom control.

Thank you for reading, please share your thoughts and suggestions in the Comments section.