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: