WPF CONTROLS - MANOHAR GOUD 9866550012.

K MANOHAR GOUD

9866550012

WPF TextBox A TextBox control accepts user input on a Form. The TextBox in WPF is same as 'asp:textbox' in asp.net Its a lightweight control we used for accepting the input from user in WPF.In a WPF its very easy to set the properties and style to the TextBox  here we take a overview of the TextBox and there properties Some Examples and there outputs

WPF Text box with multiple lines anf vertical and horizontal bar WPF Text box with accept return

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to WPF textbox. Height we are setting an height for WPF textbox Width we are setting an Width for WPF textbox Background using a background property we set background color to the WPF textbox Margin We set margin to WPF textbox from Left,Top,Right,Bottom AcceptsReturn We set AcceptsReturn="True" when we requre a enter in WPF textbox Opacity Opacity can be used to make WPF textbox transparent or opaque. TextWrapping Its allow to wrap text when we required a text on new line in WPF textbox

WPF Watermark TextBox

Here we see how WPF TextBox control to get "watermark" behavior.
When a watermarked TextBox is empty, it displays a message to the user for his convenience.What value need to put.
Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.

.xaml code

        <StackPanel Margin="50">
                <TextBox x:Name="userNameWatermarked" Height="25" Width="250" Foreground="Gray" Text="UserName" GotFocus="userNameWatermarked_GotFocus"></TextBox>
        <TextBox x:Name="userName" Height="25" Visibility="Collapsed" Width="250" LostFocus="userName_LostFocus" ></TextBox>

        <TextBox x:Name="passwordWatermarked" Height="25" Foreground="Gray" Text="Password"  Width="250" Margin="0,5,0,5" GotFocus="passwordWatermarked_GotFocus"></TextBox>
        <PasswordBox x:Name="password" Height="25" LostFocus="password_LostFocus" Margin="0,5,0,5" Width="250" Visibility="Collapsed"></PasswordBox>
             
            </StackPanel>


.xaml.cs code

       public wpfwatermarktextbox()
        {
            InitializeComponent();
        }

        private void userNameWatermarked_GotFocus(object sender, RoutedEventArgs e)
        {
            userNameWatermarked.Visibility = System.Windows.Visibility.Collapsed;
            userName.Visibility = System.Windows.Visibility.Visible;
            userName.Focus();
        }

        private void userName_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(this.userName.Text))
            {
                userName.Visibility = System.Windows.Visibility.Collapsed;
                userNameWatermarked.Visibility = System.Windows.Visibility.Visible;
            }
        }

        private void passwordWatermarked_GotFocus(object sender, RoutedEventArgs e)
        {
            passwordWatermarked.Visibility = System.Windows.Visibility.Collapsed;
            password.Visibility = System.Windows.Visibility.Visible;
            password.Focus();
        }

        private void password_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(this.password.Password))
            {
                password.Visibility = System.Windows.Visibility.Collapsed;
                passwordWatermarked.Visibility = System.Windows.Visibility.Visible;
            }
        }
       
Output

WPF Numeric Textbox

Many times we require a numeric textbox, A textbox which only accept the numbers from user. Here I show you how we achieve this in WPF textbox.

.xaml code

          <Grid>
        <TextBox Height="25" Width="150" x:Name="txtnumber" TextChanged="txtnumber_TextChanged"/>
    </Grid>
       
.xaml.cs code

 public partial class wpfnumerictextbox : Window
    {
        private string maintainsession;

        public wpfnumerictextbox()
        {
            InitializeComponent();
        }
       
        private void txtnumber_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (string.IsNullOrEmpty(((TextBox)sender).Text))
                maintainsession = "";
            else
            {
                double num = 0;
                bool success = double.TryParse(((TextBox)sender).Text, out num);
                if (success & num >= 0)
                {
                    ((TextBox)sender).Text.Trim();
                    maintainsession = ((TextBox)sender).Text;
                }
                else
                {
                    ((TextBox)sender).Text = maintainsession;
                    ((TextBox)sender).SelectionStart = ((TextBox)sender).Text.Length;
                }
            }
        }

    }
     

output

WPF AutoComplete Textbox

Many times we require a Autocomplete textbox,A textbox which give a user suggestion as user type.Here I show you how we achieve this in WPF textbox

