WPF Tutorial

Tuesday, November 12, 2013

WPF TreeView HierarchicalDataTemplate

WPF > Controls > ItemsControl > TreeView > HierarchicalDataTemplate

WPF TreeView HierarchicalDataTemplate binding to object with multiple child collections

XAML:

<Window x:Class="WpfApplication1.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" Background="#FFF3EEEE" Loaded="Window_Loaded"
     xmlns:local="clr-namespace:WpfApplication1">

        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:Person}" ItemsSource="{Binding Persons}">
                <TextBlock Text="{Binding Title}" />
            </HierarchicalDataTemplate>
       </TreeView.Resources>
    </TreeView>
</Window>

C# Code:

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    ///

public class Person

    {
            public Person()
            {
                this.Persons = new ObservableCollection<Person>();
            }

public string Title { get; set; }

            public ObservableCollection<Person> Persons { get; set; }
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Person root = new Person() { Title = "Manager" };
            Person item1 = new Person() { Title = "Team Leader1" };
            item1.Persons.Add(new Person() { Title = "Emp 1" });
            item1.Persons.Add(new Person() { Title = "Emp 2" });
            root.Persons.Add(item1);
            root.Persons.Add(new Person() { Title = "Admin" });
            tv.ItemsSource = root.Persons;
        }
    }
}

Monday, November 11, 2013

TreeView WPF Example

WPF > Controls > ItemsControl > TreeView

TreeView displays hierarchical data in a tree structure and items can expand and collapse.
It can contain a collection of objects of any type (string, image, panel).

Example:

<Window x:Class="WpfApplication1.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" Background="#FFF3EEEE">
    <TreeView HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517">
        <TreeViewItem Header="Teachers">
            <TreeViewItem Header="Dan"/>
            <TreeViewItem Header="John"/>
        </TreeViewItem>
        <TreeViewItem Header="Students">
            <TreeViewItem Header="Eric" IsExpanded="True">
                <StackPanel Height="102" VerticalAlignment="Top" Width="177">
                    <TabControl Height="100">
                        <TabItem Header="School">
                            <Grid Background="#FFE5E5E5">
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Eric Elementary School" VerticalAlignment="Top"/>
                            </Grid>
                        </TabItem>
                        <TabItem Header="Notes">
                            <Grid Background="#FFE5E5E5"/>
                        </TabItem>
                    </TabControl>
                </StackPanel>
            </TreeViewItem>
        </TreeViewItem>
    </TreeView>
</Window>

Other examples:

HierarchicalDataTemplate

ListBox WPF Example

WPF > Controls > ItemsControl > ListBox

ListBox contains a list of selectable items.
It can contain a collection of objects of any type (string, image, panel).

1. ListBox ItemsSource example:

XAML:

<Window x:Class="LIstBoxExample.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:LIstBoxExample"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <src:Cars x:Key="carsData"/>
        </Grid.Resources>
        <ListBox ItemsSource="{StaticResource carsData}" DisplayMemberPath="Model" Margin="114,0,207,0"/>
    </Grid>
</Window>

Code:

using System;

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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;

namespace LIstBoxExample

{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

public class Car

    {
        public String Model { get; set; }
        public Car(String model)
        {
            this.Model = model;
        }
    }

public class Cars : ObservableCollection<Car>

    {
        public Cars()
        {
            Add(new Car("Audi"));
            Add(new Car("Mercedes"));
        }
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

2. ListBox Items example:

XAML:

<ListBox x:Name="lstItems" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="171" Margin="324,10,0,0"/>

Code:

// Add string to ListBox

lstItems.Items.Add("String Item");

// Add date to ListBox

DateTime dateTime1 = DateTime.Now;
lstItems.Items.Add(dateTime1);

// Add a Rectangle to the ListBox.

            Rectangle rect1 = new Rectangle();
            rect1.Width = 20;
            rect1.Height = 20;
            rect1.Fill = Brushes.Red ;
            lstItems.Items.Add(rect1);

WPF DataGrid

WPF > Controls > ItemsControl > DataGrid

DataGrid control displays a collection of data in rows and columns in a customizable way.

The DataGrid is a control that can display and edit data from many different sources (SQL Server, Oracle, LINQ query, etc)

Columns can display text, controls (comboxes, images, buttons, or any content contained in a template).

DataGridTemplateColumn is used to display data defined in a template.

Events:

LoadingRow

Examples:

RadioButton WPF Example

WPF > Controls > ContentControl > RadioButton

RadioButton is a button that can be selected by a user and has two states: true or false.
Note: A user can select only one item at a time within a RadioButton group by placing controls inside a parent or by setting GroupName.
XAML

<Window x:Class="WpfApplication1.MainWindow"

</Window>

C# Code

private void RadioButton_Checked(object sender, RoutedEventArgs e)

{
   ShowRB(sender);
}
void ShowRB(object sender)
{
   RadioButton li = (sender as RadioButton);
   MessageBox.Show("You clicked " + li.Content.ToString());
}

ToolTip WPF Example

WPF > Controls > ContentControl > ToolTip

Tooltip is a small pop-up window that is displayed when a user move the mouse pointer over an element.
The content of a tooltip can contain text, images, shapes, etc.

Example:

<Window x:Class="WpfApplication1.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" Background="#FFF3EEEE">

<TextBox HorizontalAlignment="Left" Height="29" VerticalAlignment="Top">TextBox with ToolTip

        <TextBox.ToolTip>
            <ToolTip>
                <DockPanel >
                    <TextBlock Text="ToolTip Information"/>
                </DockPanel>
            </ToolTip>
        </TextBox.ToolTip>
    </TextBox>
</Window>

Search This Blog