Tab Control In WPF

In this article i am going to explain how to use tab control in WPF.In WPF, we use

the TabControl to create a tabbeduser interface. In eachtab, we add sub-controls to a Grid. And

each tab has a Header.By default in each Tab Controls two tab itemwill be present. If you want

to add more tab item then right click on tab item header and add tab items to your tab control.

This is the snap shot of the tab Control.

Example:

TabControl.Xaml

<TabControl Name="tabControl1"VerticalAlignment="Top" Width="375>

<TabItem Name="tabItem1" >

<TabItem.Header>

<WrapPanel Height="30" Width="63">

<TextBlock Text="January" />

<Button Content="X" Click="Close1_Click" />

</WrapPanel>

</TabItem.Header>

<Grid>

<Image Source="/jan.jpg" Name="image1" Width="364" />

</Grid>

</TabItem>

</TabControl>

In the above XAML Code there is a single tab item named tabItem1, as I told you can add any

number of tab items to your tab control.

Tab Item Header:

In the tab item header I have placed two child elements such as Text block and Button inside

the wrap panel ,I have used a click event on button to close the tab item.

Tab Item Body:

In the body of tab item I have placed a grid and added an image to the grid using image control.

Inside a Grid you can add any child controls to the Grid.

In the above tab control Snapshot . When you click on January button the respective tab Item

will get added to the tab control. If the tab item January is already present in the tab control,

again if the user click’s the January button then January tab will get added to the tab control.

This is the code behind of Tab control .

TabControl.cs

using System;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Windows;

usingSystem.Windows.Controls;

usingSystem.Windows.Data;

usingSystem.Windows.Documents;

usingSystem.Windows.Input;

namespaceTabControlInWPF

{

publicpartialclassMainWindow : Window

{

publicbool flag1;

publicbool flag2;

publicMainWindow()

{

InitializeComponent();

tabControl1.Visibility = Visibility.Collapsed;

}

privatevoidJanuary_Click(object sender, RoutedEventArgs e)

{

if (flag1 == true)

{

tabControl1.Items.Add(tabItem1);

flag1 = false;

tabItem1.Visibility = Visibility.Visible;

tabControl1.Visibility = Visibility.Visible;

}

else

{

tabControl1.SelectedItem = tabItem1;

tabControl1.Visibility = Visibility.Visible;

tabItem1.Visibility = Visibility.Visible;

}

}

privatevoidFebruary_Click(object sender, RoutedEventArgs e)

{

if (flag2 == true)

{

tabControl1.Items.Add(tabItem2);

flag2 = false;

tabControl1.Visibility = Visibility.Visible;

tabItem2.Visibility = Visibility.Visible;

}

else

{

tabControl1.SelectedItem = tabItem2;

tabControl1.Visibility = Visibility.Visible;

tabItem2.Visibility = Visibility.Visible;

}

}

privatevoid Close1_Click(object sender, RoutedEventArgs e)

{

tabControl1.Items.Remove(tabItem1);

flag1 = true;

}

privatevoid Close2_Click(object sender, RoutedEventArgs e)

{

tabControl1.Items.Remove(tabItem2);

flag2 = true;

}}}

Source Code :Download

A Simple Image Slide Show Using First, Next, Previous and Last Button in WPF

          

In this article we will see how to create a simple image slide show in WPF. In an Image Control, I am fetching images from database using First, Next, Previous and Last Button .I am using Code-First Approach to create database in SQL Server .The images which are displaying in image control are taken from the database. For your convenience I am storing images of numbers from 1 to 10 in database. Before proceeding to this article I request you to go through my previous article, how to store and retrieve images from SQL Server Database in WPF.

 Now I will explain the working of all 4 buttons events one by one as shown below.

First Button:

When you click on first button, the very first image from the database will be fetched into the image control as shown in below snapshot.

The code behind for first button click event is:

private void First Click(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();//Context Class name

           var result = (from t in DB.Images

                          select t.ImageToByte).FirstOrDefault();

            Stream StreamObj = new MemoryStream(result); //converting bytes to stream

            BitmapImage BitObj = new BitmapImage();

            BitObj.BeginInit();

            BitObj.StreamSource = StreamObj;

            BitObj.EndInit();

            this.image2.Source = BitObj

        }

Next Button:

When you click on next button, the next image from the database will be fetched into image control. Snapshot of Next Click event is shown below.

The code behind for next button click event is:

      private void Next_Click(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();

            if (count < (DB.Images.Count() - 1))

            {

                count++;

                var result = DB.Images.OrderBy(t => t.Id).Skip(count).FirstOrDefault();

                Stream StreamObj = new MemoryStream(result.ImageToByte);

                BitmapImage BitObj = new BitmapImage();

                BitObj.BeginInit();

                BitObj.StreamSource = StreamObj;

                BitObj.EndInit();

                this.image2.Source = BitObj;

              

            }

            else

            {

                var result = DB.Images.Select(c => c).FirstOrDefault();

                Stream StreamObj = new MemoryStream(result.ImageToByte);

                BitmapImage BitObj = new BitmapImage();

                BitObj.BeginInit();

                BitObj.StreamSource = StreamObj;

                BitObj.EndInit();

                this.image2.Source = BitObj;

                count = 0;

            }

        }

Previous Button:

When you click the previous button, the previous image of the current image will be fetched into the image control. Here the previous image is image of number 1 so number will display again in previous click. See the below snapshot of previous button click.

 The code behind for previous button click event is:

   private void Previo_Click(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();

            count--;

            if (count < 0)

            {

                count = DB.Images.Count();

            }

            var result = DB.Images.OrderBy(t => t.Id).Skip(count).Take(1);

            foreach (var s1 in result)

            {

                Stream StreamObj = new MemoryStream(s1.ImageToByte);

                BitmapImage BitObj = new BitmapImage();

                BitObj.BeginInit();

                BitObj.StreamSource = StreamObj;

                BitObj.EndInit();

                this.image2.Source = BitObj;

            }

        }

Last Button:

When you click on last button, the last image from the database will be fetched into image control, the last image in database is image of number 10.So obviously number 10 will be fetched into image control, see the below snapshot of last button event

 The code behind for last button is

private void Last_Click(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();

            count = -1;

            var result = DB.Images.OrderByDescending(c => c.Id).FirstOrDefault();

            Stream StreamObj = new MemoryStream(result.ImageToByte);

            BitmapImage BitObj = new BitmapImage();

            BitObj.BeginInit();

            BitObj.StreamSource = StreamObj;

            BitObj.EndInit();

            this.image2.Source = BitObj;

        }

Summary: In this article I have shown how to create a simple slide show using First, Next, Previous and Last Button in WPF. I have uploaded the source code also. If you have any queries regarding this article please do comment. Thanks for reading my article.

Source Code :Download