.xaml code
          <Window.Resources>
        <DataTemplate x:Key="ListBoxSubCategoryListTemplate" DataType="{x:Type ListBoxItem}">
            <TextBlock x:Name="btnSubCategoryList" Background="Transparent" Text="{Binding}" Width="250"/>
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="btnSubCategoryList" Property="Background" Value="Red" />
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox x:Name="textBox1" TextChanged="txtname_TextChanged" Width="250"/>
            <ListBox x:Name="listBox1" SelectionChanged="listBox1_SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
          ItemTemplate="{StaticResource ListBoxSubCategoryListTemplate}"  Visibility="Collapsed" Width="250" />
        </StackPanel>
    </Grid>
       
.xaml.cs
     public partial class MainWindow : Window
    {
        List<string> nameList;
        public MainWindow()
        {
            InitializeComponent();
            nameList = new List<string>
            {
                "AA-01","AA-05","AA-03",
                "BA-06","CA-01","CA-08",
                "AA-10","CE-05","CE-15",
            };
        }

        private void txtname_TextChanged(object sender, TextChangedEventArgs e)
        {
            string typedString = textBox1.Text;
            List<string> autoList = new List<string>();
            autoList.Clear();

            foreach (string item in nameList)
            {
                if (!string.IsNullOrEmpty(textBox1.Text))
                {
                    string str = item.ToLower();
                    if (str.Contains(typedString.ToLower()))
                    {
                        autoList.Add(item);
                    }
                }
            }

            if (autoList.Count > 0)
            {
                listBox1.ItemsSource = autoList;
                listBox1.Visibility = Visibility.Visible;
            }
            else if (textBox1.Text.Equals(""))
            {
                listBox1.Visibility = Visibility.Collapsed;
                listBox1.ItemsSource = null;
            }
            else
            {
                listBox1.Visibility = Visibility.Collapsed;
                listBox1.ItemsSource = null;
            }
        }

        private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (listBox1.ItemsSource != null)
            {
                listBox1.Visibility = Visibility.Collapsed;
                if (listBox1.SelectedIndex != -1)
                {
                    textBox1.Text = listBox1.SelectedItem.ToString();
                }
            }
            listBox1.Visibility = System.Windows.Visibility.Collapsed;
        }
    }
 

WPF Textblock The Textblock in WPF is same as 'asp:label' in asp.net Its a lightweight control we used for showing the label in WPF.In a WPF its very easy to set the properties and style to the textblock he re we take a overview of the textblock and there properties Some Examples and there outputs

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to WPF textbox. Height we are setting an height for WPF textbox Width we are setting an Width for WPF textbox Background using a background property we set background color to the WPF textbox Foreground using a foreground property we set color to the WPF textblock FontSize using a fontSize property we set size to the WPF textblock Margin We set margin to WPF textbox from Left,Top,Right,Bottom Opacity Opacity can be used to make WPF textbox transparent or opaque. TextWrapping Its allow to wrap text when we required a text on new line in WPF textbox

WPF Button The Button in WPF is same as 'asp:button' in asp.net The Button element represents a WPF Button control in XAML. Some Examples and there outputs

Simple ComboBox

                <Button Height="30" Width="120" x:Name="wpfsimplebutton" Content="Click Me!">
            <Button.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Blue" Offset="0" />
                    <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush>
            </Button.BorderBrush>
        </Button>
                       

     <Button Height="30" Width="120" x:Name="wpfsimplebutton" Content="Click Me!">
            <Button.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Blue" Offset="0.1" />
                    <GradientStop Color="Orange" Offset="0.25" />
                    <GradientStop Color="Green" Offset="0.75" />
                    <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush>
            </Button.Background>
            <Button.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                    <GradientStop Color="Orange" Offset="0.25" />
                    <GradientStop Color="Green" Offset="1.0" />
                </LinearGradientBrush>
            </Button.Foreground>
        </Button>
                       

WPF Image

The Image class is used to load and view an image in WPF. This class displays .bmp, .gif, .ico, .jpg, .png, .wdp, and .tiff files. The Source property of Image class is the file an image displays. The Source property is a BitmapImage.

.xaml Output

<Grid>
        <Image Name="ImgControl" Source="http://wpftutorial.co/Images/WPFTutorialLogo.png" VerticalAlignment="Center" HorizontalAlignment="Center"  />
    </Grid>
       

WPF Image Effects

