Wpf Tut 471mh

Note: Please here to view the features of this site. If you are new on this site then please click on button

<Box Height="23" HorizontalAlignment="Left" Margin="118,168,0,0" Name="Box1"VerticalAlignment="Top" Width="247" /> <Button Content="" Height="23" HorizontalAlignment="Left" Margin="11 8,211,0,0" Name="button1"VerticalAlignment="Top" Width="104" Click="button1_Cl ick" />

[email protected]

(Enum.GetName(typeof(Roles), Roles.Manager)), Project = Projects.FinanceDomain }); objEmployee.Add(new Employee() { ID = "M002", Name = "Vishal", Address = "Andheri", Gender = SexualCategory.Male, Email = " [email protected]", ProfilePic = profilePics[0], Designation = Roles.Manager,// or GetProjectType (Enum.GetName(typeof(Roles), Roles.Manager)), Project = Projects.HealthDomain }); objEmployee.Add(new Employee() { ID = "M003", Name = "Kanan", Address = "Dadar", Gender = SexualCategory.Male, Email = " [email protected]", ProfilePic = profilePics[0], Designation = Roles.Manager,// or GetProjectType (Enum.GetName(typeof(Roles), Roles.Manager)), Project = Projects.MedicalDomain }); for (int i = 0; i < ids.Length; i++) { if (i < 9) objEmployee.Add(new Employee() { ID = string.Concat("E00", ids[i]), Name = names[i], Address = adds[rnd.Next(0, adds.Length - 1)], Email = string.Concat(names[i], "@gmail.com"), Gender = ladyIndex.Contains(i) == true ? SexualCategory.Female : SexualCategory.Male, ProfilePic = ladyIndex.Contains(i) == true ? profilePics[1] : profilePics[0], Designation = GetProjectType (Enum.GetName(typeof(Roles), rnd.Next(1,Enum.GetValues(typeof(Roles)).Length))), Project = GetProjectType (Enum.GetName(typeof(Projects), rnd.Next(0,Enum.GetValues(typeof(Projects)).Length))) }); else objEmployee.Add(new Employee() { ID = string.Concat("E0", ids[i]),

Name = names[i], Address = adds[rnd.Next(0, adds.Length - 1)], Gender = ladyIndex.Contains(i) == true ? SexualCategory.Female : SexualCategory.Male, Email = string.Concat(names[i], "@gmail.com"), ProfilePic = ladyIndex.Contains(i) == true ? profilePics[1] : profilePics[0], Designation = GetProjectType (Enum.GetName(typeof(Roles), rnd.Next(1,Enum.GetValues(typeof(Roles)).Length))), Project = GetProjectType (Enum.GetName(typeof(Projects), rnd.Next(0,Enum.GetValues(typeof(Projects)).Length))) }); } return objEmployee; } /// <summary> /// This function returns the values of Enums (Projects And Roles). It is a Generic Function. /// /// Value of T can either be Projects or Roles /// <param name="enumValue">Enum Value /// Value of T. It may be Projects or Roles. private static T GetProjectType (string enumValue) { T str; int len = Enum.GetValues(typeof(T)).Length; str = (T)Enum.Parse(typeof(T), enumValue, true); return str; } } } WPF control Details.xaml <Control x:Class="WpfApplication3.Details" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" Height="270" Width="250" Loaded="Control_Loaded"Background="Bl anchedAlmond"> Details.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Collections.ObjectModel; namespace WpfApplication3 { /// <summary> /// Interaction logic for Details.xaml /// public partial class Details : Control { public Details() { InitializeComponent(); } private void Control_Loaded(object sender, RoutedEventArgs e) { } /// <summary> /// Processing the Record OF the Employee by dividing the value received as a parameter into column names and values /// /// <param name="str">String of colName and values separated by = and concatenate with | symbol. public void ProcessEmployeeDetails(string str) { string[] arr = str.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries); string[] colNames = arr.Select(x => x.Substring(0, x.IndexOf('='))).ToArray<string>(); string[] colValues = arr.Select(x => x.Substring(x.IndexOf('=') + 1)).ToArray<string>(); CreateRows(colNames, colValues); } /// <summary> /// This function will create rows at runtime based on the no of Column Names and Values. /// /// <param name="colNames">Column Names to be displayed on the Grid. /// <param name="colValues">Values to be displayed on the Grid.

private void CreateRows(string[] colNames, string[] colValues) { myGrid.Children.Clear(); for (int i = 0; i < colValues.Length; i++) { if (i == 0) { RowDefinition row = new RowDefinition(); row.Height = new GridLength(120); Image img = new Image(); img.Name = "profilePic"; img.Width = 100; img.Height = 100; img.SetValue(Grid.ColumnSpanProperty, 2); img.Source = new BitmapImage(new Uri(colValues[i], UriKind.Relative)); Grid.SetRow(img, i); Grid.SetColumn(img, 0); myGrid.Children.Add(img); myGrid.RowDefinitions.Add(row); } else { RowDefinition row = new RowDefinition(); row.Height = new GridLength(25); myGrid.RowDefinitions.Add(row); TextBlock tblHeaders = new TextBlock(); tblHeaders.Name = "tbl" + colNames[i]; tblHeaders.Text = colNames[i]; Grid.SetColumn(tblHeaders, 0); Grid.SetRow(tblHeaders, i); myGrid.Children.Add(tblHeaders); TextBlock tblValues = new TextBlock(); tblValues.Name = "tbl"; tblValues.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); tblValues.Text = colValues[i]; Grid.SetColumn(tblValues, 1); Grid.SetRow(tblValues, i); myGrid.Children.Add(tblValues); } } } } } MainWindow.xaml <Window x:Class="WpfApplication3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication3"

Title="MainWindow" Height="315" Width="475" Loaded="Window_Loaded">

MainWindow.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Collections.ObjectModel; using System.Reflection; namespace WpfApplication3 { /// <summary> /// Interaction logic for MainWindow.xaml /// public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private ObservableCollection<Employee> objEmployee = new ObservableCollection<Employee>(); private TreeViewItem[] itemProjects; private string[] projectHirearchy; private void Window_Loaded(object sender, RoutedEventArgs e)

{ objEmployee = Employee.GetAllEmployeeDetails(); LoadAllEmployeIDInTreeView(); } private void LoadAllEmployeIDInTreeView() { TreeViewItem item = null; MemberInfo[] Infos = typeof(Employee.Projects).Get(BindingFlags.Public |BindingFlags.Static); itemProjects = new TreeViewItem[Infos.Length]; projectHirearchy = new string[Infos.Length]; int counter = 0; foreach (MemberInfo mem in Infos) { itemProjects[counter] = new TreeViewItem(); itemProjects[counter].BorderThickness = new Thickness(5); itemProjects[counter].BorderBrush = Brushes.Honeydew; itemProjects[counter].Background = Brushes.LightSkyBlue; itemProjects[counter].Foreground = Brushes.Black; itemProjects[counter].FontFamily = new FontFamily("Times New Roman"); itemProjects[counter].FontSize = 15; itemProjects[counter].SetValue(TreeViewItem.FontWeightProperty, FontWeights.UltraBold); itemProjects[counter].Header = projectHirearchy[counter] = mem.Name; treeView1.Items.Add(itemProjects[counter]); counter++; } List displayRolesOrder = new List () { "Manager", "TechnicalLead","AssociateConsultant", "SoftwareDev" }; List displayProjectOrder = new List () { "FinanceDomain", "HealthDomain","MedicalDomain" }; var query = objEmployee.GroupBy ( grp => new { Role = grp.Designation.ToString(), Project = grp.Project.ToString(), EID = grp.ID }) .OrderBy(pro => displayRolesOrder.IndexOf(pro.Key.Project)) .ThenBy(des => displayRolesOrder.IndexOf(des.Key.Role)); foreach (var result in query) { item = new TreeViewItem(); item.Background = Brushes.LightBlue; item.BorderThickness = new Thickness(2);

item.BorderBrush = Brushes.LightGoldenrodYellow; item.Foreground = Brushes.Maroon; item.FontFamily = new FontFamily("Verdana"); item.FontSize = 12; item.Header = result.Key.EID.ToString(); AddToTreeView(item, result.Key.Project.ToString()); } } private void AddToTreeView(TreeViewItem treeitem, string projectName) { foreach (TreeViewItem item in itemProjects) { if (item.Header.Equals(projectName)) { item.Items.Add(treeitem); } } } private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs< object> e) { string record = ""; TreeViewItem item = (TreeViewItem)treeView1.SelectedItem; var query = from q in objEmployee where q.ID == item.Header.ToString() select q; foreach (var result in query) { record = "ProfilePic=" + result.ProfilePic + "|" + "ID=" + result.ID + "|" + "Name=" + result.Name + "|"+ "Email=" + result.Email + "|" + "Address=" + result.Address + "|" + "Gender=" + result.Gender + "|" + "Designation=" + result.Designation + "|"+ "Projects=" + result.Project; } detailsPane.ProcessEmployeeDetails(record); } } } The following is the output of it.

The Order of ID displayed is in the format of Manager, TechnicalLead, AssociateConsultant, SoftwareDev. Points to see in App 1. Sorting is done for displaying the ID in the format (Manager, TechnicalLead, AssociateConsultant, SoftwareDev). 2. Use Of Reflections And Enums 3. Use Of Generic Function. 4. Power Of LINQ Queries. 5. And for beginners how to dynamically add rows to the Grid control in WPF. Hope you all might have enjoyed the article and it may help you in your project. In case of any queries feel free to me.

Creating WPF window's on dedicated threads Creating Multi Threaded WPF Applications There can be certain scenario's when you're application has to perform some heavy U intensive tasks and is running on UI thread (your WPF application) could drastically pull down the performance of your application as UI related tasks in WPF could themselves be extensive, as WPF forces all the UI work being done on the thread that created the UI . And for a UI intensive application (for example, which shows a real time streaming of data) with high resource consumption, the cost of rendering the visual could prove too much for the single thread. This in turn could lead to freezing of your UI. If your application reaches to such a state it is always a better idea to create your resource intensive UI applications on dedicated threads, this article will give you an incremental approach to creating such an Application. Single Threaded Application in WPF: First create a WPF application in Visual Studio. Choose File->New->Project, then Visual C# -> WPF Application. Give appropriate name to the application and click "Ok" Add the following piece of code to window1.xaml.cs: using System.Windows; using System.Threading; namespace SingleThreadUI { /// <summary> /// Interaction logic for Window1.xaml /// public partial class Window1 : Window { public Window1() { InitializeComponent(); Thread _thread = Thread.CurrentThread; this.DataContext = new { ThreadID = _thread.ManagedThreadId }; } private void OnCreateNewWindow(object sender, RoutedEventArgs e) { Window1 w1 = new Window1(); w1.Show(); } } }

In the constructor of the window1 class we create the data context containing thread's ID which could be used to bind to a TextBox or Label in the UI. A click event handler is also there which is used to create new Windows. The Window.xaml should look like this: <Window x:Class="SingleThreadUI.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Stack> <Stack Orientation="Horizontal" Height="30"> <Button Click="OnCreateNewWindow" Content="New Window" Width="100" Margin="10"Height="25"/> When we click on the New Window button, it will create clones of the window and one could see the ThreadId remains same for all the windows.

Here we are still creating the Window clones, but we wrapped the window creation code in Click event Handler of the New Window button. Code for creating dedicated UI threads for each Window: For creating WPF window on dedicated threads, Change the OnCreateNewWindow event Handler as: private void OnCreateNewWindow(object sender, RoutedEventArgs e) { Thread thread = new Thread(() => { Window1 w = new Window1(); w.Show();

}); thread.SetApartmentState(ApartmentState.STA); thread.Start(); } Here the window creation code is exactly the same, except that we wrapped it in a thread delegate. If you notice that we have to explicitly set new thread's apartment state to STA, this is WPF requirement. Again, if you now click the "New Window", you could see that the application would crash, the reason is that our newly created thread is not enabled to WPF window infrastructure i.e. it does not provide for Windows pumping. To fix the above problem, WPF windows like other Windows rely on Windows message pump. In WPF we could do this by making use of Dispatcher class. For the main UI application WPF would take care of starting the dispatcher threads but for our own private UI thread, we have to explicitly start them. Lets see how we could do so: private void OnCreateNewWindow(object sender, RoutedEventArgs e) { Thread thread = new Thread(() => { Window1 w = new Window1(); w.Show(); System.Windows.Threading.Dispatcher.Run(); }); thread.SetApartmentState(ApartmentState.STA); thread.Start(); } This piece of code starts the message pump on it, now if you click the New Window button, you will get the fully functional window on a new thread. There is one more issue to be solved; closing a particular window does not terminate this window's thread dispatcher, so the thread keeps running even after closing the window, the process will not close. The solution to this is that mark the thread as background thread. The proper implementations will gracefully shutdown the dispatcher when no longer needed. private void OnCreateNewWindow(object sender, RoutedEventArgs e) { Thread thread = new Thread(() => { Window1 w = new Window1(); w.Show(); w.Closed += (sender1, e1) => w.Dispatcher.InvokeShutdown(); System.Windows.Threading.Dispatcher.Run();

}); thread.SetApartmentState(ApartmentState.STA); thread.IsBackground = true; thread.Start(); } The highlighted code shows the graceful exit of the window whenever it is closed and we have marked each thread to be run as a backgroubd thread. The code above completes the task of shutting down the dispatcher for window's UI thread.

Show Data in WPF DataGrid using DataSet data template This article will demonstrates how to show data in wpf datagrid using dataset data template. In visual studio 2010 datagrid works fine just as drag and drop from toolbox but in visual studio 2008 you need install wpf toolkit and add refrence to wpf toolkit assembly in your application. Make a new WPF application. First of all add a DataSet data template. Figure1.

Drag and drop database tables using server explorer. Figure2.

You can customise dataset also like write new query, make relation preview Data. Figure3.

Now time to work in window.xaml first of all you need to add namespace of wpf tollkit. xmlns:grid=http://schemas.microsoft.com/wpf/2008/toolkit

if you want see all all data use datagrid like this

And if you want show selected columns data then

Header="Customer ID" Width="auto" />

.CS code CustomerDataSet custometDataSet = new CustomerDataSet(); CustomerDataSetTableAdapters.CustomersTableAdapter customersTableAd apter =new CustomerDataSetTableAdapters.CustomersTableAdapter(); private void Window_Loaded(object sender, RoutedEventArgs e) { FillCustomers(); } private void FillCustomers() { customersTableAdapter.Fill(custometDataSet.Customers); this.DataContext = custometDataSet.Customers.DefaultView; } Now build your application. Figure4.

Database operations in WPF application Hi this is my PROJECT series which I posted on this site. My previously posted projects are in .NET 2.0 and web based too. Previously my posted projects are. 1. Social Networking web application example 2. MyCollegeMyFriend - An Open Source Project developed using ASP.NET 2.0 3. Building a Friends Networking Website 4. On-line Address Book in ASP.NET 2.0 So now I am going to post a project on School Management system which I developed in .NET 3.5 (WPF). It's a window based project. In this project an authorized person can Add, Delete, Update and view students and teachers records. I did all edit, delete, create, and read in this project. You can find database file in DATA folder inside application. My database file name is SMS (School Management System). To run this project just add this database and change connection string. I used here typed data set.

To run the application just add the database and change the connection string in App.config file like... Now I am going to show the working of my application. When you run the application there is a window, after you will redirect to main window of application from where you can do all operation which are available in my application like from menu item you can add student, view all student, add new teacher and view all teacher like..

Image 1. After the main window will open.

Image 2.

From the menu item you can select Student/ Teacher. With Student menu you can add new student.

Image 3.

You can view all student.

Image 4. Here by double clicking on any record you can delete or update the record.

Image 5.

If you select Teacher-> Add New Teacher

