Part 17 ProgressBar Control in WPF

In this Video We will learn to use the ProgressBar Control in WPF. This video show the way to animate a progress bar using c#. Also it covers that how Duration Structure and DoubleDuration class Works.  It also shows the differences between if IsIndetermination is true and if this is false.

Part 16 ScrollViewer Control in WPF

In this video we will learn to use the ScrollViwer Control in WPF. This video shows the types of scrollling which ScrollViewer Supports.
These are
1. Physical Scrolling
2. Logical Scrolling

Part 15 Slider Control in WPF

In this video we will learn to use the slider control in WPF. We will also learn to use the following properties of a Slider control.
1. TickFrequency
2.TickPlacement
3.IsSnapToTickEnabled

Also we learn to use the following event of a Slider Contol.

ValueChanged

Part 14 ContextMenu in WPF

In this video we will learn to use the context menu in wpf. This Video also covers the different types of events, and setting the menu icon for ContextMenu Item.

ComboBox Events And Dynamic Data Binding in WPF - Part - 13

XML To Create the Comboboxes

<Canvas>

        <StackPanel Orientation="Horizontal" Height="50" Canvas.Left="130" Canvas.Top="118">

            <TextBlock Margin="0,0,20,0">Country</TextBlock>

            <ComboBox Name="cmbCountry" Width="200" Height="30" SelectionChanged="cmbCountry_SelectionChanged"

                      VerticalAlignment="Top" DisplayMemberPath="Name" SelectedValuePath="Id" SelectedValue="{Binding Id}">

            </ComboBox>

        </StackPanel>

        <StackPanel Orientation="Horizontal" Height="50" Canvas.Left="130" Canvas.Top="212">

            <TextBlock Margin="0,0,30,0">State</TextBlock>

            <ComboBox Name="cmbStates" Width="200" Height="30" VerticalAlignment="Top" DisplayMemberPath="Name" SelectedValuePath="Id">

            </ComboBox>

        </StackPanel>

    </Canvas>

Methods to fetch the data from MSSQL using Entity Framework

 void FillCountries()

        {

            WpfTutorialsEntities obj = new WpfTutorialsEntities();

            List<Country> lst = obj.Countries.ToList();

            cmbCountry.ItemsSource = lst;

        }

        private void cmbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            int CountryId = Convert.ToInt32(cmbCountry.SelectedValue);

            WpfTutorialsEntities obj = new WpfTutorialsEntities();

            List<State> lst = obj.States.Where(x => x.CountryId == CountryId).ToList();

            cmbStates.ItemsSource = lst;

        }

MSSQL Script To Create the Tables and Insert the Data

USE [WpfTutorials]

GO

/****** Object:  Table [dbo].[Countries]    Script Date: 11/05/2016 23:13:59 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[Countries](

[Id] [int] IDENTITY(1,1) NOT NULL,

[Name] [varchar](256) NOT NULL,

PRIMARY KEY CLUSTERED 

(

[Id] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

SET IDENTITY_INSERT [dbo].[Countries] ON

INSERT [dbo].[Countries] ([Id], [Name]) VALUES (1, N'USA')

INSERT [dbo].[Countries] ([Id], [Name]) VALUES (2, N'UK')

INSERT [dbo].[Countries] ([Id], [Name]) VALUES (3, N'India')

SET IDENTITY_INSERT [dbo].[Countries] OFF

/****** Object:  Table [dbo].[States]    Script Date: 11/05/2016 23:13:59 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[States](

[Id] [int] IDENTITY(1,1) NOT NULL,

[CountryId] [int] NOT NULL,

[Name] [varchar](256) NOT NULL,

PRIMARY KEY CLUSTERED 

(

[Id] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

SET IDENTITY_INSERT [dbo].[States] ON

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (1, 1, N'Alabama')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (2, 1, N'Alaska')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (3, 2, N'Lancashire')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (4, 2, N'London')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (5, 3, N'Goa')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (6, 3, N'Delhi')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (7, 3, N'Rajasthan')

INSERT [dbo].[States] ([Id], [CountryId], [Name]) VALUES (8, 3, N'Gujrat')

SET IDENTITY_INSERT [dbo].[States] OFF

/****** Object:  ForeignKey [FK__States__Name__0519C6AF]    Script Date: 11/05/2016 23:13:59 ******/