.xaml Output

   <Page.Resources>

        <Storyboard x:Key="StoryboardSample">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image">

                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </Page.Resources>

    <Grid>

        <Image Source="http://wpftutorial.co/Images/WPFTutorialLogo.png" 

        HorizontalAlignment="Center" VerticalAlignment="Center"

           Stretch="None">

            <Image.OpacityMask>

                <DrawingBrush Stretch="Fill" Viewbox="0 0 1 1" ViewboxUnits="Absolute">

                    <DrawingBrush.Drawing>

                        <GeometryDrawing Brush="White">

                            <GeometryDrawing.Geometry>

                                <EllipseGeometry x:Name="elipse" Center="0.5 0.5"

                                 RadiusY="{Binding RelativeSource={RelativeSource self},

                                                   Path=RadiusX}" />

                            </GeometryDrawing.Geometry>

                        </GeometryDrawing>

                    </DrawingBrush.Drawing>

                </DrawingBrush>

            </Image.OpacityMask>

        </Image>

    </Grid>

    <Page.Triggers>

        <EventTrigger RoutedEvent="Page.Loaded">

            <BeginStoryboard>

                <Storyboard TargetName="elipse" TargetProperty="RadiusX">

                    <DoubleAnimation From="0" To="1" Duration="0:0:2"

                                     AutoReverse="True" RepeatBehavior="Forever" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

        </Page.Triggers>

         

WPF Combobox

A ComboBox control is an items control that works as a ListBox control but only one item from the collection is visible at a time and clicking on the ComboBox makes the collection visible and allows users to pick an item from the collection.
A ComboBox control is a combination of three controls - A Button, a Popup, and a TextBox. The Button control is used to show or hide available items and Popup control displays items and let user select one item from the list. The TextBox control then displays the selected item.

Some Examples and there outputs

       <ComboBox  x:Name="lstexample" HorizontalAlignment="Center" VerticalAlignment="Center"  Height="25" Width="150" >

                    <ComboBoxItem >Mumbai</ComboBoxItem >

                    <ComboBoxItem >Pune</ComboBoxItem >

                    <ComboBoxItem >Chennai</ComboBoxItem >

                    <ComboBoxItem >Banglore</ComboBoxItem >

                    <ComboBoxItem >Delhi</ComboBoxItem >

               </ComboBox >

