Rectangle Control in WPF

Rectangle Control in WPF Window Based

Rectangle Means From Latin: rectus "right" + angle A 4-sided polygon where all interior angles are 90° The rectangle, like the square, is one of the most commonly known quadrilaterals. It is defined as having all four interior angles 90° (right angles). The Rectangle object represents a rectangle shape and draws a rectangle with the given height and width. The <Rectangle /> element of  XAML draws a rectangle. The Height and Width attributes represent the height and width of the rectangle. The Stroke and StrokeThickness represents the color and thickness of the rectangle boundary.

Example:

XAML Code:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="312" Width="240" Loaded="Window_Loaded">
    <Grid>
     <Rectangle Margin="14,40,0,0" Name="rectangle1" Stroke="Violet" StrokeThickness="9" Height="100" 
     VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" Fill="Pink" RadiusX="6" RadiusY="6" />
    </Grid>
</Window> 

in This code The Fill attributes fill a rectangle with a color. The following code fills a rectangle with pink color.
By setting RadiusX and RadiusY attributes, you can also draw a rectangle with rounded corders.

Output:

Image Control in WPF

Image Control in WPF Window

The Image control provides rich features to display images of various formats like JPEG, PNG, ICO, BMP, GIF etc. Displaying an image is as simple as setting the Image. Source property to the appropriate image file path. No special coding is required to work with different file formats.

Example:

XAML CODE:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="312" Width="240" Loaded="Window_Loaded">
    <Grid>
        <Image Margin="8,9,0,0" Name="image1" Stretch="Fill" Height="231" 
         VerticalAlignment="Top" HorizontalAlignment="Left" Width="197" />
    </Grid>
</Window>

.CS code to Add Image in Image Control-

private void Window_Loaded(object sender, RoutedEventArgs e)
{
            image1.Source = new BitmapImage(new Uri("2.jpeg", UriKind.Relative));
}

Designed Output-

WrapPanel Control in WPF

WrapPanel Control in WPF Window Based

Wrap panel wraps all child elements to new lines if no space is left. The wrap panel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no space is left. The Orientation can be set to Horizontal or Vertical.The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list. The WrapPanel is often used with items of the same size, but its not a requirement.

Example:

XAML Code:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="336" Width="430" Loaded="Window_Loaded">
    <Grid x:Name="LayoutRoot" Background="White" >
        <WrapPanel Orientation="Vertical" Margin="0,0,0,-39">
            <Image Source="2.jpeg" Width="102" Height="57"  />
            <Ellipse Width="80" Height="80" Fill="Orange" />
            <Image Source="2.jpeg" Width="100.224" Height="66"  />
            <Ellipse Width="40" Height="40" Fill="Green" />
            <Ellipse Width="20" Height="20" Fill="Blue" />
            <Rectangle Width="80" Height="80" Fill="DarkGoldenrod"></Rectangle>
            <Rectangle Width="60" Height="60" Fill="Chartreuse"></Rectangle>
            <Rectangle Width="40" Height="40" Fill="Coral"></Rectangle>
            <Rectangle Width="20" Height="20" Fill="DarkGoldenrod"></Rectangle>
        </WrapPanel>
    </Grid>
</Window>

UniformGrid Control in WPF

UniformGrid Control in WPF Window Based

The UniformGrid Control arranges content in its area so that all the cells in the grid have the same dimension. It represents a perfect solution if someone prefers to prevent the headache of ordering or arrange controls within an ordinary Grid.

First, the Uniform grid belongs to the System.Windows.Controls. Primitives. It could be found in the tool box at the bottom. A UniformGrid show child elements or control in columns and rows of the same size. Or we can say The number of cells is adjusted to accommodate the number of controls. 

Example:

XAML Code:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417" Loaded="Window_Loaded">
    <Grid>
         <UniformGrid Margin="15,15,15,15" Name="uniformGrid1">
                <Image Source="2.jpeg"  Name="img1" ></Image>
                <Image Source="2.jpeg"  Name="img2" ></Image>
             <Image Source="2.jpeg"  Name="img3" ></Image>
            <Line></Line>
             <Line></Line>
             <Line></Line>
                <Image Source="2.jpeg"  Name="img4" ></Image>
                <Image Source="2.jpeg"  Name="img5" ></Image>
                <Image Source="2.jpeg"  Name="img6" ></Image>
        </UniformGrid>
        </Grid>
</Window> 

Output-

TreeView Control in WPF

