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;         }