WPF Dropdown With Image .xaml code                   <Window.Resources>         <DataTemplate x:Key="ItemTemplate">             <StackPanel Orientation="Horizontal" Margin="0 5 0 5">                 <Image Width="50" Height="50" Stretch="Fill" Source="{Binding Photo}" VerticalAlignment="Center" HorizontalAlignment="Center"/>                 <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>             </StackPanel>         </DataTemplate>     </Window.Resources>     <Grid >         <ComboBox x:Name="lstwithimg" HorizontalAlignment="Center" VerticalAlignment="Top" ItemTemplate="{StaticResource ItemTemplate}" Height="50" Width="150"/>     </Grid> .xaml.cs            List<Employeedata> Employeedatalist = new List<Employeedata>();         public combobox()         {             InitializeComponent();             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Lighthouse.jpg", Name = "Lighthouse" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Jellyfish.jpg", Name = "Jellyfish" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Chrysanthemum.jpg", Name = "Chrysanthemum" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Koala.jpg", Name = "Koala" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Hydrangeas.jpg.jpg", Name = "Hydrangeas" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Lighthouse.jpg", Name = "Lighthouse" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Jellyfish.jpg", Name = "Jellyfish" });             lstwithimg.ItemsSource = Employeedatalist;         }     }     public class Employeedata     {         public int ID { get; set; }         public string Photo { get; set; }         public string Name { get; set; }     }     </Employeedata>      output WPF ListBox The ListBox control display a list of items. The user can select one or multiple items depending on the selection mode. The typical usage of a listbox in WPF is to bind its items to a list. The listbox is awesome for multiple selections and quick access for shorter lists. Some Examples and there outputs     <ListBox x:Name="lstexample" HorizontalAlignment="Center" VerticalAlignment="Center"  Height="200" Width="150">                     <ListBoxItem>Mumbai</ListBoxItem>                     <ListBoxItem>Pune</ListBoxItem>                     <ListBoxItem>Chennai</ListBoxItem>                     <ListBoxItem>Banglore</ListBoxItem>                     <ListBoxItem>Delhi</ListBoxItem>                             </ListBox>                               <ListBox x:Name="lstexample" HorizontalAlignment="Center" VerticalAlignment="Center"  Height="200" Width="150" SelectionMode="Multiple">             <ListBoxItem>Mumbai</ListBoxItem>             <ListBoxItem>Pune</ListBoxItem>             <ListBoxItem>Chennai</ListBoxItem>             <ListBoxItem>Banglore</ListBoxItem>             <ListBoxItem>Delhi</ListBoxItem>                     </ListBox>                          WPF Datgrid A DataGrid is a user interface component for displaying tabular data to the user, typically providing sorting and editing functionality, among others.The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data.The DataGrid in WPF is same as 'asp:Gridview' in asp.net  <DataGrid IsReadOnly="True" AutoGenerateColumns="False" x:Name="dg_SmeAFe">             <DataGrid.Columns>                 <DataGridTextColumn Binding="{Binding Path=ID}" Header="ID" />                 <DataGridTextColumn Binding="{Binding Path=Name}" Header="Name" />                 <DataGridTextColumn Binding="{Binding Path=Photo}" Header="Photo"/>                 <DataGridTemplateColumn Header="Image" IsReadOnly="True"  Width="*">                         <DataGridTemplateColumn.CellTemplate>                             <DataTemplate>                             <Image Source="{Binding Path=Photo}" Height="50" Width="50"/>                             </DataTemplate>                         </DataGridTemplateColumn.CellTemplate>                     </DataGridTemplateColumn>             </DataGrid.Columns>                  </DataGrid>                            WPF Nested Grid                      <Grid >         <DataGrid IsReadOnly="True" AutoGenerateColumns="False" x:Name="dg_SmeAFe">             <DataGrid.Columns>                 <DataGridTextColumn Binding="{Binding Path=Name}" Header="Name" />                 <DataGridTextColumn Binding="{Binding Path=Photo}" Header="Photo" Width="*"/>             </DataGrid.Columns>             <DataGrid.RowDetailsTemplate>                 <DataTemplate>                     <Grid>                         <Grid.RowDefinitions>                             <RowDefinition Height="1*"/>                             <RowDefinition Height="1*"/>                         </Grid.RowDefinitions>                         <Grid.ColumnDefinitions>                             <ColumnDefinition Width="1*"/>                             <ColumnDefinition Width="3*"/>                         </Grid.ColumnDefinitions>                         <Image Height="50" Stretch="Fill" Source="{Binding Photo}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>                         <TextBox Text="{Binding ID}" Grid.Row="0" Grid.Column="1"/>                         <TextBox Text="{Binding Name}" Grid.Row="1" Grid.Column="1"/>                     </Grid>                 </DataTemplate>             </DataGrid.RowDetailsTemplate>         </DataGrid>     </Grid>           .xaml.cs            List<Employeedata> Employeedatalist = new List<Employeedata>();         public Grid()         {             InitializeComponent();             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Lighthouse.jpg", Name = "Lighthouse" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Jellyfish.jpg", Name = "Jellyfish" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Chrysanthemum.jpg", Name = "Chrysanthemum" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Koala.jpg", Name = "Koala" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Hydrangeas.jpg.jpg", Name = "Hydrangeas" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Lighthouse.jpg", Name = "Lighthouse" });             Employeedatalist.Add(new Employeedata { ID = 1, Photo = "/Jellyfish.jpg", Name = "Jellyfish" });             dg_SmeAFe.ItemsSource = Employeedatalist;         }     }     public class Employeedata     {         public int ID { get; set; }         public string Photo { get; set; }         public string Name { get; set; }     }    Output    WPF Menu Menu The Menu control derives from HeaderedItemsControl. It stacks it items horizontally and draws the typical gray background. The only property that the Menu adds to ItemsControl is the IsMainMenu property. This controls if the menu grabs the focus if the user presses F10 or the ALT key. MenuItem The MenuItem is a HeaderedItemsControl. The content of the Header property is the caption of the menu. The Items of a MenuItems are its sub menus. The Icon property renders a second content on the left of the caption. This is typically used to draw a little image. But it can be used for type of content. Separators Separator is a simple control to group menu items. It's rendered as a horizontal line. It can also be used in ToolBar and StatusBar In XAML and WPF model, the Menu and the MenuItem classes represent a menu and a menu item respectively. A Menu is a collection of menu items with a command associated with each menu items. A menu item may have children menu items called submenus. This article discusses how to work with menus in XAML and WPF applications. Some Examples and there outputs  <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="1*"/>             <RowDefinition Height="1*"/>         </Grid.RowDefinitions>         <Menu IsMainMenu="True" Grid.Row="0" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center">             <MenuItem Header="File" >                 <MenuItem Header="New..." />                 <Separator />                 <MenuItem Header="Open..." />                 <Separator />                 <MenuItem Header="Save" />                 <MenuItem Header="Save As" />                 <Separator />                 <MenuItem Header="Exit" />             </MenuItem>             <MenuItem Header="Edit" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">                 <MenuItem Header="Cut" Command="Cut">                     <MenuItem.Icon>                         <Image Source="Images/cut.png" Height="20" Width="20"/>                     </MenuItem.Icon>                 </MenuItem>                 <MenuItem Header="Copy" Command="Copy">                     <MenuItem.Icon>                         <Image Source="Images/copy.png" Height="20" Width="20" />                     </MenuItem.Icon>                 </MenuItem>                 <MenuItem Header="Paste" Command="Paste">                     <MenuItem.Icon>                         <Image Source="Images/paste.png" Height="20" Width="20" />                     </MenuItem.Icon>                 </MenuItem>             </MenuItem>             <MenuItem Header="View" />             <MenuItem Header="Window" />             <MenuItem Header="Help" />         </Menu>     </Grid>              Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to WPF menu. Height we are setting an height for WPF menu Width we are setting an Width for WPF menu Background using a background property we set background color to the WPF menu Margin We set margin to WPF menu from Left,Top,Right,Bottom VerticalAlignment using vertical alignment we set the position of the WPF menu vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF menu placed out HorizontalAlignment using horizontal alignment we set the position of the WPF menu horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF menu placed out WPF Menu Menu The Menu control derives from HeaderedItemsControl. It stacks it items horizontally and draws the typical gray background. The only property that the Menu adds to ItemsControl is the IsMainMenu property. This controls if the menu grabs the focus if the user presses F10 or the ALT key. MenuItem The MenuItem is a HeaderedItemsControl. The content of the Header property is the caption of the menu. The Items of a MenuItems are its sub menus. The Icon property renders a second content on the left of the caption. This is typically used to draw a little image. But it can be used for type of content. Separators Separator is a simple control to group menu items. It's rendered as a horizontal line. It can also be used in ToolBar and StatusBar In XAML and WPF model, the Menu and the MenuItem classes represent a menu and a menu item respectively. A Menu is a collection of menu items with a command associated with each menu items. A menu item may have children menu items called submenus. This article discusses how to work with menus in XAML and WPF applications. Some Examples and there outputs <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="1*"/>             <RowDefinition Height="1*"/>         </Grid.RowDefinitions>         <Menu IsMainMenu="True" Grid.Row="0" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center">             <MenuItem Header="File" >                 <MenuItem Header="New..." />                 <Separator />                 <MenuItem Header="Open..." />                 <Separator />                 <MenuItem Header="Save" />                 <MenuItem Header="Save As" />                 <Separator />                 <MenuItem Header="Exit" />             </MenuItem>             <MenuItem Header="Edit" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">                 <MenuItem Header="Cut" Command="Cut">                     <MenuItem.Icon>                         <Image Source="Images/cut.png" Height="20" Width="20"/>                     </MenuItem.Icon>                 </MenuItem>                 <MenuItem Header="Copy" Command="Copy">                     <MenuItem.Icon>                         <Image Source="Images/copy.png" Height="20" Width="20" />                     </MenuItem.Icon>                 </MenuItem>                 <MenuItem Header="Paste" Command="Paste">                     <MenuItem.Icon>                         <Image Source="Images/paste.png" Height="20" Width="20" />                     </MenuItem.Icon>                 </MenuItem>             </MenuItem>             <MenuItem Header="View" />             <MenuItem Header="Window" />             <MenuItem Header="Help" />         </Menu>     </Grid> Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to WPF menu. Height we are setting an height for WPF menu Width we are setting an Width for WPF menu Background using a background property we set background color to the WPF menu Margin We set margin to WPF menu from Left,Top,Right,Bottom VerticalAlignment using vertical alignment we set the position of the WPF menu vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF menu placed out HorizontalAlignment using horizontal alignment we set the position of the WPF menu horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF menu placed out WPF Mac style Menu (pop up menu) With the help of WPF we can create a our oun custome controll easily relative to web. To a Mac style Menu bar we used buttons and Image from the wpf.Its a two easy to create an design in WPF  Its too easy just create. first create a new project and create a Images folder like below .xaml code <Window.Background>         <ImageBrush ImageSource="Images/macBackground.jpg"></ImageBrush>     </Window.Background>     <Grid >         <Button x:Name="btnpoup" Content="Open Menu"             Click="OnPopupMenuButton_Click"             Height="70" HorizontalAlignment="Center" Margin="10" VerticalAlignment="Bottom" Width="70" >             <Button.Template>                 <ControlTemplate>                     <Grid x:Name="bg">                         <Grid.RowDefinitions>                             <RowDefinition Height="Auto"/>                             <RowDefinition Height="Auto"/>                         </Grid.RowDefinitions>                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Setting" Foreground="White" Grid.Row="1" />                                                  <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/Setting.png"  Height="50" Width="50"/>                     </Grid>                     <ControlTemplate.Triggers>                         <Trigger Property="IsMouseOver" Value="True">                             <Setter TargetName="backimg" Property="Height" Value="70" />                             <Setter TargetName="backimg" Property="Width" Value="70" />                         </Trigger>                     </ControlTemplate.Triggers>                 </ControlTemplate>             </Button.Template>         </Button>         <Popup x:Name="MyPopupMenu" StaysOpen="False" PopupAnimation="Scroll" AllowsTransparency="True" FlowDirection="LeftToRight" Height="160" Width="250" VerticalAlignment="Center"  HorizontalAlignment="Center"  >             <Border BorderBrush="White" BorderThickness="1" CornerRadius="5">                 <Border.Background>                     <LinearGradientBrush >                         <GradientStop Color="#08FFFFFF" Offset="1"/>                         <GradientStop Color="#88FFFFFF" Offset="1"/>                     </LinearGradientBrush>                 </Border.Background>                                 <Border.Effect>                     <DropShadowEffect BlurRadius="10" ShadowDepth="5" />                 </Border.Effect>                 <WrapPanel OpacityMask="Red" Height="160" Width="250">                         <Button x:Name="btn1" Margin="5" Height="70" Width="70" Click="Button_Click">                             <Button.Template>                                 <ControlTemplate>                                     <Grid >                                         <Grid.RowDefinitions>                                             <RowDefinition Height="Auto"/>                                             <RowDefinition Height="Auto"/>                                         </Grid.RowDefinitions>                                         <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/copy.png" Height="50" Width="50" />                                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Copy" Foreground="White" Grid.Row="1"/>                                     </Grid>                                     <ControlTemplate.Triggers>                                         <Trigger Property="IsMouseOver" Value="True">                                             <Setter TargetName="backimg" Property="Height" Value="70" />                                             <Setter TargetName="backimg" Property="Width" Value="70" />                                         </Trigger>                                     </ControlTemplate.Triggers>                                 </ControlTemplate>                             </Button.Template>                         </Button>                         <Button Margin="5" Height="70" Width="70" Click="Button_Click">                             <Button.Template>                                 <ControlTemplate>                                     <Grid x:Name="bg" >                                         <Grid.RowDefinitions>                                             <RowDefinition Height="Auto"/>                                             <RowDefinition Height="Auto"/>                                         </Grid.RowDefinitions>                                         <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/Cut.png" Height="50" Width="50"/>                                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Cut" Foreground="White" Grid.Row="1"/>                                     </Grid>                                     <ControlTemplate.Triggers>                                         <Trigger Property="IsMouseOver" Value="True">                                             <Setter TargetName="backimg" Property="Height" Value="70" />                                             <Setter TargetName="backimg" Property="Width" Value="70" />                                         </Trigger>                                     </ControlTemplate.Triggers>                                 </ControlTemplate>                             </Button.Template>                         </Button>                         <Button Margin="5" Height="70" Width="70" Click="Button_Click">                             <Button.Template>                                 <ControlTemplate>                                     <Grid x:Name="bg">                                         <Grid.RowDefinitions>                                             <RowDefinition Height="Auto"/>                                             <RowDefinition Height="Auto"/>                                         </Grid.RowDefinitions>                                         <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/edit-paste.png" Height="50" Width="50"/>                                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Paste" Foreground="White" Grid.Row="1"/>                                     </Grid>                                     <ControlTemplate.Triggers>                                         <Trigger Property="IsMouseOver" Value="True">                                             <Setter TargetName="backimg" Property="Height" Value="70" />                                             <Setter TargetName="backimg" Property="Width" Value="70" />                                         </Trigger>                                     </ControlTemplate.Triggers>                                 </ControlTemplate>                             </Button.Template>                         </Button>                         <Button Margin="5" Height="70" Width="70" Click="Button_Click">                             <Button.Template>                                 <ControlTemplate>                                     <Grid x:Name="bg" >                                         <Grid.RowDefinitions>                                             <RowDefinition Height="Auto"/>                                             <RowDefinition Height="Auto"/>                                         </Grid.RowDefinitions>                                         <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/floppy_disk_save-128.png" Height="50" Width="50"/>                                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Save" Foreground="White" Grid.Row="1"/>                                     </Grid>                                     <ControlTemplate.Triggers>                                         <Trigger Property="IsMouseOver" Value="True">                                             <Setter TargetName="backimg" Property="Height" Value="70" />                                             <Setter TargetName="backimg" Property="Width" Value="70" />                                         </Trigger>                                     </ControlTemplate.Triggers>                                 </ControlTemplate>                             </Button.Template>                         </Button>                         <Button Margin="5" Height="70" Width="70" Click="Button_Click">                             <Button.Template>                                 <ControlTemplate>                                     <Grid x:Name="bg">                                         <Grid.RowDefinitions>                                             <RowDefinition Height="Auto"/>                                             <RowDefinition Height="Auto"/>                                         </Grid.RowDefinitions>                                         <Image x:Name="backimg" Source="/WPFPopUpMenuControl;component/Images/printer.png" Height="50" Width="50"/>                                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Print" Foreground="White" Grid.Row="1"/>                                     </Grid>                                     <ControlTemplate.Triggers>                                         <Trigger Property="IsMouseOver" Value="True">                                             <Setter TargetName="backimg" Property="Height" Value="70" />                                             <Setter TargetName="backimg" Property="Width" Value="70" />                                         </Trigger>                                     </ControlTemplate.Triggers>                                 </ControlTemplate>                             </Button.Template>                         </Button>                     </WrapPanel>                             </Border>         </Popup>     </Grid> Output .xaml.cs Code   private void OnPopupMenuButton_Click(object sender, System.Windows.RoutedEventArgs e)         {             Button button = sender as Button;             MyPopupMenu.PlacementTarget = button;             MyPopupMenu.Placement = PlacementMode.Top;             MyPopupMenu.IsOpen = true;             MyPopupMenu.StaysOpen = false;         }         private void Button_Click(object sender, RoutedEventArgs e)         {             MyPopupMenu.IsOpen = false;         }