TreeView Control in WPF Window Based

A TreeView Shows data in a hierarchical Form in a parent child relationship where a parent node can be expanded .You can use the TreeView control to display information from a wide variety of data sources such as an XML file, site-map file, string, or from a database. or you can say TreeView control is a hierarchical structure to display the data. its look like a tree. it also contain root node, parent node and child node like tree.

Features:

• Internet Explorer Favorites style view.
• Append a number to any node, allowing you to create an Outlook style folder list with message counts.
• Choose Font and Color on an item-by-item basis, and set the control's back color.
• Bolding of items
• Info Tip (multi-line tooltip) support with full control over Info Tip color
• Works with Microsoft or API ImageList.
• Item check boxes
• Full-Row select mode
• Single-Click expand mode
• Supports Two Images per item: one standard icon and a state icon.
• Disable Custom Draw for maximum speed
• Speed-optimized Clear method

Example of TreeView Control:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417" Loaded="Window_Loaded">
    <Grid>
        <ListView>
            <TreeView Name="tree1" Background="LightCyan"  >
                <TreeViewItem Header="File" Background="Red" FontSize="15">
                </TreeViewItem>
                <TreeViewItem Header="Edit" Background="Red" FontSize="15" >
                </TreeViewItem>
            </TreeView>
        </ListView>
    </Grid>
</Window> 

XAML .CS Code

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Dictionary<string, List<string>> items = new Dictionary<string, List<string>>()
          {
             {"File",new List<string>() {"New","Open","ADD","Save","Save As","Close"}},
             {"Edit",new List<string>() {"Undo","Cut","Copy","Paste","Delete"}},
         };
            foreach (TreeViewItem tv in tree1.Items)
            {
                foreach (string item in items[tv.Header.ToString()])
                    tv.Items.Add(item);
            }
        } 

Designed Output-

Separator Control in WPF

Separator Control in WPF Window Based

This article explains how to draw a separator in a GroupBox. The separator separates the OK and Cancel buttons from the rest of the content in that GroupBox. This is a UI design seen relatively often in WPF Windows Application..

Example:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid Height="260" Width="302">
        <GroupBox Name="settingsGroupBox"
  Header="Select Course" 
  Margin="4,4,32,99" Background="Azure">
            <StackPanel Height="141" Width="259" Background="Honeydew">
                <StackPanel.Resources>
                    <!-- Give the CheckBoxes some room to breath. -->
                    <Style TargetType="CheckBox">
                        <Setter Property="Margin" Value="4" />
                    </Style>
                </StackPanel.Resources>

                <!-- Some CheckBoxes that represent settings. -->
                <CheckBox Name="chk1" >
                    .Net FrameWork With C#
                </CheckBox >
                <CheckBox  Name="chk2">
                    java And Advanced Java
                </CheckBox>
                <CheckBox  Name="chk3">
                    PHP,CAKE PHP,Smarty
                </CheckBox>
                <CheckBox  Name="chk4" >
                    Oracle,Sql Server
                </CheckBox>

                <!-- A separator between settings and buttons. -->
                <Line
      Margin="0,4"
      SnapsToDevicePixels="True"
      Stroke="{Binding
                ElementName=settingsGroupBox,
                Path=BorderBrush}"
      Stretch="Fill"
      X1="0" X2="1" 
      />

                <!-- The standard OK and Cancel Buttons. -->
                <StackPanel
      HorizontalAlignment="Right"
      Orientation="Horizontal"
      >
                    <StackPanel.Resources>
                        <Style TargetType="Button">
                            <Setter Property="Margin" Value="4" />
                            <Setter Property="Width" Value="60" />
                        </Style>
                    </StackPanel.Resources>
                    <Button Click="Button_Click">_OK</Button>
                    <Button Click="Button_Click_1">_Cancel</Button>
                </StackPanel>
            </StackPanel>
        </GroupBox>

    </Grid>
</Window> 

.CS Code:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (chk1.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk1.Content);
            }
            else if (chk2.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk2.Content);
            }
            else if (chk3.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk3.Content);
            }
            else if (chk4.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk4.Content);
            }
        } 

Design Output:

ViewBox control in WPF

ViewBox control in WPF Window Based

The Viewbox element automatically scales its content to fill the space available.the Viewbox control, which expands a control to fill the available space (while keeping the aspect ratio) but the control can assume absolute size. The view box could only have one child; else if a view box contains more than one child, an argument exception will be thrown. Viewbox and Viewport are the properties of ImageBursh, DrawingBrush, TileBrush and VisualBrush elements in Windows Presentation Foundation. With these two attributes we can crop images and shapes.