Image 6. Teacher -> All Teacher. You can delete and update by double clicking on any record.

Image 7.

Social Networking Website in ASP.NET - Open Source Project

This is an open source project named as RNetworking. In this project I am showing a social networking web site functionality. In this you can make your profile, search other profiles by name, manage friend network by sending friend request, you can also chat with other s. I made this application in .NET 3.5 and my database is in SQL Server 2008. I have my database in application folder App_data. To run this application just attach this database on your machine and change the connection string in App_Code > DataBaseClass.cs. This is my database layer class. Now when you run the application, the first time the page will show. If you have already ed with the site, then enter your Email id and and the application will redirect to your profile page. And if you don't have an then click on Not ed Yet ?. This will redirect you to registration page. You can use: [email protected] rahul This is the page.

Image 1. Below is the registration page.

Image 2. This is detail page.

Image 3. From the top of the page you can search . This is search result page.

Image 4.

By clicking on image you will be redirected to your profile. You can send friend requests to any from his profile page and you can chat with this . The page will look like this:

Image 5. The profile page will look like below when friend request is sent to any .

Image 6. From here can accept friend request and deny friend request. If accepts request then this will show in right side in friend section.

Image 7.

Move Up/Down ListBoxItem in ListBox in WPF Introduction In this article we will see how we can move up/down a ListBoxItem in ListBox. Creating A WPF Project Fire up Visual Studio 2008, create a WPF Application, and name it as ListBoxMoveUpDown.

In some project, the requirement is like we have move up and down the position of the item in ListBox. So let's achieve it. Here's the idea let's have a Request Workflow. First of all we need a ListBox and two buttons saying Move Up and Move Down.

Now let's have sample data that we would bind to the ListBox.

The above class is the structure of a Workflow. Instead of Rank you can use the term Priority. Now we need a SortableObservableCollection that can Sort Ranks based on the changes, we will make.

Above code display is for displaying the SortableObservableCollection. Now how to use SortableObservableCollection for Sorting an ObservableCollection, follow below code:

Now we will customize the DataTemplate of the ItemTemplate of the ListBox for better display. The following XAML for your reference:

Now we will run our application and see the sample data being loaded to the ListBox.

Now we will do Move Up functionality. Move Up

Here is the explanation what we have done in above code display. First we are checking whether any item is selected in the ListBox and if yes then we are casting the SelectedItem of the ListBox to Workflow(our class type). Then we are again checking if the Rank of the selected Workflow is not equal to 1. If it is not then we would swap the rank with the previous item. And after that we do the sorting of the SortableObservableCollection. Move Down

Moving down the ListBoxItem is similar to Move Up implementation. The only changes are: To check the ListBoxItem as the Last Item we need to take the ListBox.Items.Count property. And we exchange to the next item present in the ListBox. That's it, we would run the application to see the functionalities achieved.

As you see in above image, we have Format System is the 4th Workflow step, which is not correct! It should be the 2nd and then System Engineer can Install Software 1 and 2. So we would move Format System to 2 rank up.

And it's done. Similarly Move down button would work. Hope this article helps.

An Open Source Project - R-Bank Management System This is an open source WPF project based on the working of a BANK. My project name is R-Bank Management System. The bank management system is an application for maintaining a person's in a bank . This project build in VS2010 and SqlServer2008.

In this project I tried to show the working of a bank. Here in my project there are 2 types of s. One is and other one is Simple . To access this project there is an authorization process. If you as an then you will be redirected to the Home Page and if you are a simple you will be redirected to your Home Page. A simple can access their and can deposit/withdraw money from their . can also transfer money from their to any other bank . can see their transaction report too. The other is . This performs the following functions: Create Individual s Manage existing s View daily transactions etc. I have ed Project Source Code and database inside DATA folder. This project is made in WPF (VS2010) and I used SqlServer 2008 database to handle the daily transactions, management and management. In this project I used typed dataset. So to run this project just attach the database which is in DATA folder and change the connection string here. Change Data Source here.

Image 1. This is the DFD for this project.

Image 2. Open Properties-> Settings.settings change DataSource here. When you run this application then first time screen appears like...

Image 3. Here can be by a simple or by a , these ID and owrd [email protected] rahul are of a so after with these credentials will redirect to Home Page like..

Image 4. Here we can see that an has the options... 1. New - To Crete New 2. Credit - To credit any 3. Debit - To Debit any 4. All Transaction - TO check transaction in bank 5. Balance Enquiry - Can check balance in any 6. Delete - TO delete or close any Option This is New page.

Image 5. I gave an option to to debit and credit any . This is debit form.

Image 6. This is credit form...

Image 7. can see all transaction happen in bank by using this form...

Image 8. can check balance by selecting from drop down list by using this form...

Image 9.

If there is any request to close an then can do that by using this form...

Image 10.

If you as a simple then.. Id- [email protected] pwd - arjun

Image 11.

Here we can see a has the options... 1. Summary 2. Cash Deposit 3. Cash Withdraw 4. Transaction 5. Balance Enquiry

- Statement - To credit - To Debit - To transfer money from his/her to any other - To check balance in

This is an Summary page...

Image 12. By using this page can deposit money...

Image 13. With this page can withdraw money...

Image 14. With this page can transfer money to any ...

Image 15.

Here can check balance in his/her ...

Image 16. I tried to cover the basic functionality of a bank management system, but I know I did not do the complete functionality, but I think this can be a good application to understand WPF. In the future I will try to improve this project. If any has any suggestion then please mail me here...

Snake Game Application in C# First of all, I'm not a designer, animator, graphical artist, or a sound effects artist. I'm only a programmer. I guess, you may know that completion of a game project is an effort of all these parties requiring a considerable duration of time. So sorry about my graphics work (I'm not a good graphic designer at all). One thing I need to tell you is that I have wondered about the logic and the graphics interaction necessary for this little game. I initially thought that would be easy, but believe me, it was not so easy! When you look at the class diagram of the game, you may notice that most of my functionality related to the game is coupled with the "frmSnake" class together with the graphics work itself. In other words this was not a good object oriented design. There are food, ground classes etc. but there is no Snake class. Like so. Actually this is because I feel it is a more flexible function oriented programming here. Someone could argue I was wrong, but that's what I felt.

I did not explain all the source code in this article because it might make the article longer. Anyway I have added the comments in the source code for the locations where I thought it would be confusing. Other than that the average C# developer will be able to understand it. Here I do not make a complete snake game for you to enjoy, if you want that then there are millions in the internet. I just made this for fun and am providing this to whatever developers would like to deal with it! The important thing is that I wanted to play my own version of the snake game. So I just developed it; that's all. Anyone can improve it and make it better.

Display Multiple Columns Into ComboBox From Database Table in C# Introduction In this article I explain how to bind multiple column values into a ComboBox. It is very simple but I have often bound a single column in a ComboBox so it was a bit of a curiosity for me.

Use the following procedure to bind to a combo box. Step 1 Open a Windows Forms application and insert a ComboBox and a button control on the form from the toolbox. Step 2 Now write the simple C# code to bind the ComboBox with multiple columns. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; namespace insert_image_in_database { public partial class Form5 : Form { public Form5() { InitializeComponent(); } SqlCommand cmd; SqlConnection con; SqlDataAdapter da; DataSet ds; private void button1_Click(object sender, EventArgs e) { con = new SqlConnection("Data Source=MCNDESKTOP03;Initial Catalog=pulkit; ID=sa;=wintellect@123"); cmd =new SqlCommand ("select * from emp", con); da = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { comboBox1.Items.Add(ds.Tables[0].Rows[i][0] + " " + ds.Tables[0].Rows[i][1] + " " + ds.Tables[0].Rows[i][2]); } } } } Step 3

Now run your application and click on the button then see the ComboBox filled with multiple column values.

Report Viewer in WPF In the following article I am going to share my experience of using ReportViewer Control with WPF. First of all let's have a small discussion on ReportViewer Control. ReportViewer ReportViewer is a freely redistributable control that enables embedding reports in applications developed using the .NET Framework. We can easily design the reports with drag-n-drop simply using Report Designer included in Visual Studio 2010.

The benefits that are offered by ReportViewer Control:

1. The reporting engine built into ReportViewer can perform operations such as

filtering, sorting, grouping and aggregation. And hence processes data efficiently

2. To present data it s a variety of ways. So that the data can be present as lists, tables, charts and matrices (also known as crosstabs.)

3. It adds visual appeal. This means we can specify fonts, colors, border styles, background images etc. to make our report visually appealing.

4. Enables interactivity in reports. We can have collapsible sections, document map, bookmarks, interactive sorting etc. in our report.

5. Conditional formatting is also ed by report viewer. We can embed

expressions in the report to change display style dynamically based on data values.

6. s printing and print preview. 7. s export to Excel, Word and PDF formats.

Generally we follow the usage of the Report Viewer in Windows Form programs. But here we are going to use this in WPF application. Step by step creation of report using ReportViewer Control in WPF application 1. Very first step is to open a new project of WPF Application project type and name it to"ReportViewerWPF".

2. Secondly, click on the Toolbox, and drag a "WindowsFormsHost" control onto the design surface for MainWindow.xaml. This also adds the assemblies that are needed by WindowsFormstHost to our project.

Code <WindowsFormsHost Height="100" Width="100" Name="windowsFormsHost1"/> 3. Now, in Solution Explorer, right-click on the project and select Add Reference.

4. In the .NET tab of the Add Reference dialog log, select the Microsoft.ReportViewer.WinForms assembly, and click OK. After adding successfully it shows in the solution explorer pane under the head "Refrences".

5. Also add the highlighted lines to your code: <Window x:Class="ReportViewerWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:rv="clr-namespace:Microsoft.Reporting.WinForms; assembly=Microsoft.ReportViewer.WinForms" Title="MainWindow" Height="300" Width="400">

<WindowsFormsHost Name="windowsFormsHost1"> This creates an instance of ReportViewer named _reportViewer in the XAML page. 6. Now let's create an RDLC report that you will display in the ReportViewer control. And for this, In Solution Explorer, right-click your project, point to Add, and select New Item.

7. In the Add New Item dialog box, select Report Wizard which is in Reporting template, and click Add. This will open the Report Wizard with the Data Source Configuration Wizard like this:

8. In the Data Source Configuration Wizard, select your Database and click Next, then again select Dataset, and click Next.

9. After clicking on Next, Choose Your Data Connection page will be open, click New Connection. If you see the Choose Data Source dialog box, select Microsoft SQL Server and click Continue.

10. In the Server name box, type the server name that hosts your database that you are going to select, as I have used the localhost and for this I have to log on to my server and in "Select or enter a database" name, select the database which you are going to use, and test your connection before clicking OK.

11. Click Next button twice, so that the page "Choose your Database Objects" will be opened . 12. In the Choose Your Database Objects page, expand the Tables node, select the

checkbox for the table for which you want to create a report, and click Finish.

13. A DataSet object called YourDatabaseNameDataSet is now created in your project.

14. In the Report Wizard, click Next. 15. In the Arrange Fields page, drag all the available fields and drop to the Values pane. This creates a simple tabular table for displaying the sample data. Then, click Next two times and lastly click on Finish to close the Report Wizard.

16. Now your window of report.rdlc will look like as under:

17. Next, it's time to add the code to point ReportViewer to the new report that we have created and also to add data from "YourDatabaseNameDataSet" to ReportViewer. 18. Open MainWindow.xaml.cs, and add the following lines: MainWindow.xaml.cs: namespace ReportViewerWPF