WPF GRID STACK WRAP DOCK CANVOS LAYOUT PANEL - MANOHAR GOUD 9866550012

K MANOHAR GOUD

9866550012

WPF Grid Panel The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its similar to the HTML table tr and td tags we can set the rows in grid with the help of "Grid.RowDefinitions" and set columns with the help of "Grid.ColumnDefinitions". we just need to add "RowDefinition" and "ColumnDefinition" as per our requirement as below

Below just write down a WPF Grid Layout with two reows and two columns

.xaml Output

We can position the controls inside the Grid using Grid.Column and Grid.Row as Below

.xaml Output

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Grid  Panel. Height we are setting an height for Grid  Panel Width we are setting an Width for Grid  Panel Background using a background property we set background color to the Grid  Panel DataContext DataContext is most use full property in Grid  Panel we can set Model or Datastucture which we need to bind to the grid VerticalAlignment using vertical alignment we set the position of the WPF Grid  Panel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Grid placed out HorizontalAlignment using horizontal alignment we set the position of the WPF Grid  Panel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Grid  Panel placed out ScrollViewer when we need to show so many rows and columns in single WPF Grid  Panel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility ShowGridLines using show grid lines we can see a outerlibes of gris like grid border. we need to set it as "True" or "False" Style Using a style we are setting style to the Grid  Panel from resourcedictionary Visibility We can Display and hide the Grid  Panel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible Margin We set margin to Grid  Panel from Left,Top,Right,Bottom Opacity Opacity can be used to make any element transparent or opaque.