Example of  ViewBox Control In WPF 
 
Real Image:

Figure 2: See the image after selecting an area in ViewBox Control.

XAML Code:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="400" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400" />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Stretch="Uniform"  >
            <Rectangle.Fill>
                <!-- Here By passing the four value in ViewBox I will select a area from Real Image-->
                <ImageBrush ImageSource="D:\Documents and Settings\All Users\Documents\My Pictures
\Sample Pictures\Sunset.jpg" Viewbox="0.2,0.3,0.1,0.5"   />
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window> 

After set the property Stretch="Uniform" of image we will get:

Slider Control in WPF

Slider Control in WPF Window Based

Slider can be used as a selector for Diffrent values.  These values (which are double) can have a minimum and maximum.  You can put different tick values for these values to split this interval.  On the other hand you can set some values for intervals and delays between movements and clicks on ticks.

Important Properties :

• AutoToolTipPlacement: Specifies if a ToolTip must be shown and where it will be displayed.
• Delay: A value in milliseconds that specifies how long RepeatButton should wait before an  decrease or increase.
• Interval: a value in milliseconds that specifies the time for waiting between repeats.
• LargeChange: The amount that should be added or subtracted to or from Value attribute when user clicks on scrollbar.
• Maximum: Maximum value for slider.
• Minimum: Minimum value for slider.
• Orientation: Gets to values, Horizontal or Vertical and specifies the orientation of slider Control.
• SmallChange: The amount that should be added or subtracted to or from Value attribute when user clicks on thumb.
• TickPlacement: Determines the place that ticks should be placed.
• Ticks: A required attribute and a set of double values for ticks.
• Value: ByDefault selected value for tick.

Syntax Of Slider Control:

<Slider Name="Slider1" Width="200" Height="20"
        Background="Gray" Maximum="80" Minimum="0">           
</Slider> 

In Above Code The Width and Height property represent the width and the height of the control. The Name property represents name of the control, which is a unique identifier of the control. The Background property is used to set the background color of the control. The Minimum and Maximum properties represent the minimum and maximum values of the slider range.

Example:

Original Image:

 

When we increase the slider the image zooms.

XAML Code -

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid Background="LightCoral">
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle Width="250" HorizontalAlignment="Left" Margin="25,0,0,0" 
Height="200" VerticalAlignment="Top">
            <Rectangle.Fill>
                <ImageBrush x:Name="imageBrush" ImageSource= 

"D:\Documents and Settings\All Users\
Documents\My Pictures\Sample Pictures\Sunset.jpg"/>
            </Rectangle.Fill>
        </Rectangle>
        <Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"
            Value="1"
            Delay="100"
            Interval="5"
            TickPlacement="BottomRight"
            Minimum="1"
            Maximum="10" AutoToolTipPlacement="BottomRight"
            ValueChanged="slider_ValueChanged"
            Grid.Row="1" Margin="25,0,0,0" HorizontalAlignment="Left" Width="250" 
Height="30" VerticalAlignment="Top">
        </Slider>
    </Grid>
</Window> 

 .CS Code- 

private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
            ImageBrush imageBrush = this.FindName("imageBrush") as ImageBrush;
            imageBrush.Viewbox = new Rect(0.3, 0.3, 1 / value, 1 / value);
        }
 

ScrollViewer Control In WPF

ScrollViewer Control In WPF Window Based

WPF provides a ScrollViewer control that is a container for other controls and creates a scrollable area. It is simple to create and add to a XAML file. The developer can choose to display a horizontal and/or vertical scroll bar. For this article, I chose to hide the scoll bar so that the user must scroll by clicking on the content in the ScrollViewer..In WPF scrolling or you can say the ScrollViewer is used when we want to fit the large amounts of content in a limited amount of space. The ScrollViewer control provides a convenient way to enable scrolling of content in WPF. ScrollViewer encapsulated the ScrollBars within it and displays it whenever it is required. As the ScrollViewer implements IScrollInfo is the main scrolling area inside the scrollviewer. ScrollViewer also responds to mouse and keyboard commands.

 

Syntax of  ScrollViewer:

<ScrollViewer HorizontalScrollBarVisibility="Visible" >
</ScrollViewer>

Example:

