WPF Tutorial

Monday, November 11, 2013

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>

WPF WrapPanel Example

WPF > Controls > Layout > WrapPanel

WrapPanel arranges child elements in sequential position from left to right and breaking content to the next line.

Example:
XAML

<Window x:Class="WpfApplication1.MainWindow"

            <Button Width="132">Button 1</Button>
            <Button>Button 2</Button>
            <Button>Button 3</Button>
            <Button>Button 4</Button>
            <TextBox Height="23" TextWrapping="Wrap" Text="TextBox" Width="120"/>
            <TabControl Height="52" Width="134">
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
            </TabControl>
        </WrapPanel>
</Window>

DockPanel Example WPF

WPF > Controls > Layout > DockPanel

With DockPanel you can arrange child elements either horizontally or vertically, relative to each other.
Note: LastChildFill property: the last child element of a DockPanel always fills the remaining space!

Example:

XAML:

<Window x:Class="WpfApplication1.MainWindow"

<DockPanel LastChildFill="True" >

        <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
            <TextBlock Foreground="Black">Top</TextBlock>
        </Border>
        <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
            <TextBlock Foreground="Black">Bottom</TextBlock>
        </Border>
        <Border Width="60" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
            <TextBlock Foreground="Black">Left</TextBlock>
        </Border>
        <Border BorderBrush="Black" BorderThickness="1">
            <TextBlock Foreground="Black">Content (remaining space)</TextBlock>
        </Border>
    </DockPanel>

</Window>

Canvas WPF Example

WPF > Controls > Layout > Canvas

Canvas is an area within you can set position of child elements by using coordinates that are relative to the Canvas area.
Canvas is the only panel element that has no inherent layout characteristics.
Note: Vertical alignment and horizontal alignment have no effect inside a Canvas.

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">

    <Canvas Height="400" Width="400">
        <Canvas Height="153" Width="154" Top="0" Left="0" Background="Red">
            <Ellipse Fill="#FFF4F4F5" Height="56" Stroke="Black" Width="154"/>
            <Rectangle Width="40" Height="50" RenderTransformOrigin="1.9,1.12" Canvas.Left="71" Canvas.Top="26" >
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF7C1C1C" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>
    </Canvas>
</Window>

Search This Blog

Monday, November 11, 2013