WPF Stack Panel The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. there are two type or orientation 1. Horizontal  2. Vertical

WPF StackPanel Horizontal Layout

.xaml Output

WPF StackPanel Vertical Layout

.xaml Output

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Stackpanel. Height we are setting an height for Stackpanel Width we are setting an Width for Stackpanel Background using a background property we set background color to the Stackpanel DataContext DataContext is most use full property in Stackpanel we can set Model or Datastucture which we need to bind to the Stackpanel VerticalAlignment using vertical alignment we set the position of the WPF Stackpanel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Stackpanel placed out HorizontalAlignment using horizontal alignment we set the position of the WPF Stackpanel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Stackpanel placed out ScrollViewer when we need to show so many rows and columns in single WPF Stackpanel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility Orientation Stackpanel provide a two type of orientaion 1.vertical 2. horizontal.  Style Using a style we are setting style to the Stackpanel from resourcedictionary Visibility We can Display and hide the Stackpanel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible Margin We set margin to Stackpanel from Left,Top,Right,Bottom Opacity Opacity can be used to make any element transparent or opaque.

WPF Wrap Panel The Wrappanel is same as StackPanel in WPF is a simple and useful layout panel. but its not stacks its child elements below or beside each other. its wrap the all item in one line as per orientation 1. Horizontal  2. Vertical