XAML Code-

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" >
            <Grid Background="Aqua">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="60" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Label Margin="5" Grid.Column="0" Grid.Row="0">List of Student
                    :</Label>
                <Label Margin="5" Grid.Column="0" Grid.Row="1">Address:</Label>
                <Label Margin="5" Grid.Column="0" Grid.Row="2">Comment:</Label>
                <RichTextBox Margin="5" Grid.Column="1" Grid.Row="0" MinWidth="100" />
                <RichTextBox Margin="5" Grid.Column="1" Grid.Row="1" MinWidth="100" />
                <RichTextBox Margin="5" Grid.Column="1" Grid.Row="2" MinWidth="100" />
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>

Password Control in WPF

Password Control in WPF Window Based

The password box control is a special type of TextBox designed to enter passwords. The typed in characters are replaced by asterisks. Since the password box contains a sensible password it does not allow cut, copy, undo and redo commands.

The PasswordBox control allows you to hide the characters and limit the number of characters to be typed in the editable area. 

 

Properties:

Password property contains the password in the PasswordBox and PasswordChar is the masking character for the password.

Following tag create the Password Box control with the masking character as * and maximum password length of 50 characters.

The MaxLength property is used to get and set the maximum number of characters you can enter in a PasswordBox.
 

Event: To handle the event add the PasswordChanged="Password1_OnPasswordChanged" 

PasswordChanged event is main event of the control and is raised when password property 

has been changed in the xaml and write the handler as

protected void Password1_OnPasswordChanged(object sender, RoutedEventArgs e)
{
     Console.WriteLine(PasswordBox1.Password);
}

Example

XAML Code- 

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid Background="AliceBlue">
        <PasswordBox Height="23" Margin="85,91,0,0" Name="passwordBox1"

 VerticalAlignment="Top" HorizontalAlignment="Left" Width="102" Password="gupta"/>
        <TextBox Height="23" Margin="85,56,113,0" Name="textBox1" 

 VerticalAlignment="Top" HorizontalAlignment="Left" Width="102  " />
        <Label Height="23" HorizontalAlignment="Left" Margin="17,56,0,0" Name="label1" 
VerticalAlignment="Top" Width="81">Username</Label>
        <Label Height="23" HorizontalAlignment="Left" Margin="17,91,0,0" Name="label2" 
VerticalAlignment="Top" Width="81">Password</Label>
        <Button Margin="85,130,0,0" Name="button1" Click="button1_click" HorizontalAlignment="Left" 
Width="85" Height="29" VerticalAlignment="Top">Login</Button>
    </Grid>
</Window>

Tab Control Using WPF

Tab Control Using WPF Window Based

Each TabControl can contain Multiple collection of TabItem elements. TabItem has two specific attributes. Header is the string value that you see on top of each tab and IsSelected is a Boolean value that specifies if a tab is selected. Bassically only one tab can be selected at a time otherwise the first tab in list will be selected.

Two elements play main roles in Creating a tab control: TabControl and TabItem. TabControl is the container of one or more TabItem elements.

Syntax of TabControl:

  <TabControl Margin="41,46,0,0" Name="tabControl1" Height="100"  VerticalAlignment="Top"  

HorizontalAlignment="Left" Width="200" />

In the following tag I create the TabControl in which Height is height of the TabContr, Name is the name of the 

TabControl, The Background and Foreground properties represent the background and foreground colors of a 

TabControl. The following code  sets the name, height, and width of a RadioButton control. The code also sets 

horizontal alignment to left and vertical alignment to top

<TabControl>
    <TabItem Header="Tab 1">Home</TabItem>
    <TabItem Header="Tab 2">Services</TabItem>

    <TabItem Header="Tab 3">Help</TabItem>
    <TabItem Header="Tab 4">Contact Us</TabItem>
</TabControl>

XAML Code for Tab Control-

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid>
        <TabControl Margin="19,21,0,0" Name="tabControl1" Height="267" VerticalAlignment="Top" 
HorizontalAlignment="Left" Width="256" IsTabStop="True">
            <TabItem Header="Home" IsSelected="True" IsTabStop="False">
                <Image  ></Image>                
            </TabItem>
            <TabItem Header="Courses" IsSelected="True" Background="Goldenrod">
                <TextBlock Background="Gray">
           </TextBlock>
            </TabItem>
            <TabItem Header="Contact Us" IsSelected="True">                
            </TabItem>
        </TabControl>    
    </Grid>
</Window>