ALTER TABLE [dbo].[States]  WITH CHECK ADD FOREIGN KEY([CountryId])

REFERENCES [dbo].[Countries] ([Id])

GO

Note : To create the Entity Data Model please watch the Video Tutorial. It will guide you step by step to create the EDMX file.

ListBox Control in WPF - Part 11

We can use the ListBox control in case when we have multiple options and we have to choose one from them. 

To create a simple ListBox Control we can use the following syntax.

<Window x:Class="WpfTutorials.ListBoxExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBoxExample" Height="300" Width="300">
    <Grid>
        <ListBox Height="100" Width="200">
            <ListBoxItem>
                List box item 1
            </ListBoxItem>
            <ListBoxItem>
                List box item 2
            </ListBoxItem>
            <ListBoxItem>
                List box item 3
            </ListBoxItem>
            <ListBoxItem>
                List box item 4
            </ListBoxItem>
            <ListBoxItem>
                List box item 5
            </ListBoxItem>
            <ListBoxItem>
                List box item 6
            </ListBoxItem>
        </ListBox>
    </Grid>

</Window>

The output should be

Custom Content in ComboBox :

Apart from the above, WPF provides us a way through which we can create a very rich ListBox control. The ListBox is a Content Control so we can make our own design interface inside ListBox.

The following example creates a ListBox which has ColorNames and ColorBox next to the ColorNames.

<Window x:Class="WpfTutorials.ListBoxExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBoxExample" Height="300" Width="300">
    <Grid>
        <ListBox Height="100" Width="200">
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Pink" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Pink</TextBlock>
                </StackPanel>

            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Red" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Red</TextBlock>
                </StackPanel>
                
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Green" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Green</TextBlock>
                </StackPanel>

            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Yellow" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Yellow</TextBlock>
                </StackPanel>

            </ListBoxItem>
        </ListBox>
    </Grid>

</Window>

The above code will produce the following output.

Let's look this in action

ComboBox Control in WPF - Part 12

We can use the ComboBox control in case when we have multiple options and we have to choose one from them. Except the selected item other items inside ComboBox control becomes hidden. Due to this feature ComboBox takes less space than the listbox control.

To create a simple ComboBox we can use the following syntax.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30">

            <ComboBoxItem>Sample Item 1</ComboBoxItem>

            <ComboBoxItem>Sample Item 2</ComboBoxItem>

            <ComboBoxItem>Sample Item 3</ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>

The above code will create a simple ComboBox control. Which is very straightforward.

Custom Content in ComboBox :

Apart from the above, WPF provides us a way through which we can create a very rich ComboBox control. The ComboBox is a Content Control so we can make our own design interface inside ComboBox.

The following example creates a ComboBox which has ColorNames and ColorBox next to the ColorNames.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30">

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Red" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Red</TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Green" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Green</TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Blue" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Blue</TextBlock>

                </StackPanel>

            </ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>

 IsEditable Property :

IsEditable Property provides the facility to user to enter an option in ComboBox which is not present inside that. Suppose there is a list of cities in the ColorBox but there is no such City name inside that from where user belongs. In this case user can write his/her own city name. This functionality can be achieved by doing IsEditable Property set to True of ComboBox. Following code creates an editable ColorBox.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30" IsEditable="True">

            <ComboBoxItem>NewYork</ComboBoxItem>

            <ComboBoxItem>London</ComboBoxItem>

            <ComboBoxItem>New Castle</ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>