WPF WrapPanel Horizontal Layout

.xaml Output

WPF WrapPanel Vertical Layout

.xaml Output

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Wrappanel. Height we are setting an height for Wrappanel Width we are setting an Width for Wrappanel Background using a background property we set background color to the Wrappanel DataContext DataContext is most use full property in Wrappanel we can set Model or Datastucture which we need to bind to the Stackpanel VerticalAlignment using vertical alignment we set the position of the WPF Wrappanel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Stackpanel placed out HorizontalAlignment using horizontal alignment we set the position of the WPF Wrappanel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Wrappanel placed out ScrollViewer when we need to show so many rows and columns in single WPF Wrappanel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility Orientation Wrappanel provide a two type of orientaion 1.vertical 2. horizontal.  Style Using a style we are setting style to the Wrappanel from resourcedictionary Visibility We can Display and hide the Wrappanel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible Margin We set margin to Wrappanel from Left,Top,Right,Bottom Opacity Opacity can be used to make any element transparent or opaque.

WPF Dock Panel A Dock Panel is used to dock child elements in the left, right, top, bottom and center positions on the window. The position of elements is determined by the Dock property of the child elements. The default value of Dock property is left. The Dock property is of type Dock enumeration that has Left, Right, Top, and Bottom values.we set 'LastChildFill' true or false on the basis of requirement