{ public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); _reportViewer.Load += ReportViewer_Load; } private bool _isReportViewerLoaded; private void ReportViewer_Load(object sender, EventArgs e) { if (!_isReportViewerLoaded) { Microsoft.Reporting.WinForms.ReportDataSource reportDataSource1 = new Microsoft.Reporting.WinForms.ReportDataSource(); WpfApplication4DataSet dataset = new WpfApplication4DataSet(); dataset.BeginInit(); reportDataSource1.Name = "DataSet1"; //Name of the report dataset in our .RDLC file reportDataSource1.Value = dataset.s; this._reportViewer.LocalReport.DataSources.Add(reportDataSource1); this._reportViewer.LocalReport.ReportPath = "../../Report.rdlc"; dataset.EndInit(); //fill data into WpfApplication4DataSet WpfApplication4DataSetTableAdapters.sTableAdapter sTableAdapter = new WpfApplication4DataSetTableAdapters.sTableAdapter(); sTableAdapter.ClearBeforeFill = true; sTableAdapter.Fill(dataset.s); _reportViewer.RefreshReport(); _isReportViewerLoaded = true; } } } }

How To Use Automatic Completion in a WPF Application In this article we will see how you can use automatic completion of a TextBox and a ListBox.

For that I have used one TextBox, one ListBox & one DataGrid. When I start typing into the text box it will automatically display related names into the listbox & from that listbox when you click a particular name then the related data will display in the DataGrid. For the concept of automatic completion you just write one query using "like" keyword. Code looks like below: lbAutoComplete.Items.Clear(); try { conn.Open(); SqlCommand comm = new SqlCommand("SELECT StudName FROM Student WHERE StudName like '" + txtAutoComplete.Text + "%'", conn); dr = comm.ExecuteReader(); while (dr.Read()) { lbAutoComplete.Items.Add(dr.GetValue(0).ToString()); } } catch (Exception ex) { MessageBox.Show(ex.Message.ToString()); } finally { conn.Close(); } In the above code first we must clear our listbox every time because otherwise the data will be appended into the listbox causing duplicate data in it. After that looking the query in that I used like keyword & after that whatever character is written into the textbox it will find the names from the table that start with those characters. Here "%" is the wildcard character and by using it you will the get number of characters after or before your given character. See images below for a clearer understanding: Display names that start with "a"...

Display names that start with "ak"...

Display names that start with "aksh"...

Display names that start with "ash"...

After that when the selects the name from the ListBox it will automatically display that record into the DataGrid. See below Image :

Main Code : using using using using using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Navigation; System.Windows.Shapes; System.Data.SqlClient; System.Data;

namespace WPFAutoComplete { /// <summary> /// Interaction logic for MainWindow.xaml /// public partial class MainWindow : Window

{ SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\MyDatabase.mdf;Integrated Security=True; Instance=True"); SqlDataReader dr; public MainWindow() { InitializeComponent(); } private void txtAutoComplete_TextChanged(object sender, TextChangedEventArgs e) { lbAutoComplete.Items.Clear(); try { conn.Open(); SqlCommand comm = new SqlCommand("SELECT StudName FROM Student WHERE StudName like '" + txtAutoComplete.Text + "%'", conn); dr = comm.ExecuteReader(); while (dr.Read()) { lbAutoComplete.Items.Add(dr.GetValue(0).ToString()); } } catch (Exception ex) { MessageBox.Show(ex.Message.ToString()); } finally { conn.Close(); } } private void lbAutoComplete_SelectionChanged(object sender, SelectionChangedEv entArgs e) { try { conn.Open(); SqlCommand comm = new SqlCommand("SELECT * FROM Student Where StudName='"+ lbAutoComplete.SelectedItem.ToString() + "'", conn); DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(comm); da.Fill(ds); MyDataGrid.ItemsSource = ds.Tables[0].DefaultView; } catch (Exception ex) { MessageBox.Show(ex.Message.ToString()); } finally { conn.Close(); } }

} }

Building a Simple Vedio Player in WPF Introduction Windows Presentation Foundation (WPF) provides for multimedia, vector graphics and animation, making it easy for developers to build applications that are interesting and that have simple interfaces. Using Microsoft Visual Studio, you can create graphics or complex animations and integrate media into your WPF applications. In this article we will use a MediaElement in WPF application to run a vedio. A core feature of the graphics capabilities of WPF is to provide native for working with multimedia, which includes video and audio. The following article shows how to insert a media player into an application. MediaElement is a UIElement that is ed by the Layout System and can be consumed as the content of many controls. It is also usable in Extensible Application Markup Language (XAML). Step 1: Open Visual Studio.     

Select new -> project Select your preferred language Select a WPF application Name the project

Now name of project is "WpfMediaElement"

Step 2 : Open the Toolbox of WPF application.   

Drag & Drop MediaElement control on design view. Add a vedio file with (.wmv) extension in project. put name of the vedio file in source property of MediaElement.

Step 3 : Set some formatting on the MediaElement control tag in the XAML page. Code

<MediaElement Name="myMedia" Source="Wildlife.wmv" LoadedBehavior="Manual" Width="320" Height="240" /> Step 4 : Add three button control for Play, Mute and Pause actions in XAML page. Code

<Button Content="Play" Margin="0,0,10,0" Padding="5" Click="mediaPlay" /> <Button Content="Pause" Margin="0,0,10,0" Padding="5" Click="mediaPause" /> <Button x:Name="muteButt" Content="Mute" Padding="5" Click="mediaMute" /> Step 5 : Now, the final source code of the XAML page is given below: Code

<Window x:Class="WpfMediaElement.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"> <Stack HorizontalAlignment="Center" VerticalAlignment="Center"> <MediaElement Name="myMedia" Source="Wildlife.wmv" LoadedBehavior="Manual" Width="320" Height="240" /> <Stack Orientation="Horizontal" Margin="0,10,0,0"> <Button Content="Play" Margin="0,0,10,0" Padding="5" Click="mediaPlay" /> <Button Content="Pause" Margin="0,0,10,0" Padding="5" Click="mediaPause" /> <Button x:Name="muteButt" Content="Mute" Padding="5" Click="mediaMute" /> Step 6 : Now, we will go for code behind file MainWindow.xaml.cs file where we will create logic for the Click events for the Play, Pause and Mute buttons. Code

using using using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Navigation; System.Windows.Shapes;

namespace WpfMediaElement { /// <summary> /// Interaction logic for MainWindow.xaml /// public partial class MainWindow : Window

{ public MainWindow() { InitializeComponent(); InitializeComponent(); myMedia.Volume = 100; myMedia.Play(); } void mediaPlay(Object sender, EventArgs e) { myMedia.Play(); } void mediaPause(Object sender, EventArgs e) { myMedia.Pause(); } void mediaMute(Object sender, EventArgs e) { if (myMedia.Volume == 100) { myMedia.Volume = 0; muteButt.Content = "Listen"; } else { myMedia.Volume = 100; muteButt.Content = "Mute"; } } } } Output

Resources 

Creating simple media player in Expression Blend



Subtitles Algorithm

  

Media Player in WPF Simple MP3 Player Using Windows Media Player COM in WPF

AutoCompleteTextBox in WPF In this article I am going to show AutoCompleteTextBox in WPF. AutoCompleteTextBox mean when we type something to search in a textbox to get a small list of valid search results that match the search string entered so far. In this article I am using Linq to Sql also. I have saved my DataBase inside DATA folder. To run the application just add this database and change connection string from setting inside properties folder. See in this image.

Image 1. Just change here DataSource according to you server name. This is my DataTable from which records are coming.

Image 2. This is my XAML code. <Window x:Class="AutoCompleteTextBoxInWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="350"> When we run the application and want to search name which start with "R".

Image 3. If we type character "E", then the textbox will show all names starting with this character.

Image 4.

Emailing With WPF Application

  

Send Emails With Attachment in ASP.NET Gridview Edit Delete and Update in ASP.NET Post on Facebook s Wall Using ASP.Net C#

ARTICLE Emailing With WPF Application Posted by Shubham Srivastava in Articles | WPF on February 08, 2012 Tags: Emailing in .Net, Emailing with WPF, Windows Emailing, WPF, WPF tutorials Emailing is the one of the feature of .Net Framework. Previously Emailing is not possible in windows application instead of web application. But now .Net tools Visual studio 2010 contain two type of WPF application, one of them is ed browser based application.    

inShare



4771

 1 

   

   

0

  

Reader Level:

Introduction Emailing is one of many features of the .Net Framework. Previously Emailing was not possible in Windows applications instead of web applications. But now in .Net tools Visual studio 2010 contains two types of WPFapplication, one of them is a ed browser based application. So now we are able to do emailing in a Windows application. First of all we have to import the namespace System.Net.Mail to run this application the proper way. To create this application we will use three classes MailMessage, System.Net.NetworkCredential, SmtpClient class. Step 1: Open Visual Studio.     

Select new -> project Select your preferred language Select a WPF application Name the project Now name of project is "WpfEmailing"

Step 2 : Open the Toolbox of WPF application.   

Drag & Drop four Label control on design view. Drag & Drop four TextBox control on design view. Drag & Drop a Button control on design view.

Step 3 : Now, the final source code of the XAML page is given below: Code

<Page x:Class="WpfEmailing.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="Page1"> <Button Content="Send" Height="23" HorizontalAlignment="Left" Margin= "181,256,0,0"Name="button1" VerticalAlignment="Top" Width="75" Click="butt on1_Click" /> Step 4 : Now, the send button click code is in the Page1.xaml.cs file. Code

private void button1_Click(object sender, RoutedEventArgs e) { MailMessage mail = new MailMessage(textBox1.Text, textBox2.Text, textBox3.Text, textBox4.Text); System.Net.NetworkCredential auth = newSystem.Net.NetworkCredential("mailto: [email protected]%22,%20%22srivastav a1987, "srivastava1987");

SmtpClient client = new SmtpClient("gmail.com", 587); client.EnableSsl = false; client.UseDefaultCredentials = false; mail.IsBodyHtml = true; client.Credentials = auth; client.Send(mail); } Step 5 : Now, the final source code in Page1.xaml.cs file.

Code using using using using using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Navigation; System.Windows.Shapes; System.Xml; System.Net.Mail;

namespace WpfEmailing { /// <summary> /// Interaction logic for Page1.xaml /// public partial class Page1 : Page { public Page1() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) {

MailMessage mail = new MailMessage(textBox1.Text, textBox2.Text, textBox3.Text, textBox4.Text); System.Net.NetworkCredential auth = newSystem.Net.NetworkCredential("mailto: [email protected]%22,%20%22srivastav a1987, "srivastava1987"); SmtpClient client = new SmtpClient("gmail.com", 587); client.EnableSsl = false; client.UseDefaultCredentials = false; mail.IsBodyHtml = true; client.Credentials = auth; client.Send(mail); } } } Output

Resources     

Zipping and Emailing Project - Using DotNetZip WPF Calculator Chapter 2: Programming WPF Applications Two way Binding in WPF Host a WPF control in a windows application

A Project Report In WPF (R-Office Management System)

This is a small office management system. With the help of this project all office employee can connect with each other, request online leave, get birthday reminders, get status of present/absent employees and use an automatic attendence system when logged in and logged out. Just need to install and setup of this project to every machine. In this project there are 2 types of s one is Employee of a office and other is . An has full access for this project. I am showing every right of both types of in the following DFD.

Image 1. I made this project in Visual Studio 2010 and SqlServer2008. The database is located in the DATA folder of the Application. Just attach the data and change connection string in app.config.

Image 2.

When we run the application then first the window will appear

Image 3. Here 2 types of can ; one is and the other is Employee. Here I with Id â€“ [email protected] rahul This is credential so it will redirect to Home page after . First I am going to show functionality then after that I will show normal employee functionality. This is Home window.

Image 4. Add New Employee Window

Image 5. Get All Employees

Image 6.

This is leave request page

Image 7. Present Employee window

Image 8. Employee Detail on Click of employee record

Image 9. Absent Employees Window

Image 10. Showing Birthdays in current Month

Image 11. Window

Image 12. Now I am going to show Employee functionality.

Image 13. When a has logged in as a Employee then this window will show

Image 14. This is my Info window.

Image 15.

This is leave request window

Image 16. This window will show all approved leave of a employee.

Image 17. This window will show Employees denied leave.

Image 18. Like in can see all present and all absent employees. birthdays

Image 19. window

Image 20. There can be functionality added to this project, but due to limited time I couldn't add that in this. So if any thinks or wants to add extra functionality in this project then he/she can. to add your contents and source code to this article

Article Extensions Contents added by Rahul Kumar Saxena on Sep 22, 2010 File: SP Table.zip Data Base Structure Of Project Contents added by Rahul Kumar Saxena on Sep 22, 2010 File: SP.zip Data Table

Base

Structure 1.

Of

Project Attendence

Table

Table

2.

3.

Employee

LeaveRequest

SP

are

in

attached

file

How to load Skins dynamically in WPF This sample demonstrates how to load skin files dynamically in WPF. A skin file has the file name extension .skin and contains property settings for individual controls such as Button, Label, Textbox, or Calendar controls. Control skin settings are like the control markup itself, but contain only the properties you want to set as part of the theme. For example, the following is a control skin for a Button control. Getting Started Creating a WPF Application:    

Open Visual Studio 2010. Go to File => New => Project Select Windows from the Installed templates and choose WPF application Enter the Name and choose the location.

Click OK. In my project I have added a folder Skins and I have added three Resource Dictionary using right click of folder and click add new item like this and put the names of resource dictionary files like this:

Image 1. I have added three resource dictionary file Red, Blue, Green and add your styles inside of these files. Now let's come on .xaml page work. I am making a windows and loading skins colors dynamically on page. Here is my windows.xaml <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfSkinSample.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480"> <Window.Resources> <Style TargetType="Label" x:Key="LabelStyle"> <Setter Property="Dock.Dock" Value="Left" /> <Setter Property="Width" Value="100" /> <Style TargetType="Button" x:Key="ButtonStyle"> <Setter Property="HorizontalAlignment" Value="Right" />

<Box Style="{DynamicResource BoxStyle}"> <Button Content="Submit" Grid.Row="4" Width="100" Margin="99,48,0,67" Style="{DynamicRe source ButtonStyle}" HorizontalAlignment="Left"d:LayoutOverrides="Width" /> Windows.xaml.cs public MainWindow() { this.InitializeComponent(); Loaded += RuntimeSkinning_Loaded; // Insert code required on object creation below this point. } void RuntimeSkinning_Loaded(object sender, RoutedEventArgs e) { _skinChanger.AddHandler(RadioButton.CheckedEvent, new RoutedEventHandler(OnSkinChanged)); } private void OnSkinChanged(object sender, RoutedEventArgs e) { string name = (e.OriginalSource as RadioButton).Name; _Form.Resources.Clear(); _Form.Resources.MergedDictionaries.Clear(); if (name == "None") return; ResourceDictionary skin = Application.LoadComponent(new Uri("/WpfSkinSample;component/Skins/" + name + ".xaml", UriKind.Relative)) as ResourceDictionary; _Form.Resources.MergedDictionaries.Add(skin); e.Handled = true; } Now time to run the application.

Image 2. When you click on Blue Skin:

Image 3. When you click on red Skin.

Image 4. When you click on Green Skin.

Image 5. This is it. We are done here with implementation of skins in WPF. Question or comments are most welcome on c-sharpcorner comments section.

Creating an Internationalized Wizard in WPF By Josh Smith, Karl Shifflett, 17 Dec 2008

4.96 (74 votes)

Prize winner in Competition "Best VB.NET article of December 2008"  

C# demo (requires Visual Studio 2008 with SP1) - 136 KB VB.NET demo (requires Visual Studio 2008 with SP1) - 144 KB

Table of Contents            

Introduction Background Quick History of this Article The Demo Application Wizard Architecture Displaying and Navigating the Pages Introducing the Data Model Presenting Options via OptionViewModel Internationalizing the Wizard Testing the Wizard in Different Cultures References Revision History

Introduction This article reviews a WPF application that contains a Wizard-style interface. It explains how the application was globalized, so that it can run in various cultures and show its display text in any language. The application uses the Model-View-ViewModel (MVVM) design pattern as its core architecture. It was written twice: in C# and VB.NET. Both of those Visual Studio solutions are available for at the top of this article. Note, the application was built and tested in Visual Studio 2008 with Service Pack 1.

Background A “Wizard” is a interface that presents the with a set of steps that must be completed in a sequential order. For example, Wizards are commonly seen in application installers where the must complete a series of steps and press a “Next” button to proceed from step to step. It is a useful UI design pattern for areas of an application that are not frequently used, or if you need to conserve screen real estate by revealing one piece of the UI at a time. The Wizard reviewed in this article is fully internationalized. Internationalization of software applications consists of two separate tasks: globalization and localization. The process of ensuring that an application’s interface can be displayed in various cultures using various languages (natural languages, not programming languages) is referred to as “globalization”. Translating the resources used by the UI (such as display text, images, etc.) is called “localization”. This article reviews a simple, yet effective, technique for internationalizing a WPF interface. Part of the globalization strategy employed in the application relies on the use of the ModelView-ViewModel (MVVM) design pattern. MVVM is a pattern that leverages the fundamental platform features of WPF to enable simple, loosely coupled, and highly testable client application architectures. This article does not attempt to explain the MVVM pattern, but simply shows it in use. If you are not already familiar with MVVM, don’t worry. The simplicity of the pattern should prevent it from obfuscating the core focus of what we examine. For more information about any of these topics, be sure to visit the web pages listed in the “References” section towards the end of this article.

Quick History of this Article This article’s demo application was created by Karl Shifflett and Josh Smith. Karl flew from Seattle to New York to visit Josh so that they could get together and share ideas about WPF, software architecture, internationalization, MVVM, and software development in general. When they were not enjoying the culinary excellence offered by New York City, they were sitting side-by-side working on the program reviewed in this article. The app was originally written in VB.NET, Karl’s language of choice, and later on, Josh translated it to C#, his language of choice. Following that weekend, Josh was on vacation, so he took the burden of writing this article upon himself. We realized that an article about creating internationalized software would not be very convincing unless it was accompanied by translated resources that actually appear in the UI at run time. Since neither of us knows any language other than American English, we turned to our fellow WPF Disciples and a Microsoft developer for some help. Big thanks go to Corrado Cavalli for translating the display text to Italian, Laurent Bugnion for translating it to French, and Marco Goertz, Microsoft Cider Team Senior Development Lead, for translating it to German.

The Demo Application This article discusses an application that allows the to order a cup of coffee by stepping through a set of Wizard pages. When the application first loads up, the sees a simple window that allows him/her to launch the Wizard, as seen below:

After clicking on the button in that window, the Wizard opens up and shows the Welcome page.

Clicking on the Next button navigates to the first page in which the must select options for his or her cup of coffee. After the drink size is selected, the price of the order appears in the lower left corner.

After clicking the Next button again, the is allowed to pick some “extras” for the cup of coffee being ordered. Since none of the options on this page are required for the order to be processed, the Next button is enabled at all times. If the selects any extra flavorings, the price increases by fifty cents per shot of flavoring.

Clicking the Next button again brings you to the Summary page, which is a read-only listing of all the selected options made in the previous pages. Since this is the final step in the workflow, the Next button text changes to “Finish” (or the equivalent word in another language).

Once the Finish button is clicked, the Wizard closes and the returns to the initial window. The cost of the ’s cup of coffee is displayed in this window. If the cancelled out of the order, instead of clicking the Finish button, the window would indicate so.

Wizard Architecture The Wizard design is based on the Model-View-ViewModel (MVVM) design pattern. Each step in the workflow is represented by a separate ViewModel class, all of which derive from

the CoffeeWizardPageViewModelBase class. All of these “Page ViewModels” are managed by the CoffeeWizardViewModel class, which exposes them via thePages property, as seen below:

C# Collapse | Copy Code

public ReadOnlyCollection Pages { get { if (_pages == null) this.CreatePages(); return _pages; } } void CreatePages() { var typeSizeVM = new CoffeeTypeSizePageViewModel(this.CupOfCoffee); var extrasVM = new CoffeeExtrasPageViewModel(this.CupOfCoffee); var pages = new List (); pages.Add(new WelcomePageViewModel()); pages.Add(typeSizeVM); pages.Add(extrasVM); pages.Add(new CoffeeSummaryPageViewModel( typeSizeVM.AvailableBeanTypes, typeSizeVM.AvailableDrinkSizes, extrasVM.AvailableFlavorings, extrasVM.AvailableTemperatures)); _pages = new ReadOnlyCollection (pages); }

VB.NET Collapse | Copy Code

Public ReadOnly Property Pages() As ReadOnlyCollection(Of CoffeeWizardPageViewModelBase) Get If _objPages Is Nothing Then Me.CreatePages() End If Return _objPages End Get End Property Private Sub CreatePages() Dim objTypeSizePageViewModel As New CoffeeTypeSizePageViewModel(Me.CupOfCoffee) Dim objExtrasPageViewModel As New CoffeeExtrasPageViewModel(Me.CupOfCoffee) Dim obj As New List(Of CoffeeWizardPageViewModelBase) With obj .Add(New WelcomePageViewModel) .Add(objTypeSizePageViewModel) .Add(objExtrasPageViewModel) .Add(New CoffeeSummaryPageViewModel( _ objTypeSizePageViewModel.AvailableBeanTypes, _ objTypeSizePageViewModel.AvailableDrinkSizes, _ objExtrasPageViewModel.AvailableFlavorings, _ objExtrasPageViewModel.AvailableTemperatures)) End With _objPages = New ReadOnlyCollection(Of CoffeeWizardPageViewModelBase)(obj) End Sub

The read-only list of steps on the left side of the Wizard displays an item for each page in the workflow. That list is implemented as an ItemsControl whose ItemsSource property is bound to the Pages property ofCoffeeWizardViewModel. The ItemsControl has an ItemTemplate assigned to it, which renders each item and highlights the item that corresponds to the current page in view. When running the application in German, it looks something like this:

An abridged version of the markup for that list of pages, contained in CoffeeWizardView.xaml, is seen below: Collapse | Copy Code

<Setter TargetName="txt" Property="FontWeight" Value="Bold" /> <Setter TargetName="bdInner" Property="Background" Value="BurlyWood" /> <Setter TargetName="bdOuter"

Property="Opacity" Value="1" />

The relationships between the ViewModel classes seen thus far are shown in the following diagram:

Displaying and Navigating the Pages CoffeeWizardViewModel exposes two properties of type ICommand that allow the CoffeeWizardView control to provide the with a means of navigating between the pages. Those properties are called MoveNextCommand andMovePreviousCommand. When either of these commands execute, the CurrentPage property is assigned whichever Page ViewModel should currently be in view. CoffeeWizardView displays the appropriate View for the current Page ViewModel because it contains aHeaderedContentControl whose Content property is bound to the CurrentPage property. When theHeaderedContentControl’s Content property is set to a ViewModel object, a typed DataTemplate, whoseDataType matches the “current” ViewModel type, is used to provide the correct View for visualizing that ViewModel instance. The HeaderedContentControl in CoffeeWizardView is declared like this: Collapse | Copy Code

These four templates are inside the collection: Collapse | Copy Code

The following code comes from CoffeeWizardViewModel. It shows how the MoveNextCommand decides if it can execute, and what happens when it executes.


public ICommand MoveNextCommand { get { if (_moveNextCommand == null)

_moveNextCommand = new RelayCommand( () => this.MoveToNextPage(), () => this.CanMoveToNextPage); return _moveNextCommand; } } bool CanMoveToNextPage { get { return this.CurrentPage != null && this.CurrentPage.IsValid(); } } void MoveToNextPage() { if (this.CanMoveToNextPage) { if (this.CurrentPageIndex < this.Pages.Count - 1) this.CurrentPage = this.Pages[this.CurrentPageIndex + 1]; else this.OnRequestClose(); } }


Public ReadOnly Property MoveNextCommand() As ICommand Get If _cmdMoveNextCommand Is Nothing Then _cmdMoveNextCommand = New RelayCommand( _ AddressOf ExecuteMoveNext, _ AddressOf CanExecuteMoveNext) End If Return _cmdMoveNextCommand End Get End Property Private Function CanExecuteMoveNext(ByVal param As Object) _ As Boolean If Me.CurrentPage IsNot Nothing Then Return Me.CurrentPage.IsValid Else Return False End If End Function Private Sub ExecuteMoveNext(ByVal parm As Object) If CanExecuteMoveNext(Nothing) Then Dim intIndex As Integer = Me.CurrentPageIndex If intIndex < Me.Pages.Count - 1 Then Me.CurrentPage = Me.Pages(intIndex + 1) Else OnRequestClose() End If End If End Sub

The CoffeeWizardView control makes use of the MoveNextCommand property by binding a button’s Commandproperty to it, as seen below: Collapse | Copy Code

<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />

Introducing the Data Model The demo application has two projects in it. The CoffeeLibrary project contains Model type definitions. TheCupOfCoffee class contains the business data and price calculation logic upon which the rest of the application depends. Granted, the price calculation logic is rather crude and simplistic, but that is irrelevant for the purposes of this demonstration. The following diagram shows the types contained in the business library:

CupOfCoffee implements the INotifyPropertyChanged interface because when any of the properties are set, it could potentially cause the object’s Price property to change. CoffeeWizardView makes use of this when it binds aTextBlock’s Text property to the Price property, in order to show the current price of the ’s cup of coffee. That is the only place where the View directly accesses the Model. In all other cases, the View always binds to the ViewModel objects that wrap the underlying CupOfCoffee instance. We could have made the ViewModel re-expose the Price property and raise its PropertyChanged event when the CupOfCoffee does, but there was no distinct advantage in doing so. All of the ViewModel classes have a reference to a CupOfCoffee object, though not all of them necessarily make use of it. To be more specific, the Welcome page and Summary page do not need to access the CupOfCoffee object created by the . For a high-level understanding of

how the Views, ViewModels, and Model classes relate to each other, consult the following diagram:

Presenting Options via OptionViewModel The pages that present a list of options to the make use of the RadioButton and CheckBox controls to provide either mutually exclusive or multiple choice lists, respectively. Each option in a list corresponds to a value from an enumeration defined in the CoffeeLibrary assembly, such as the BeanType enum. It might be tempting to display the name of each enum value in the UI, but that would prevent the UI from being localizable. Also, to facilitate consistent use of the MVVM pattern throughout the application, you should not set the Content property of theRadioButton/CheckBox to an enum value because in doing so, you create a tight coupling between the ViewModel and its associated View. Our solution to this problem lies in the use of a ViewModel class that represents an option in the View. To that end, we created the OptionViewModel class. It is a small type whose sole purpose is to create a UI-friendly wrapper around an option displayed in a list. It allows you to specify a localized display name for the option, the underlying value that it represents, and an

optional value used to control the order in which the options are sorted, and subsequently displayed. In addition, it also has an IsSelected property to which the IsChecked property of aRadioButton or CheckBox can be bound. The following diagram shows OptionViewModel and how it is used by other ViewModel classes:

The CoffeeTypeSizePageViewModel class has two properties that make use of this type: AvailableBeanTypesand AvailableDrinkSizes. The AvailableDrinkSizes property, and associated methods, is listed below:


/// <summary> /// Returns a read-only collection of all drink sizes that the can select. /// public ReadOnlyCollection > AvailableDrinkSizes { get { if (_availableDrinkSizes == null) this.CreateAvailableDrinkSizes(); return _availableDrinkSizes; } } void CreateAvailableDrinkSizes() { var list = new List >();

list.Add(new OptionViewModel ( Strings.DrinkSize_Small, DrinkSize.Small, 0)); list.Add(new OptionViewModel ( Strings.DrinkSize_Medium, DrinkSize.Medium, 1)); list.Add(new OptionViewModel ( Strings.DrinkSize_Large, DrinkSize.Large, 2)); foreach (OptionViewModel option in list) option.PropertyChanged += this.OnDrinkSizeOptionPropertyChanged; list.Sort(); _availableDrinkSizes = new ReadOnlyCollection >(list); } void OnDrinkSizeOptionPropertyChanged( object sender, PropertyChangedEventArgs e) { var option = sender as OptionViewModel ; if (option.IsSelected) this.CupOfCoffee.DrinkSize = option.GetValue(); }


Public ReadOnly Property AvailableDrinkSizes() As _ ReadOnlyCollection(Of OptionViewModel(Of DrinkSize)) Get If _objAvailableDrinkSizes Is Nothing Then CreateAvailableDrinkSizes() End If Return _objAvailableDrinkSizes End Get End Property Private Sub CreateAvailableDrinkSizes() Dim obj As New List(Of OptionViewModel(Of DrinkSize)) With obj .Add(New OptionViewModel(Of DrinkSize) _ (My.Resources.Strings.DrinkSize_Small, _ DrinkSize.Small, 0)) .Add(New OptionViewModel(Of DrinkSize) _ (My.Resources.Strings.DrinkSize_Medium, _ DrinkSize.Medium, 1)) .Add(New OptionViewModel(Of DrinkSize) _ (My.Resources.Strings.DrinkSize_Large, _ DrinkSize.Large, 2)) End With For Each objOption As OptionViewModel(Of DrinkSize) In obj AddHandler objOption.PropertyChanged, _ AddressOf OnDrinkSizeOptionPropertyChanged Next obj.Sort() _objAvailableDrinkSizes = _ New ReadOnlyCollection(Of OptionViewModel(Of DrinkSize))(obj) End Sub

Private Sub OnDrinkSizeOptionPropertyChanged( _ ByVal sender As Object, ByVal e As PropertyChangedEventArgs) Dim obj As OptionViewModel(Of DrinkSize) = _ CType(sender, OptionViewModel(Of DrinkSize)) If obj.IsSelected Then Me.CupOfCoffee.DrinkSize = obj.GetValue End If End Sub

The value contained in an OptionViewModel is accessible by calling its GetValue method. We decided to expose this as a method, instead of a property, so that the UI cannot easily bind to it. Elements in a View should have their properties bound to the DisplayName property, to ensure that the localized string is shown. The following XAML from CoffeeTypeSizePageView shows how this binding is created: Collapse | Copy Code

The list of RadioButtons is implemented as an ItemsControl with an ItemTemplate that generates aRadioButton for each item. This approach is more desirable, in most cases, than having the RadioButtons statically be declared in XAML, because it eliminates the need for redundant markup. In a more dynamic scenario, where the list of options might come from a database or Web Service, this approach is invaluable because it places no constraints on how many options can be displayed.

Internationalizing the Wizard As mentioned in the Background section of this article, to globalize an application’s interface is to make it ready and able to work properly in various cultures and languages. There have been many suggested approaches in the WPF community to accomplish this. The simple technique shown in this article has been used in real production WPF applications, and is known to be quick and reliable. In this article, we only work with languages that read from left to right, and do not have localespecific business logic. Those topics, while interesting and important, fall outside the scope of this article. The Wizard is fully globalized, so that it can display its text in any language for which localized strings are available. The process of globalizing the application’s UI can be broken into two pieces: putting all of the default display text into resource files, and consuming those strings from

the application. Localizing the application consists of having translators create language-specific resource files that contain translations of the original resource strings. A resource file is commonly referred to as a “RESX” because that is the file extension used for resource files in Visual Studio. RESX’s have been around for years in the .NET world, and are the foundation of creating internationalized applications in Windows Forms and ASP.NET. Visual Studio has a RESX editor that allows you to work with many different kinds of resources. The RESX editor looks something like this:

Every time you edit a RESX file in your project, Visual Studio updates an auto-generated class that allows you to easily access the resources it contains. The name of the class matches the name of the RESX file. When you access thestatic (Shared in VB.NET) of that class, it retrieves the localized value for that property, based on the current culture of the thread in which it runs. For instance, if Thread.CurrentThread.CurrentCulture references a CultureInfo object that represents French as spoken in Switzerland (culture code: “fr-CH”) and you have a resource file with resources for that culture, then the static property will return the localized resource value for Swiss French. Accessing the localized strings from code is very easy. Here is the DisplayName property from theCoffeeSummaryPageViewModel class, which is used to show a header above the Summary page when it is in view.


public override string DisplayName { get { return Strings.PageDisplayName_Summary; } }


Public Overrides ReadOnly Property DisplayName() As String Get Return My.Resources.Strings.PageDisplayName_Summary End Get End Property

In the demo application, the RESX file base name is Strings.resx, which is why the auto-generated class is namedStrings. When I mention that the RESX file base name is Strings.resx, that means

that all localized RESX files include their culture code in the file name, such as Strings.frCH.resx for the Swiss French version of the file. This is a required naming convention for the resource system to properly locate and load the localized resources at run time. Accessing the localized strings from XAML is easy, too. However, it is critically important that you perform one step on the project’s default RESX files before you try to access their auto-generated classes from markup. By default, the auto-generated class for a RESX file is marked as internal (Friend in VB.NET), but we need it to be public instead. In order to have the class be created as public, you must select the RESX file in Solution Explorer and view its properties in the Properties window. You must change the “Custom Tool” property from “ResXFileCodeGenerator” to “PublicResXFileCodeGenerator”. This critical step is shown below:

Once that step is complete, it’s easy to consume the resource strings from XAML. First, add an XML namespace alias for the namespace that contains the auto-generated resource class. Then, simply use the {x:Static} markup extension as the value of a property setting. The following XAML snippet shows how the ApplicationMainWindow’sTitle is set to a localized string: Collapse | Copy Code

<Window x:Class="GlobalizedWizard.ApplicationMainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:res="clr-namespace:GlobalizedWizard.Resources" Title="{x:Static res:Strings.ApplicationMainWindow_Title}" >

There is one more trick to be aware of that makes internationalization possible in WPF apps. For whatever reason, WPF does not make use of the current culture in Bindings. In order for the current culture to be used by Bindings, such as getting the correct currency symbol when setting a Binding’s StringFormat property to “c” (the currency format string), you must run this line of code as the application first loads up:


// Ensure the current culture ed into bindings // is the OS culture. By default, WPF uses en-US // as the culture, regardless of the system settings. FrameworkElement.LanguageProperty.OverrideMetadata( typeof(FrameworkElement), new FrameworkPropertyMetadata( XmlLanguage.GetLanguage(CultureInfo.CurrentCulture.IetfLanguageTag)));


FrameworkElement.LanguageProperty.OverrideMetadata( _ GetType(FrameworkElement), _ New FrameworkPropertyMetadata( _ System.Windows.Markup.XmlLanguage.GetLanguage( _ CultureInfo.CurrentCulture.IetfLanguageTag)))

Testing the Wizard in Different Cultures If you would like to see what the demo application looks like when running in other cultures, open the App.xaml.cs file (or the Application.xaml.vb file) and uncomment one of the lines of code that creates a CultureInfo object. This ensures that the current thread uses a culture for which localized resource strings are available.

References   

Introduction to Model/View/ViewModel pattern for building WPF apps DataModel- View-ViewModel pattern series Resources in .Resx File Format

Revision History  

December 17, 2008 - Published the article.

Simple Delegates With Examples in C# Simple Delegates With Examples. Delegates have the following properties: 1. 2. 3. 4. 5. 6.

7.

Delegates are similar to C++ function pointers, but are type safe. Delegates allow methods to be ed as parameters. Delegates can be used to define callback methods. Delegates can be chained together; for example, multiple methods can be called on a single event. Methods don't need to match the delegate signature exactly. Using a delegate allows the programmer to encapsulate a reference to a method inside a delegate object. The delegate object can then be ed to code that can call the referenced method, without having to know at compile time which method will be invoked. An interesting and useful property of a delegate is that it does not know or care about the class of the object that it references. Any object will do; all that matters is that the method's argument types and return type match the delegate's. This makes delegates perfectly suited for "anonymous" invocation.

Example1 Before applying the delegate: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GetData("Mahesh"); } } public void GetData(string Name) { lblName.Text = Name; } Output Mahesh After applying the delegate: public delegate void MyDelegare(string var); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) {

MyDelegare objMyDelegare = new MyDelegare(GetData); objMyDelegare("Mahesh"); } } public void GetData(string Name) { lblName.Text = Name; } Output Mahesh Multicast Delegate It is a delegate that holds the reference of more than one method. Multicast delegates must contain only methods that return void, else there is a run-time exception. Example2 public delegate void MyDelegare(string var); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { MyDelegare objMyDelegare = new MyDelegare(GetData); objMyDelegare += new MyDelegare(GetDat_one); //GetData and GetDat_one is called objMyDelegare("Mahesh"); objMyDelegare -= new MyDelegare(GetDat_one); lblName.Text = lblName.Text + "
"; //GetData is called objMyDelegare("Mahesh"); } } public void GetData(string Name){ lblName.Text = lblName.Text + "GetDate : " + Name; } public void GetDat_one(string Name) { lblName.Text = lblName.Text + " GetDate_One : " + Name; } Output

GetDate : Mahesh GetDate_One : Mahesh GetDate : Mahesh

Validation in Windows Presentation Foundation Introduction Since the dawn of software development, the single biggest threat to reliable information has been end-s. After decades of the existence of computers, why do we still need to inform s that "the Start Date should always be less than the End Date", or that "First Name is a required field"? Since .Current.Electrocute() won't be added to the .NET Framework until .NET 4.0, most of us generally have to resort to displaying some kind of UI cues to politely tell the what they've done wrong, and how they can fix it. Under Windows Forms, we had the ErrorProvider, and under ASP.NET, we had Validator controls. In Windows Presentation Foundation, the approach is going to change, but the goal remains the same: telling s that something is wrong. In this article, I'll discuss how input validation is designed to be handled in Windows Presentation Foundation (hereafter referred to as WPF). Specifically, I'll discuss the ExceptionValidationRule class, creating custom ValidationRules, how to display errors, when to display errors (UpdateSourceTriggers), and finally, an alternative approach using an implementation of the Windows Forms ErrorProvider for WPF.

Table of Contents 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Welcome to WPF Validation Very Simple Validation: ExceptionValidationRule Displaying Errors Customized ValidationRules Controlling When to Validate: UpdateSourceTriggers Where Does an ErrorProvider Fit in? IDataErrorInfo Creating our ErrorProvider Conclusion Special Thanks

Welcome to WPF Validation If you never spent much time with Windows Forms or data binding, I'm hoping that this article will remain simple enough to follow along. Validation in Windows Presentation Foundation takes an approach very similar to ASP.NET validation, in that most "business rules" are enforced on the interface and applied to specific controls and bindings. This approach is quite simple to understand and implement, but some proponents of "rich domain models" and objectoriented designs (including myself) have some problems with it. As we approach the end of the article, I'll discuss why this is and a way to do things differently, but still leveraging some of the strengths of WPF. On the other hand, if you did spend a lot of time using Windows Forms, and made heavy use of theErrorProvider/IDataErrorInfo approach to validation, you might be disheartened to know that there isn't one in Windows Presentation Foundation. Luckily, since I too was disappointed about having to enforce everything "on the UI", towards the end of the article, I'll show how to create an ErrorProvider for use in your Windows Presentation Foundation applications. However, even if you're convinced that validating on the UI is a Bad Idea (TM), I'd encourage you to read the full article as I'll discuss some of the other validation features in WPF that you can still leverage. Warning: All of the sample code was written using the BETA 2 release of .NET 3.0, and subsequently, some of it may have changed. Hopefully, the concepts will stay the same though, otherwise this will be a very wasted article :)

Very Simple Validation: ExceptionValidationRule Most of the time when we talk about validation, we're talking about validating input (other kinds of validation are outside the scope of this article). Let's look at the most simple kind of built-in validation offered by WPF - theExceptionValidationRule. To begin our example, let's create a simple Customer class: Collapse | Copy Code

public class Customer { private string _name; public string Name { get { return _name; } set { _name = value; } } }

Writing classes is fun, but you'll probably never convince people to pay you unless you can add some kind of UI to let them interact with your classes. Since this article is about Windows Presentation Foundation, let's use XAML to create our UI. As we're smart developers, we'll also use data binding: Collapse | Copy Code

Before we go any further, it's important to note that the odd-looking markup above is actually just a kind of shorthand for writing this: Collapse | Copy Code

Now, let's say one of your requirements is that customer names are mandatory. To implement this constraint, you could change your customer's Name property to look like this: Collapse | Copy Code

public string Name { get { return _name; } set { _name = value; if (String.IsNullOrEmpty(value)) { throw new ApplicationException("Customer name is mandatory."); } } }

Using WPF Validation Rules on our data binding, we can display this error automatically. All we need to do is make use of the ValidationRules property on our binding, like this: Collapse | Copy Code

<ExceptionValidationRule />

If you ran this code, you'd see something which looks like this:

Displaying Errors Windows Presentation Foundation has a static class inside the System.Windows.Controls namespace, imaginatively named "Validation". It has a number of static dependency properties which you can apply to any control. The ones we're most interested in are:   

Errors - A list of error messages that apply to the bindings on this control. HasError - Indicates whether there are any errors in the Errors property. ErrorTemplate - A ControlTemplate we can apply if there is an error.

By default, the Validation class uses an ErrorTemplate that has a red border around the control, which is why we get a red border in the program above. If the default red borders aren't your thing, I'll understand. You might want thick green borders with orange exclamation marks:

To achieve the look you're after, you could define your own control template: Collapse | Copy Code

<Application.Resources> !!!!

The AdornerElementPlaceholder is used to say "put the invalid control here". Once you've created this template, you can then reuse it on your customer name TextBox by setting the Validation.ErrorTemplate attached property: Collapse | Copy Code

[...]

Or, to save having to set the ErrorTemplate every time, you could do it in a WPF Style. If we were to set the style's TargetType to TextBox, and don't use a key, all text boxes in our application will automatically receive this style: Collapse | Copy Code

<Style TargetType="{x:Type TextBox}"> <Setter Property="Validation.ErrorTemplate"> <Setter.Value> !!!!

Now, green borders are all well and good, but they don't exactly tell the s what they've done wrong. Since we included the error message in the exception we were throwing earlier, we can make use of the staticValidation.Errors attached property to get this value and use it as a property on our TextBox. The most common example is to set the ToolTip, like so: Collapse | Copy Code

<Style TargetType="{x:Type TextBox}"> [... SNIP: The code from above ...] <Style.Triggers> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>

Now, if we mouse over the TextBox while it's in an error state, we'll get a tool-tip telling us what we did wrong:

All we need to do is place that style in our application resources, ensure we apply any validation rules to our bindings, and voila! On a more advanced note, if you would rather show the errors somewhere else than in the ToolTip, such as in theTextBlock where the orange exclamation marks were, you could use a style like this: Collapse | Copy Code

<Style TargetType="{x:Type TextBox}"> <Setter Property="Validation.ErrorTemplate"> <Setter.Value>

Customized Validation Rules I know what you're thinking: "Do I have to throw exceptions?" I'm glad you asked. If you our customer's Name property above, you'll we were throwing an exception in order to display the errors using an ExceptionValidationRule. I'm sure most people will agree that throwing exceptions isn't really the optimal way of signaling that we have input errors. Apart from the performance penalties, personally, I believe that " input" errors aren't exactly "exceptional", and so they are not exactly what exceptions were designed for. If you hunt around the framework, you'll see that the ExceptionValidationRule class inherits from an abstractValidationRule class. The ValidationRule class looks like this: Collapse | Copy Code

public abstract class ValidationRule { public abstract ValidationResult Validate( object value, CultureInfo culture); }

When we created our binding earlier, I had some XAML that resembled this: Collapse | Copy Code


The truth is, we could have used anything that inherits from the ValidationRule base class. Let's create a customValidationRule designed just to validate the lengths of strings. Collapse | Copy Code

namespace MyValidators { public class StringRangeValidationRule : ValidationRule { private int _minimumLength = -1; private int _maximumLength = -1; private string _errorMessage; public int MinimumLength { get { return _minimumLength; } set { _minimumLength = value; } } public int MaximumLength { get { return _maximumLength; } set { _maximumLength = value; } } public string ErrorMessage { get { return _errorMessage; } set { _errorMessage = value; } } public override ValidationResult Validate(object value, CultureInfo cultureInfo) { ValidationResult result = new ValidationResult(true, null); string inputString = (value ?? string.Empty).ToString(); if (inputString.Length < this.MinimumLength || (this.MaximumLength > 0 && inputString.Length > this.MaximumLength)) { result = new ValidationResult(false, this.ErrorMessage); } return result; } } }

Our validator has three properties: a MinimumLength, a MaximumLength, and an ErrorMessage string which is shown if the value doesn't fit within the range. We're now ready to use it in our XAML. First, we'll need to reference it in our XML namespaces at the top of the file: Collapse | Copy Code

<Window [...]

xmlns:validators="clr-namespace:MyValidators" />

Now we can add it to our binding's ValidationRules: Collapse | Copy Code

If you've added the styles I gave above, that should be all you need to do to show validation messages.

Controlling When to Validate: UpdateSourceTriggers If you ran any of the sample code above, you'll notice that the validation only takes place when you hit Tab or click away from the text box. That's a good default for most cases, but if you'd like validation to take place at other times, you can use the UpdateSourceTrigger property on your binding. The UpdateSourceTrigger property can take one of three possible values:  



The default is LostFocus, which means that the bound data source will be updated and validated when the UI element loses focus (such as when you tab away, or click on another element). The second option is PropertyChanged, which occurs when the property you are binding to (the TextBox'sText property in the example above) is changed. This enables you to validate whenever the types or changes the value, without having to wait until they tab away (this is great for filtering a list of things). Finally, there's the Explicit option, which only happens when you tell it to happen. To make use of the UpdateSourceTrigger property in our code, all we'd need to do is set it in our binding: Collapse | Copy Code


For more information on UpdateSourceTriggers, see the MSDN page for the UpdateSourceTrigger enumeration.

Where Does an ErrorProvider Fit in? We've already discussed that the ExceptionValidationRule isn't a nice way of validating. Some of the problems you may have with creating custom validation rules as I showed above are: 1. Our business "rules" are defined in markup, hidden inside our bindings, and can be hard to locate and maintain, as well as difficult to reuse. 2. We can't easily get a "list" of all of the broken rules on a form in order to perform other logic such as determining if the customer can be saved when the "Save" button is clicked. Defining business rules in markup may not be such a problem for some applications, but in applications with rich business objects such as Trial Balance, or applications using rich frameworks such as CSLA, or in cases where the rules are shared across many screens or applications, you may find this to be a big limitation. If this isn't a problem for you, you might not get much out of the rest of this article. This means that the ValidationRules approach isn't very useful to some of us. However, all is not lost, as we can still make use of the static Validation class, and of its use of styles and control templates to control the display of errors.

IDataErrorInfo The IDataErrorInfo interface has been kicking around since .NET 1.1, and was used heavily in DataSets as well as used by many business object frameworks. You'll find this gem in the System.ComponentModel namespace. If you've been reading my blog for some time, hopefully this interface isn't a stranger to you.

IDataErrorInfo was designed for reporting errors to interface controls from the objects they are bound to. The DataGrid (1.1) and DataGridView (2.0) in Windows Forms both detected the presence of this interface on objects they were bound to automatically, and showed any errors without any work. The Windows FormsErrorProvider could automatically be used to display errors on any control that came from the objects they (and the ErrorProvider) were bound to, all without any extra code being written. To refresh your memory, this is how we would have used this interface in .NET 2.0: Collapse | Copy Code

public class Customer : IDataErrorInfo { private string _name; public string Name { get { return _name; } set { _name = value; } } public string Error { get

{ return this[string.Empty]; } } public string this[string propertyName] { get { string result = string.Empty; propertyName = propertyName ?? string.Empty; if (propertyName == string.Empty || propertyName == "Name") { if (string.IsNullOrEmpty(this.Name)) { result = "Name cannot be blank!"; } } return result; } } }

Back then, all we had to do was bind a grid to our Customer object, and any errors would be automatically reported. If we bound the Customer's Name to a TextBox, we just had to drag an ErrorProvider onto the form, set itsDataSource to our Customer object, and all of our validation was done for us. Sadly, IDataErrorInfo appears to have been benched in WPF, as there doesn't seem to be any built-in for it. This means that there is no ErrorProvider component in WPF either. Since the concept of an ErrorProvider is pretty simple, let's have a go at making one ourselves.

More on IDataErrorInfo... The MSDN entry for IDataErrorInfo is a good starting point. For a deeper discussion of the IDataErrorInfointerface and a better way to implement business object validation, you might enjoy my recent Delegates and Business Objects article on the CodeProject. Rocky Lhotkas' brilliant CSLA architecture also makes extensive use of theIDataErrorInfo interface.

Creating our ErrorProvider The ErrorProvider that I have built (found in the attached sample code) inherits from the WPF Decorator class, which means you can "put stuff inside it". To use it, you just need to do something like this: Collapse | Copy Code

<Stack>

My ErrorProvider works by cycling through all of the controls that are inside of it, and looking for any data bindings on their properties. When a value of one of the bound properties changes, it checks if its DataContextimplements IDataErrorInfo, and if so, it gets any error messages, and displays them using the built-in staticValidation class. That means you can use the styles and control templates that I showed above, whilst keeping all of your validation logic in another class. Cycling through the control hierarchy in WPF is done using the LogicalTreeHelper class. The code itself is a little long to post here, but is included in the sample code at the top of the page. Using the WPF ErrorProvider brings a number of benefits:    

Your XAML is much more compact, as you don't need to add a list of ValidationRules to each binding. All of your validation can be done by your business objects, rather than at the UI. This lets you have great encapsulation on your objects while still having an informative UI. You can call the Validate() method on the ErrorProvider to force validation, and check if the controls are valid, rather than having to inspect each one. You can use the GetFirstInvalidElement() method to get the first control with an error on your form, to set focus to it easily. This is great if, for example, your "Save" button has been clicked but you want to show them that they still have errors.

Conclusion Whether you choose to use custom ValidationRules, my ErrorProvider, or simply throw exceptions, I hope I have given you enough information to make an educated decision that suits your project. If your applications have a very rich domain model, you may find the ErrorProvider approach helpful. If your application is very service oriented, or very UI centric, ValidationRules might be all you need. Of course, if none of these approaches suit your requirements, you could always hold out for .NET 4.0 and the introduction of .Current.Electrocute() :)

Special Thanks I would like to give a special thanks to Paul Czywcynski of TempWorks who has done a lot of testing with myErrorProvider and given me a couple of bug fixes to make it work in a few places that I hadn't tried. I'd also like to thank Mike Brown, who pointed me to the LogicalTreeHelper and also pointed me toValidationRules (of course, he didn't mention them until after I'd done my ErrorProvider :) ).

License This article has no explicit license attached to it but may contain usage in the article text or the files themselves. If in doubt please the author via the discussion board below. A list of licenses authors might use can be found here

WPF Chart Control With Pan, Zoom and More 

SwordfishCharts-2.0.zip - 592.3 KB

Introduction This article gives an overview of the code and algorithms I created while writing a chart control for .NET 3.0/WPF. My chart control is useful in that it includes Pan/Zoom, has a clipboard helper that copies the chart to the clipboard in a resolution that the desires, adds data to the image in the clipboard so that the can paste a bitmap image or paste tab separated chart line values into a spreadsheet. The cursor, when moved over the chart, shows the value of the nearest point, or the value at the centre of the cursor. Polygons and lines can be added by coordinate to the chart, and the chart has a transparent background allowing it to be overlaid over any pretty background required. To zoom into the chart, hold down the right mouse button and move the mouse up or to the right, then to pan around just drag the chart with the left mouse button. While this chart control is quite basic right now, I intend to add other features as they are required such as databinding to static and dynamic data sources with dynamically giving the chart an animated appearance, pipe shaded bars for bar charts, and other fancy chart primitives. Updates to this control can be found at the Swordfish Charts project page on Sourceforge where I've released it under the BSD license.

Background Over the years I've moved from ASM/C/DOS to C/Win32 to C++/MFC To C++/GTK/Linux to C#/Windows Forms and now to C#/WPF with WPF being the new Interface API introduced for Windows Vista. For each GUI toolkit I've generally written my own charting control for displaying data, and here I present to you how I wrote one for WPF that I use for displaying data inside WPF business applications that I am working on.

Using the code Using the chart involves adding the chart control to your XAML file, and then in the code behind you add lines to the chart control. First of all you will need to add a reference in your project to the Swordfish.WPF.Charts project. Then at the top of your XAML file for where you are placing the control, add the following namespace: Collapse | Copy Code

xmlns:SwordfishCharts="clr-namespace:Swordfish.WPF.Charts"

In the body of the XAML file add the chart control like so: Collapse | Copy Code

<SwordfishCharts:XYLineChart x:Name="xyLineChart" RenderTransformOrigin="0.5,0.5"/>

If you want a nice rounded background for the chart control as seen in the screenshot above, wrap the control in a border like this:

Collapse | Copy Code

<SwordfishCharts:XYLineChart x:Name="xyLineChart" RenderTransformOrigin="0.5,0.5"/>

The chart control has a property called Primitives to which you add ChartPrimitive objects. At the moment aChartPrimitive represents a line, or a filled polygon. ChartPrimitive objects are rendered in the order that they appear in the Primitives collection. Points are added to a ChartPrimitive using either of these functions: Collapse | Copy Code

public public public public

void void void void

AddPoint(double x, double y); AddPoint(Point point); InsertPoint(Point point, int index); AddSmoothHorizontalBar(double x, double y);

Once all of the required primitives have been added to the chart call XYLineChart.RedrawPlotLines(); to get the chart to recalculate it's display list. The chart control sets the axis limits automatically to show all of the data points. In the source code link at the top of this article, there is a class in the Swordfish.WPF.Charts project called TestPage that is implemented in the TestPage.xaml and TestPage.cs files. This test page overlays a clipboard interface over the chart control. The contents of TestPage.xaml can be seen below showing a CopyToClipboard being placed in the same grid cell as the XYLineChart control. Note that the border around the chart control is called "plotToCopy". When copying the chart to the clipboard I want to copy the decorative border as well, so I have labelled it as such. Collapse | Copy Code

<SwordfishCharts:XYLineChart x:Name="xyLineChart" RenderTransformOrigin="0.5,0.5"/> <SwordfishCharts:CopyToClipboard x:Name="copyToClipboard"/>

There is a static class called ChartUtilities that contains a function called CopyChartToClipboard that is used for copying the chart. Here's a list of the functions in ChartUtilities which may be of use to you:


/// <summary> /// Copies the plotToCopy as a bitmap to the clipboard, and copies the /// chartControl to the clipboard as tab separated values. /// /// <param name="width">Width of the bitmap to be created /// <param name="height">Height of the bitmap to be created public static void CopyChartToClipboard(FrameworkElement plotToCopy, XYLineChart chartControl, double width, double height); /// <summary> /// Calculates the value as near to the input as possible, /// a power of 10 times 1,2, or 5 /// /// <param name="optimalValue"> The value to get closest to /// The nearest value to the input value public static double Closest_1_2_5_Pow10(double optimalValue); /// <summary> /// Calculates the closest possible value to the optimalValue ed /// in, that can be obtained by multiplying one of the numbers in the /// list by the baseValue to the power of any integer. /// /// <param name="optimalValue">The number to get closest to /// <param name="numbers">List of numbers to multiply by /// <param name="baseValue">The base value public static double ClosestValueInListTimesBaseToInteger (double optimalValue, double[] numbers, double baseValue); /// <summary> /// Gets the plot rectangle that is required to hold all the /// lines in the primitive list /// /// <param name="primitiveList"> public static Rect GetPlotRectangle(List primitiveList); /// <summary> /// Gets a nominally oversize rectangle that the plot will be drawn into /// public static Rect GetPlotRectangle(List primitiveList, double oversize); /// <summary> /// Converts a ChartLine object to a ChartPolygon object that has /// one edge along the bottom Horizontal base line in the plot. /// public static ChartPrimitive ChartLineToBaseLinedPolygon (ChartPrimitive chartLine); /// <summary> /// Takes two lines and creates a polygon between them /// public static ChartPrimitive LineDiffToPolygon (ChartPrimitive baseLine, ChartPrimitive topLine); /// <summary> /// Adds a set of lines to the chart for test purposes /// public static void AddTestLines(XYLineChart xyLineChart); /// <summary> /// Creates a 50% hatch patter for filling a polygon /// public static DrawingBrush CreateHatch50(Color color, Size blockSize);

/// <summary> /// Copies a Framework Element to the clipboard as a bitmap /// /// <param name="copyTarget">The Framework Element to be copied /// <param name="width">The width of the bitmap /// <param name="height">The height of the bitmap public static void CopyFrameworkElementToClipboard (FrameworkElement copyTarget, double width, double height); /// <summary> /// Copies a Framework Element to a bitmap /// /// <param name="copyTarget">The Framework Element to be copied /// <param name="width">The width of the bitmap /// <param name="height">The height of the bitmap public static System.Drawing.Bitmap CopyFrameworkElementToBitmap (FrameworkElement copyTarget, double width, double height);

Under the Hood Rendering the Chart When the chart is rendered, the gridlines are drawn first, and then the chart lines and polygons are drawn on top. The gridlines are selected by picking the granularity required to get close to 100 pixels in the horizontal, and 75 pixels in the vertical (the values of 100 and 75 are set in the XYLineChart constructor). A function calledClosest_1_2_5_Pow10 from ChartUtilities picks gridline granularity so that the gridline values are multiples of 1, 2 or 5 times the power of 10 that yields the nearest match. This function is implemented as follows: Collapse | Copy Code

double[] numbers = { 1.0, 2.0, 5.0 }; double baseValue = 10.0; double multiplier = Math.Pow(baseValue, Math.Floor(Math.Log(optimalValue) / Math.Log(baseValue))); double minimumDifference = baseValue * baseValue * multiplier; double closestValue = 0.0; double minimumNumber = baseValue * baseValue; foreach (double number in numbers) { double difference = Math.Abs(optimalValue - number * multiplier); if (difference < minimumDifference) { minimumDifference = difference; closestValue = number * multiplier; } if (number < minimumNumber) { minimumNumber = number; } } if (Math.Abs(optimalValue - minimumNumber * baseValue * multiplier) < Math.Abs(optimalValue - closestValue)) closestValue = minimumNumber * baseValue * multiplier;

return closestValue;

In actual fact the current implementation of the chart control picks gridlines for the X axis that are multiples of powers of 12 as it has only been used for showing months on the X axis. So the entire implementation for working out the spacing looks like this: Collapse | Copy Code

if (maxXY.X != minXY.X) scaleX = (double)size.Width / (double)(maxXY.X - minXY.X); if (maxXY.Y != minXY.Y) scaleY = (double)size.Height / (double)(maxXY.Y - minXY.Y); double optimalSpacingX = optimalGridLineSpacing.X / scaleX; double spacingX = ChartUtilities.ClosestValueInListTimesBaseToInteger( optimalSpacingX, new double[] { 1, 3, 6 }, 12.0); if (spacingX < 2.0) spacingX = ChartUtilities.Closest_1_2_5_Pow10(optimalSpacingX); double optimalSpacingY = optimalGridLineSpacing.Y / scaleY; double spacingY = ChartUtilities.Closest_1_2_5_Pow10(optimalSpacingY);

where maxXY and minXY are the minimum and maximum values of all the primitives added to the chart. The gridlines are added to a PathFigure object as line segments as seen below. The boolean parameter in LineSegment just says whether a line should be drawn to that point or not, so the code is moving to the start point, and then drawing to the endpoint. Collapse | Copy Code

Point startPoint = new Point(xPos, size.Height); Point endPoint = new Point(xPos, 0); pathFigure.Segments.Add(new LineSegment(startPoint, false)); pathFigure.Segments.Add(new LineSegment(endPoint, true));

A PathFigure can be converted to PathGeometry which, as seen below, has a transform attached to it to allow it to be zoomed, panned, or even rotated. Chart lines and polygons are added to the chart canvas in the XYLineChart.RenderPlotLines method seen below: Collapse | Copy Code

protected void RenderPlotLines(Canvas canvas) { canvas.Children.Clear(); foreach (ChartPrimitive primitive in primitiveList) { if (primitive.Points.Count > 0) { Path path = new Path(); PathGeometry pathGeometry = new PathGeometry(); pathGeometry.Transform = shapeTransform;

if (primitive.Filled) { pathGeometry.AddGeometry(primitive.PathGeometry); path.Stroke = null; if (primitive.Dashed) { path.Fill = ChartUtilities.CreateHatch50(primitive.Color, new Size(2, 2)); } else path.Fill = new SolidColorBrush(primitive.Color); } else { pathGeometry.AddGeometry(primitive.PathGeometry); path.Stroke = new SolidColorBrush(primitive.Color); path.StrokeThickness = primitive.LineThickness; path.Fill = null; if (primitive.Dashed) path.StrokeDashArray = new DoubleCollection(new double[] { 2, 2 }); } path.Data = pathGeometry; path.Clip = chartClip; canvas.Children.Add(path); } } }

Inspection of the above code shows that for each primitive, a Path object is added to the canvas. A Path has geometry in it, and to that geometry I attach a transform that I use to implement the pan and zoom. The path is clipped to the chart region so that the geometry isn't drawn outside the chart area when it is zoomed.

Zooming and Panning The calculations for zooming and panning are done in the PanZoomCalculator class and are normalized to the dimensions of the chart, so a pan distance of 1 will pan the chart 1x the width of the chart which allows the chart to easily retain it's pan and zoom settings when it is resized. Most of the work is done in the MouseMoved method. Panning is calculated like this: Collapse | Copy Code

Pan += PixelsMoved/Zoom/ChartSize

which in the code looks like this: Collapse | Copy Code

if (isPanning) { currentPan.X += (newPosition.X - lastPosition.X) / currentZoom.X / window.Width; currentPan.Y += (newPosition.Y - lastPosition.Y) / currentZoom.Y / window.Height; }

Zooming uses a power function so that the zooming retains a linear feel to it as you zoom in and out of the chart. I've found that 1.002 to the power of the number of pixels moved seems to work nicely. So the algorithm looks like this: Collapse | Copy Code

Zoom *= Power(1.002, PixelsMoved)

Zooming is done on the spot that the right clicked the mouse. Normally the chart would zoom in on it's centre, so to zoom in on where the clicked the chart needs to be panned as it is zoomed. The amount to pan is calculated like this: Collapse | Copy Code

Pan += (ChartSize/2 - ZoomStartPos) * (1/previousZoom - 1/Zoom)/ChartSize

Which in code looks like this: Collapse | Copy Code

if (isZooming) { Point oldZoom = currentZoom; currentZoom.X currentZoom.Y currentZoom.X currentZoom.Y

*= Math.Pow(1.002, newPosition.X - lastPosition.X); *= Math.Pow(1.002, -newPosition.Y + lastPosition.Y); = Math.Max(1, currentZoom.X); = Math.Max(1, currentZoom.Y);

currentPan.X += (window.Width * .5 - zoomCentre.X) * (1/oldZoom.X - 1/currentZoom.X) / window.Width; currentPan.Y += (-window.Height * .5 - zoomCentre.Y) * (1/oldZoom.Y - 1/currentZoom.Y) / window.Height; }

Finally I limit the Pan so that the chart isn't panned out of site. I take the amount that the chart is bigger than if it wasn't zoomed, halve it as it can only be panned either way half of the size that it exceeds the normal size, and then I scale it by the zoom factor as the zoom factor is applied to the pan when the transform is calculated. So the algorithm looks like this: Collapse | Copy Code

Pan = Min(Pan, (Zoom-1)/2/Zoom)

Which in code looks like this: Collapse | Copy Code

lastPosition = newPosition; if (isPanning || isZooming)

{ // Limit Pan Point maxPan = new Point(); maxPan.X = .5*(currentZoom.X - 1) / (currentZoom.X); maxPan.Y = .5*(currentZoom.Y - 1) / (currentZoom.Y); currentPan.X = Math.Min(maxPan.X, currentPan.X); currentPan.X = Math.Max(-maxPan.X, currentPan.X); currentPan.Y = Math.Min(maxPan.Y, currentPan.Y); currentPan.Y = Math.Max(-maxPan.Y, currentPan.Y); if (Double.IsNaN(currentPan.X) || Double.IsNaN(currentPan.Y)) currentPan = new Point(0f, 0f); if (Double.IsNaN(currentZoom.X) || Double.IsNaN(currentZoom.Y)) currentZoom = new Point(1f, 1f); this.OnPanZoomChanged(); }

The Zoom and Pan are then applied to the chart geometry as a transform, which is calculated in theXYLineChart.SetChartTransform method which looks like this: Collapse | Copy Code

protected void SetChartTransform(double width, double height) { Rect plotArea = ChartUtilities.GetPlotRectangle(primitiveList, 0.01f); minPoint = plotArea.Location; minPoint.Offset(-plotArea.Width * panZoomCalculator.Pan.X, plotArea.Height * panZoomCalculator.Pan.Y); minPoint.Offset(0.5 * plotArea.Width * (1 - 1 / panZoomCalculator.Zoom.X), 0.5 * plotArea.Height * (1 - 1 / panZoomCalculator.Zoom.Y)); maxPoint = minPoint; maxPoint.Offset(plotArea.Width / panZoomCalculator.Zoom.X, plotArea.Height / panZoomCalculator.Zoom.Y); Point plotScale = new Point(); plotScale.X = (width / plotArea.Width) * panZoomCalculator.Zoom.X; plotScale.Y = (height / plotArea.Height) * panZoomCalculator.Zoom.Y; Matrix shapeMatrix = Matrix.Identity; shapeMatrix.Translate(-minPoint.X, -minPoint.Y); shapeMatrix.Scale(plotScale.X, plotScale.Y); shapeTransform.Matrix = shapeMatrix; }

Putting the chart coordinates on the cursor The chart coordinates on the cursor work in 2 modes. When the cursor is near a plot point it displays the coordinates of the point and draws a yellow circle around the point, otherwise the cursor just shows the coordinates of the crosshairs. Finding the closest point is handled by the ClosestPointPicker class which performs an optimized equivalent of a distance test on each transformed point and picks the closest. Originally the crosshairs and coordinates were rendered to a bitmap that was converted to an icon and then set as a mouse cursor. This worked fine except that it caused a Security Exception if the chart control was used in an online XBAP application. To overcome this, I now turn off the

cursor, and then render a software cursor in the Adorner Layer of the Chart Control. The code for displaying the coordinates on the actual mouse cursor can still be found in theMouseCursorCoordinateDrawer class which uses a WPFCursorFromBitmap class that handles removing the old Icon handle from system space everytime it is updated, otherwise you will find the system suddenly running out of space to put GDI objects and you will have to reboot your machine everytime you use the chart control. The Adornerversion being used has a little bit of lag, but it's not too bad, and it's what the Adorner layer is for. The AdornerCursorCoordinateDrawer inherits from Adorner. The adorner layer seems to exist on the chart control only when it's visible, so the AdornerCursorCoordinateDrawer is added to the chart control when it is made visible, and removed when the chart control is made not visible as such: Collapse | Copy Code

public XYLineChart() { ... adorner = new AdornerCursorCoordinateDrawer (clippedPlotCanvas, shapeTransform); ... } void clippedPlotCanvas_IsVisibleChanged (object sender, DependencyPropertyChangedEventArgs e) { if (this.IsVisible && adornerLayer == null) { adornerLayer = AdornerLayer.GetAdornerLayer(clippedPlotCanvas); adornerLayer.Add(adorner); } else if (adornerLayer != null) { adornerLayer.Remove(adorner); adornerLayer = null; } }

The adorner draws the cursor in the OnRender method. When the cursor is locked onto the nearest point it draws the cursor like this: Collapse | Copy Code

// Draw the little circle around the lock point Point point = elementTransform.Transform(lockPoint); drawingContext.DrawEllipse(null, new Pen(blackBrush, 3), point, 2.5, 2.5); drawingContext.DrawEllipse (null, new Pen(new SolidColorBrush(Colors.White), 2), point, 2.5, 2.5); // Draw the big yellow circle Pen yellowPen = new Pen(new SolidColorBrush(Colors.Yellow), 2); Pen blackPen = new Pen(blackBrush, 3); drawingContext.DrawEllipse(null, blackPen, mousePoint, radius, radius); drawingContext.DrawEllipse(null, yellowPen, mousePoint, radius, radius);

Otherwise it draws the cursor like this: Collapse | Copy Code

// Draw the target symbol Pen blackPen = new Pen(blackBrush, .7); drawingContext.DrawEllipse(null, blackPen, mousePoint, radius, radius); drawingContext.DrawLine(blackPen, new Point (mousePoint.X - radius * 1.6, mousePoint.Y), new Point(mousePoint.X - 2, mousePoint.Y)); drawingContext.DrawLine(blackPen, new Point (mousePoint.X + radius * 1.6, mousePoint.Y), new Point(mousePoint.X + 2, mousePoint.Y)); drawingContext.DrawLine(blackPen, new Point (mousePoint.X, mousePoint.Y - radius * 1.6), new Point(mousePoint.X, mousePoint.Y - 2)); drawingContext.DrawLine(blackPen, new Point (mousePoint.X, mousePoint.Y + radius * 1.6), new Point(mousePoint.X, mousePoint.Y + 2));

When adding text to the cursor, I first need to work out how many decimal places to use to display a value accurate down to one pixel. This is done by looking at the Log10 of the distance between 2 adjacent pixels after they have been transformed to the chart coordinates. The code for this looks like this: Collapse | Copy Code

// Works out the number of decimal places required to show the // difference between // 2 pixels. E.g. if pixels are .1 apart then use 2 places etc Rect rect = inverse.TransformBounds(new Rect(0, 0, 1, 1)); int xFigures = Math.Max(1,(int)(Math.Ceiling(-Math.Log10(rect.Width)) + .1)); int yFigures = Math.Max(1,(int)(Math.Ceiling(-Math.Log10(rect.Height)) + .1)); // Number of significant figures for the x coordinate string xFormat = "#0." + new string('#', xFigures); /// Number of significant figures for the y coordinate string yFormat = "#0." + new string('#', yFigures);

The coordinate text is then drawn in a box like this: Collapse | Copy Code

string coordinateText = coordinate.X.ToString(xFormat) + "," + coordinate.Y.ToString(yFormat); drawingContext.PushTransform(new ScaleTransform(1, -1)); FormattedText formattedText = new FormattedText (coordinateText, CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Arial"), 10, blackBrush); Pen textBoxPen = new Pen(new SolidColorBrush (Color.FromArgb(127, 255, 255, 255)), 1); Rect textBoxRect = new Rect (new Point(mousePoint.X + radius * .7, -mousePoint.Y + radius * .7), new Size(formattedText.Width, formattedText.Height)); double diff = textBoxRect.Right + 3 ((FrameworkElement)AdornedElement).ActualWidth;

if (diff > 0) textBoxRect.Location = new Point(textBoxRect.Left - diff, textBoxRect.Top); drawingContext.DrawRectangle(textBoxPen.Brush, textBoxPen, textBoxRect); drawingContext.DrawText(formattedText, textBoxRect.Location); drawingContext.Pop();

Copying to the clipboard Currently the chart needs to be copied to the clipboard as a bitmap if it is to be pasted into any other app. I would anticipate that sometime in the future the chart could be copied as a XAML package, but at the moment nothing s this clipboard format, which is a shame, because I would really like to be able to paste vector graphics objects into Microsoft Word 2007 documents. I tried going down the convert to VML route but I haven't finished that yet as there are some issues. So currently the chart is converted to a bitmap using theChartUtilities.CopyFrameworkElementToBitmap method which looks like this: Collapse | Copy Code

public static System.Drawing.Bitmap CopyFrameworkElementToBitmap (FrameworkElement copyTarget, double width, double height) { if (copyTarget == null) return new System.Drawing.Bitmap((int)width, (int)height); System.Drawing.Bitmap bitmap; // Convert from a WPF Bitmap Source to a Win32 Bitmap using (MemoryStream outStream = CopyFrameworkElementToMemoryStream(copyTarget, width, height, new BmpBitmapEncoder())) { bitmap = new System.Drawing.Bitmap(outStream); } return bitmap; }

That's not very exciting, is it. What it is doing is it is usingChartUtilities.CopyFrameworkElementToMemoryStream to save the chart control to a bitmap in a memory stream, and then it is loading that memory stream back into a System.Drawing.Bitmap. TheCopyFrameworkElementToMemoryStream method is below. Note that it changes the DPI of the render target as a way of scaling the chart to the bitmap. Collapse | Copy Code

public static MemoryStream CopyFrameworkElementToMemoryStream (FrameworkElement copyTarget, double width, double height, BitmapEncoder enc) { // Store the Frameworks current layout transform, as this will be // restored later Transform storedTransform = copyTarget.LayoutTransform; // Set the layout transform to unity to get the nominal width and height copyTarget.LayoutTransform = new ScaleTransform(1, 1); copyTarget.UpdateLayout();

double baseHeight = copyTarget.ActualHeight; double baseWidth = copyTarget.ActualWidth; // Now scale the layout to fit the bitmap copyTarget.LayoutTransform = new ScaleTransform(baseWidth / width, baseHeight / height); copyTarget.UpdateLayout(); // Render to a Bitmap Source, note that the DPI is changed for the // render target as a way of scaling the FrameworkElement RenderTargetBitmap rtb = new RenderTargetBitmap( (int)width, (int)height, 96d * width / baseWidth, 96d * height / baseHeight, PixelFormats.Default); rtb.Render(copyTarget); // Convert from a WPF Bitmap Source to a Win32 Bitmap MemoryStream outStream = new MemoryStream(); enc.Frames.Add(BitmapFrame.Create(rtb)); enc.Save(outStream); // Restore the Framework Element to it's previous state copyTarget.LayoutTransform = storedTransform; copyTarget.UpdateLayout(); return outStream; }

Points of Interest I had a problem with the grid lines flickering when they were recalculated after the pan or zoom changed. This was fixed by adding them to the chart inside the MeasureOverride method. I've found that it looks nice to add a filled background to lines added to the chart. So that lines aren't covered up by the polygons I add all the filled polygons first, and then add the lines on top.

History   

10th January 2007 - Initial article 11th January 2007 - Fixed a bug found by Josh Smith where the adorner cursor wasn't being removed when the mouse went off the control during a pan 10th December 2012 - Major changes so called it version 2. Added bar charts, axis overrides, zoom with mouse wheel, and an override library that uses Direct2D to render the chart.

License This article, along with any associated source code and files, is licensed under A Public Domain dedication

WebCam Library for WinForm and WPF with C# and VB.NET Project Description Developer can add one line of code for display video from webcam and capture image from webcam. It provide dialog for resolution setting and advance setting (Flip,Rotate, Brightness etc.) by adding one line of code.

WPF UI Example

Sample Code for Display Video from WebCam WPF with C#

WebCam

webcam = new WebCam();

//ing Image Control Element

webcam.InitializeWebCam(ref imgVideo);

//start webcam video playing webcam.start();

//stop or pause video playing webcam.stop();

//continue playing after stop state webcam.continue();

C# for Show Resolution Setting and Video Format Dialog

webcam.config();

C# for Show Advance Setting Dialog

webcam.config2();

Simple MVVM Pattern in WPF This article describes the basic use and functionality of the MVVM pattern in WPF. The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft which is specialized in the Presentation Model design pattern. It is based on the Model-view-controller pattern (MVC), and is targeted at modern UI development platforms (WPF and Silverlight) in which there is a UX developer who has different requirements than a more "traditional" developer. MVVM is a way of

creating client applications that leverages core features of the WPF platform, allows for simple unit testing of application functionality, and helps developers and designers work together with less technical difficulties. VIEW: A View is defined in XAML and should not have any logic in the code-behind. It binds to the view-model by only using data binding. MODEL: A Model is responsible for exposing data in a way that is easily consumable by WPF. It must implement INotifyPropertyChanged and/or INotifyCollectionChanged as appropriate. VIEWMODEL: A ViewModel is a model for a view in the application or we can say as abstraction of the view. It exposes data relevant to the view and exposes the behaviors for the views, usually with Commands. Getting Started:      

Creating a WPF Project. Open Visual Studio 2010. Go to File => New => Project Select Window in installed templates Select WPF Application Enter the Name and choose the location. Click OK

Now create three folders in root application. Name should be Model,View,ViewModel and now add a new class in Model folder. My class name is and add this namespace using System.ComponentModel; .cs public class : INotifyPropertyChanged { private int Id; private string firstName; private string lastName; private string city; private string state; private string country; public int Id { get { return Id; } set { Id = value; OnPropertyChanged("Id"); } } public string FirstName {

get { return firstName; } set { firstName = value; OnPropertyChanged("FirstName"); } } public string LastName { get { return lastName; } set { lastName = value; OnPropertyChanged("LastName"); } } public string City { get { return city; } set { city = value; OnPropertyChanged("City"); } } public string State { get { return state; } set { state = value; OnPropertyChanged("State"); } } public string Country { get {

return country; } set { country = value; OnPropertyChanged("Country"); } } #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } #endregion } Now right click on ViewModel folder and add a new class. ViewModel.cs using System.Windows.Input; using System.ComponentModel; class ViewModel { private IList<> _sList; public ViewModel() { _sList = new List<> { new {Id = 1,FirstName="Raj",LastName="Beniwal",City="Delhi",State="DEL",Country="INDIA"}, new {Id=2,FirstName="Mark",LastName="henry",City="New York", State="NY", Country="USA"}, new {Id=3,FirstName="Mahesh",LastName="Chand",City="Philadelp hia", State="PHL", Country="USA"}, new {Id=4,FirstName="Vikash",LastName="Nanda",City="Noida", State="UP", Country="INDIA"}, new {Id=5,FirstName="Harsh",LastName="Kumar",City="Ghaziabad ", State="UP", Country="INDIA"}, new {Id=6,FirstName="Reetesh",LastName="Tomar",City="Mumbai ", State="MP", Country="INDIA"},

new {Id=7,FirstName="Deven",LastName="Verma",City="Palwal", State="HP", Country="INDIA"}, new {Id=8,FirstName="Ravi",LastName="Taneja",City="Delhi", State="DEL", Country="INDIA"} }; } public IList<> s { get { return _sList; } set { _sList = value; } } private ICommand mUpdater; public ICommand UpdateCommand { get { if (mUpdater == null) mUpdater = new Updater(); return mUpdater; } set { mUpdater = value; } } private class Updater : ICommand { #region ICommand public bool CanExecute(object parameter) { return true; } public event EventHandler CanExecuteChanged; public void Execute(object parameter) { } #endregion } } Now let's move on View, Add a new windows in View Folder.

MainPage.xaml <Window x:Class="WpfMVVMSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="485" Width="525"> <Button Content="Update" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="310,40,0,0" Name="btnUpdate"

VerticalAlignment="Top" Width="141" Command="{Binding Path=UpdateCommad}" /> App.xaml.cs Now bind on application startup. protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); WpfMVVMSample.MainWindow window = new MainWindow(); ViewModel VM = new ViewModel(); window.DataContext = VM; window.Show(); } Run the application to see the result.

Image 1. Click on row.

Image 2. You can edit detail in textboxes and click update button.

Image 3.

Digital Clock in C# Yesterday I was working on one of my applications that needs to include a digital clock. So I was looking for an easy way or a small piece of code to include it. From Googling I saw that there is plenty of code available but unfortunately almost all of it contains a lot of time consuming code. So then I tried myself and did it by few lines. That's why I come here to share this with those friends who are beginners in C#, not for experts. Much introduction here, so let's start. 1. Create a new Windows Forms Application project. Name the project as you wish. 2. Then go to the form's design view. Our form will look such as below:

It contains a label at the center of the form and a timer control. So drag a label and a timer from the toolbox onto the form. Change the color of the label and expand it's text size. 3. Right-click on the form and select view code. In this page,write your timer_tick event for the timer control that you selected from the toolbox. This is the most important part here. Have a look: private void timer1_Tick(object sender, EventArgs e) { label1.Text = DateTime.Now.ToString("HH:mm:ss"); } Here DateTime represents an instance of a time of a day and Now represents the current date and time of your computer. HH:mm:ss respresents the time format as you wish to display it in this format. 4. Most functions are complete, but as a clock it should dynamically change it's time. Correct? For that we don't use any code here. Right-click on the timer control of design page and go to properties. Change the Interval and set it to 1. Your clock is ready to operate..!! That's the end today.Happy Coding..

to add your contents and source code to this article

Article Extensions Contents added by Shuvro Pall on Jun 15, 2012 File: CodeImplementation.zip

5.Want to fancy it more?Add am/pm information with it.Have a look: private void timer1_Tick(object sender, EventArgs e) { label1.Text = DateTime.Now.ToString("hh:mm:ss tt"); }

Notice, tt is added with previous HH:mm:ss format which represents am or pm information. Now your clock looks like:

Ok, this is the end for today.Happy coding..

Validating Input - WPF MVVM .

Introduction When writing data-centric apps, validating input becomes an important design consideration. One of the most important considerations is when to validate the input. Do you validate the input only after the has tried to save the data, or do you validate as the is busy entering the data. Personally, I believe that it is better to validate as the is busy entering the data, before the tries to submit it. Luckily for us, the .NET Framework comes with an Interface for just such situations, the IDataErrorInfo Interface. By implementing this interface in your models, combined with WPF data binding, input validation becomes automatic, and implementing validation becomes merely a choice of how to present the validation errors to the . When working with the MVVM design pattern, the interface makes it easy to keep code out of your code behind and in your ViewModel and Model. This article is a tutorial on implementing this interface in an MVVM WPF application, ensuring no code is written in the View. The demo app will consist simply of a form where a can enter a new Product.

Requirements To follow the tutorial only requires Visual Studio (I have used Visual C# 2010 Express, but you can use any version). I have also used an MVVM Application Template which can be ed from here. I will also assume you have a basic understanding of the MVVM pattern, as well as of WPF Data Binding, as the tutorial will concentrate on theIDataErrorInfo Interface implementation. So let's begin...

The Model After installing the MVVM application template, open up Visual Studio, start a new project using the template and that will give you a working skeleton of an MVVM app. I start off most projects creating the models, as I tend to develop the models and Data storage structures side by side. As this example won't actually do any saving or retrieving of data, we can just create a model. Our application spec requires only one form where a can enter and save a Product's Product Name, Height and Width. This means we only need one model, a Product with three Properties,ProductName, Width and Height. Right click on the models folder, and add a new class called Product. Make the class public so we can use it. Add three public properties to your Product class ProductName(string), Widthand Height, both int. Add the using statement System.ComponentModel at the top of the file. This is the namespace where the IDataErrorInfo Interface resides. Make sure your class implements the IDataErrorInfointerface by adding the name of the interface after the class declaration like this: Collapse | Copy Code

class : IDataErrorInfo

Once you have done that, intellisense should show you a little blue line underneath the declaration. If you hover the cursor over the blue line, you will be given the choice of whether you want to implement the Interface or explicitly implement the interface. To implement the IDataErrorInfo Interface, a class needs to expose two readonlyproperties, an error property and an item property which is an indexer that takes a string parameter representing the name of one of the implementing classes properties. Whether you implicitly or explicitly implement the interface will depend on whether you have any other indexers in your class and need to differentiate them. For us, we only need to implicitly implement the interface so go ahead and choose this option. This will generate the property stubs for the required properties with generic throw new NotImplementedExceptions and should look like this: Collapse | Copy Code

public string Error { get { throw new NotImplementedException();} } }

public string this[string columnName] { get { throw new NotImplementedException(); } }

The error property returns a string that indicates what is wrong with the whole object, while the Item property (implemented as an indexer so will show as public string this[columnName]) returns a string indicating the error associated with the particular property ed as the parameter. If the property is valid according to the validation rules you specify, then the Item property returns an empty string. For the most part, one can leave theError property as NotImplemented, while implementing individual validations for each property of your class within the indexer. Basically, the way it works, it checks which property is being validated, using the parameter ed as input, and then validates that property according to rules you specify. For our validations, let's assume that each product's name must be longer than 5 letters, that the Height should not be greater than the Width and obviously each property should not be null. Let's implement each validation in its own method which can be called from the Item property as required. Let each validation method return a string. If the validation fails, the method should return an appropriate error message, else it should return an empty string. Each validation method is very similar, they each check first whether the property has a value, if so they check whether the value conforms to the right rule, else it returns an error message. If the property is valid, it es all tests and an empty string is returned. In the Item indexer itself, we declare a string validationResult to hold our error message, and then use a switch statement to call the right validation method depending on the property being validated, asg the result to our validationResult string which is then returned to the calling function. That completes our model and also all that is required to implement theIDataErrorInfo interface and our code should now look like this: Collapse | Copy Code

public class Product:IDataErrorInfo { #region state properties public string ProductName{ get; set; } public int Width { get; set; } public int Height { get; set; } #endregion public void Save() { //Insert code to save new Product to database etc } public string Error { get { throw new NotImplementedException(); } } public string this[string propertyName]

{ get { string validationResult = null; switch (propertyName) { case "ProductName": validationResult = ValidateName(); break; case "Height": validationResult = ValidateHeight(); break; case "Width": validationResult = ValidateWidth(); break; default: throw new ApplicationException("Unknown Property being validated on Product."); } return validationResult; } } private string ValidateName() { if (String.IsNullOrEmpty (this.ProductName)) return "Product Name needs to be entered."; else if(this.ProductName.Length < 5) return "Product Name should have more than 5 letters."; else return String.Empty; } private string ValidateHeight() { if (this.Height <= 0) return "Height should be greater than 0"; if (this.Height > this.Width) return "Height should be less than Width."; else return String.Empty; } private string ValidateWidth() { if (this.Width <= 0) return "Width should be greater than 0"; if (this.Width < this.Height) return "Width should be greater than Height."; else return String.Empty; } }

I added a Save method which I left blank. This is where in a real app, you would save the product to your database or XML file, etc.

The ViewModel Now that we have our model all worked out, we need to decide how to represent that model to the . In our case, the best plan would be to create a current instance of our Product class with empty properties, which the can fill in via a TextBox and 2 Sliders and then save if all

properties are valid. So, delete the default MainView.xaml andMainViewModel.cs files from your project, and add a new class NewProductViewModel.cs in your ViewModels folder, and a new Window NewProductView.xaml in your Views folder. Expand the App.xaml node in your solution explorer and open App.xaml.cs. This is where the application's OnStartup method is located and we need to change the method to look like this: Collapse | Copy Code

private void OnStartup(object sender, StartupEventArgs e) { // Create the ViewModel and expose it using the View's DataContext Views.NewProductView newProductView = new Views.NewProductView(); NewProducts.Models.Product newProduct = new Models.Product(); newProductView.DataContext = new ViewModels.NewProductViewModel(newProduct); newProductView.Show(); }

Open up your NewProductViewModel file and add System.Windows, System.Windows.Input,System.ComponentModel, s.Comma nds and s.Models using directives. Make sure thatNewProductViewModel inherits from ViewModelBase. Add a private method Exit where we will close the application like so: Collapse | Copy Code

private void Exit() { Application.Current.Shutdown(); }

and an ICommand ExitCommand which we will use to bind to our Exit MenuItem like so: Collapse | Copy Code

private DelegateCommand exitCommand; public ICommand ExitCommand { get { if (exitCommand == null) { exitCommand = new DelegateCommand(Exit); } return exitCommand; } }

Let your NewProductViewModel class implement the IDataErrorInfo and INotifyPropertyChangedinterfaces by adding them after ViewModelBase in your class declaration. Let intellisense generate the property stubs for the IDataErrorInfo interface for you automatically.

Add a readonly instance of your Product class as a private field in your NewProductViewModel class calledcurrentProduct, and add a constructor that accepts a Product as a parameter and sets currentProduct to point to that instance like this: Collapse | Copy Code

private readonly Product currentProduct; public NewProductViewModel(Product newProduct) { this.currentProduct = newProduct; }

We then need to set up some public properties for our view to bind to, that represent the properties forcurrentProduct. These properties need to implement INotifyPropertyChanged, and must set and get the relevant properties on our currentProduct and need to look like so, ing that NewProductViewModelinherits ViewModelBase which implements an OnPropertyChanged handler: Collapse | Copy Code

public string ProductName { get { return currentProduct.ProductName; } set { if (currentProduct.ProductName != value) { currentProduct.ProductName = value; base.OnPropertyChanged("ProductName"); } } }

For the Width and Height properties, we have a dependency in that the Height must not be more than theWidth. This means that if one property changes, then we need to check and see if the other property is still valid. The easiest way to accomplish this is to act as if both properties have changed when either property changes. We can do this by calling base.OnPropertyChanged for both properties when either one changes. So our Propertydeclarations should now look like this: Collapse | Copy Code

public int Width { get { return currentProduct.Width; } set { if (this.currentProduct.Width != value) { this.currentProduct.Width = value; base.OnPropertyChanged("Width"); base.OnPropertyChanged("Height"); } } }

public int Height { get { return currentProduct.Height; } set { if (this.currentProduct.Height != value) { this.currentProduct.Height = value; base.OnPropertyChanged("Height"); base.OnPropertyChanged("Width"); } } }

All that is left now is to set our IDataErrorInfo to return the relevant error and item properties from our base Product class. For the error property, we just convert currentProduct to an IDataErrorInfo and call the error property. For the Item property the procedure is the same, just adding a call to ensure that CommandManagerupdates all validations like so: Collapse | Copy Code

public string Error { get { return (currentProduct as IDataErrorInfo).Error; } } public string this[string columnName] { get { string error = (currentProduct as IDataErrorInfo)[columnName]; CommandManager.InvalidateRequerySuggested(); return error; } }

The only thing left to do is to implement an ICommand (SaveCommand) to save the currentProduct to file and a save method that the SaveCommand can call. The save method simply calls currentProduct.Save(), and theSaveCommand creates a DelegateCommand that es the Save method as a parameter like so: Collapse | Copy Code

private DelegateCommand saveCommand; public ICommand ExitCommand { get { if (exitCommand == null) { exitCommand = new DelegateCommand(Exit); } return exitCommand;

} } private void Save() { current.Save(); }

This will give us a Command to bind to our Save button on our NewProductView. This concludes the basics of ourNewProductViewModel, completing everything required to ensure that the is kept informed about the validity of each property. All that's left to implement now is the actual view.

The View Our View for this exercise will be very simple. It will consist of a menu at the top with the typical File - Exit menu items which the can use to close the app, a labelled TextBox which the will use to enter the Product Name for the new Product, 2 labelled sliders, each with its value presented with a label, which the will use to input the Heightand Width, and a button which the can use to save the Product. Open up the XAML file for NewProductView and add a namespace reference to your Commands namespace, this will allow us to add a CommandReference to our View which we can use to create an InputBinding so that the can close the application using Ctrl-X. Collapse | Copy Code

xmlns:c="clr-namespace:NewProducts.Commands"

then create a reference to our ExitCommand in our ViewModel like so: Collapse | Copy Code

<Window.Resources>

then create the InputBinding like this: Collapse | Copy Code

<Window.InputBindings>

Next, delete the default grid, and replace it with a Dock. Inside the dock add a Menu and set itsDock.Dock property to top. In this Menu, add a MenuItem headered _File, and within this MenuItem create another MenuItem headered E_xit. Set the Command property of this Exit MenuItem to Bind to ourExitCommand command and set its InputGestureText to Ctrl-X like this:


<Menu Dock.Dock="Top"> <MenuItem Header="_File"> <MenuItem Command="{Binding ExitCommand}" Header="E_xit" InputGestureText="Ctrl-X" />

In the Dock, below the Menu, add a Grid and define 3 Columns and 4 Rows on the grid. Set the first Column's width to Auto and the second to 5*, and the third to *, set all the Row Heights to Auto. In the first row of the grid, place a Label in the first column and a TextBox in the second. In the next 2 Rows, place a label in the first Column, a slider in the second Column and another label in the third Column. Name the sliders using x: notation, sliHeightand sliWidth respectively. Set the Content of the labels to Product Name :, Width : and Height : respectively, and name the TextBoxes appropriately, i.e. txtProductName, txtHeight and txtWidth. For the Text property of txtProductName, create a Binding and set the Path of the Binding to the ProductName Property on ourNewProductViewModel. For the sliders, create the Binding on the Value Property. Within each Binding, set ValidatesOnDataErrors to True and the UpdateSourceTrigger property toPropertyChanged. For the labels in the third Column, which will display the sliders value, we set up a Binding for theContent property setting the Binding's ElementName to the appropriate slider and the Path to the slider's Valueproperty. In the fourth Row of the Grid place a Button, set its Content to _Save and create a Binding for its Command property whose Path points to our SaveCommand on the ViewModel. The XAML for the Window content should now look something like this: Collapse | Copy Code

/> /> /> />

<Slider Grid.Row="1" Grid.Column="1" Margin="3" x:Name="sliHeight" Maximum="100" Value="{Binding Path=Height, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"/> <Slider Grid.Row="2" Grid.Column="1" Margin="3" x:Name="sliWidth" Maximum="100" Value="{Binding Path=Width, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"/> <Button Grid.Row="3" Grid.Column="1" Command="{Binding Path=SaveCommand}" Content="_Save" HorizontalAlignment="Right" Margin="4,2" MinWidth="60"/>

And there we have it! If you run the application now, you will see that each data entry control has a red border around it, and that once you enter a valid entry in each Control, the red border disappears. Unfortunately, the application still has some serious shortcomings. It is still possible to Save the Product even though the Data is not valid. Also the default red border thing is really not as informative as a serious application should try to be, so we really should try and implement something a little more friendly to let the know more precisely what is going on.

Cleaning Up Saving Invalid Data With regard to the being able to Save invalid data, the best solution would be to disable the Save button until all properties are valid. This would mean defining a way in which the Button's IsEnabled property is set to false if any of the properties are invalid. Seeing how the IsEnabled property is a boolean, it would be simplest if we had a boolean property in our NewProductViewModel to which we could bind to the Button's IsEnabled property. So open up the NewProductViewModel.cs file, and define a bool property AllPropertiesValid which returns aprivate field allPropertiesValid like this: Collapse | Copy Code

private bool allPropertiesValid = false; public bool AllPropertiesValid { get { return allPropertiesValid; } set { if (allPropertiesValid != value) { allPropertiesValid = value; base.OnPropertyChanged("AllPropertiesValid");

}

The next question arises as to where to set this property. The IDataErrorInfo Item indexer validates each property, but has no information with regard to any other properties' validation status, so we need some way to store the validation status of each property and then only change each specific status in the Item indexer. Since the Itemindexer has an input parameter declaring the name of the property being checked, I thought the best option would be to use a Dictionary, where the Key could be the name of the property and the Value a boolean representing the status of that property. So in our indexer, we can set the status of the current property being checked, and then search the Dictionary to see if all properties are valid and set AllPropertiesValid as appropriate. Thus we need to declare a Dictionary<string,bool> called validProperties and initiate the Dictionary with the three properties in the constructor like this: Collapse | Copy Code

private Dictionary<string,bool> validProperties; public NewProductViewModel(Product newProduct) { this.currentProduct = newProduct; this.validProperties = new Dictionary<string, bool>(); this.validProperties.Add("ProductName", false); this.validProperties.Add("Height", false); this.validProperties.Add("Width", false); }

We then need to implement a private method that will check whether all the properties are valid and setAllPropertiesValid appropriately: Collapse | Copy Code

private void ValidateProperties() { foreach(bool isValid in validProperties.Values ) { if (isValid == false) { this.AllPropertiesValid = false; return; } } this.AllPropertiesValid = true; }

Then we need to set the correct status in the Item indexer and call this method to set our boolean, so we need to change the Item indexer to this: Collapse | Copy Code

string IDataErrorInfo.this[string propertyName] { get { string error = (current as IDataErrorInfo)[propertyName];

validProperties[propertyName] = String.IsNullOrEmpty(error) ? true : false; ValidateProperties(); CommandManager.InvalidateRequerySuggested(); return error; } }

Once that is complete, we just need to set up the Binding in the NewProductView. Open up theNewProductView.xaml file and change the Button declaration to this: Collapse | Copy Code

<Button Grid.Row="3" Grid.Column="1" Command="{Binding Path=SaveCommand}" Content="_Save" HorizontalAlignment="Right" Margin="4,2" MinWidth="60" IsEnabled="{Binding Path=AllPropertiesValid}"/>

And we are good to go. Press F5 and you should see that the button is only enabled once all properties are valid. As soon as a property becomes invalid, the button becomes disabled.

Informing the There are various ways to inform the what is going on, and the exact implementation would obviously be subject to company standards, etc. One of the most common ways would be to show a ToolTip when the hovers over theTextBox showing them an error message. Another way would be to have labels underneath the TextBox showing the error message. Knowing that the TextBox has a Validation.HasError property and that the property returns a list of validation errors each of whose ErrorContent property returns the specific error message, implementing a Trigger that binds to the HasError property and that shows a ToolTip when the TextBox has an error is relatively trivial. In the Grid, add a Grid.Resources tag (You could define this under Window.Resources or even underApplication.Resources to ensure Application wide adherence). Under grid resources, define a Style whoseTargetType is TextBox. Under Style.Triggers, add a Trigger whose Property is set toValidation.HasError and fires when the property returns true. In this Trigger add a Setter where theProperty is set to ToolTip, and create a Binding for the Value property, that binds to itself (TextBox) and where the Path returns the ErrorContent of the first error in the list like this: Collapse | Copy Code

<Style TargetType="{x:Type TextBox}"> <Style.Triggers> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>

We then need to create another Style for the Sliders, which I have implemented in exactly the same manner. And there you have it. A friendly form where a can add a new Product, and can only save the information if she has entered valid data in all fields. If any field is incorrect, she is informed as to the reason in a fairly unobstrusive way, and can easily correct any errors.

Conclusion The IDataErrorInfo interface is really a useful interface to use in data input validation, making things really simple to implement. I hope you had as much fun reading this tutorial as I had writing it. .NET rocks!!!

Wpf Tut 471mh

Overview 3e4r5l

More details w3441

Related Documents 3m3m1z

Wpf Tut 471mh

Wpf-mcqs w4a1p

Wpf Architecture l6i6e

Annealing Tut 1o2q69

Matlab Tut 2c361i

Polyline In Wpf 4t5q5t