WPF DockPanel

.xaml Output

.xaml Output

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Dock Panel. Height we are setting an height for Dock Panel Width we are setting an Width for Dock Panel Background using a background property we set background color to the Dock Panel DataContext DataContext is most use full property in Grid we can set Model or Datastucture which we need to bind to the Dock Panel VerticalAlignment using vertical alignment we set the position of the WPF Dock Panel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Dock Panel placed out HorizontalAlignment using horizontal alignment we set the position of the WPF Dock Panel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Dock Panel placed out ScrollViewer when we need to show so many rows and columns in single WPF Dock Panel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility Style Using a style we are setting style to the Dock Panel from resourcedictionary Visibility We can Display and hide the Dock Panel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible Margin We set margin to Dock Panel from Left,Top,Right,Bottom Opacity Opacity can be used to make any element transparent or opaque. LastChildFill We can set this property either 'True' or 'False' If we set this as 'True' then last child of DockPanel occupy the all remaining space If we set this as 'False' then last child of DockPanel occupy only assign height and width

WPF Canvos Panel The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates. The coordinates can be specified relative to any side of the panel usind the Canvas.Left, Canvas.Top, Canvas.Bottom and Canvas.Right attached properties

WPF Canvos Panel

.xaml Output

Properties Explination x:Name x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Canvas Panel. Height we are setting an height for Canvas Panel. Width we are setting an Width for Canvas Panel. Background using a background property we set background color to the Canvas Panel. DataContext DataContext is most use full property in Grid we can set Model or Datastucture which we need to bind to the Canvas Panel. VerticalAlignment using vertical alignment we set the position of the WPF Canvas Panel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Canvas Panel placed out HorizontalAlignment using horizontal alignment we set the position of the WPF Canvas Panel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Canvas Panel placed out ScrollViewer when we need to show so many rows and columns in single WPF Canvas Panel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility Style Using a style we are setting style to the Canvas Panel from resourcedictionary Visibility We can Display and hide the Canvas Panel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible Margin We set margin to Canvas Panel from Left,Top,Right,Bottom Opacity Opacity can be used to make any element transparent or opaque.