Sujith Maliyadda works as an intern at Microsoft Sri Lanka. Sujith is an undergraduate of the University of Colombo, School of Computing
 

Windows Presentation Foundation (WPF)

07/30/2009 12:16 pm By Sujith Maliyadda | Articles: 6

WPF Items Controls

Menus

Unlike in Win32-based technologies, WPF menus are not special-cased over other controls to have distinct prominence or limitations. They are just another set of items controls, designed for the hierarchical display of items in a series of cascading pop-ups.

 

<Menu>

<MenuItem Header=_File>

      <MenuItem Header=_New.../>

      <MenuItem Header=_Open.../>

      <Separator/>

      <MenuItem Header=Sen_d To>

            <MenuItem Header=Mail Recipient/>

            <MenuItem Header=My Documents/>

      </MenuItem>

   </MenuItem>

   <MenuItem Header=_Edit>

             …

   </MenuItem>

   <MenuItem Header=_View>

            …

   </MenuItem>

</Menu>

 

 

In a Menu control MenuItem contains many properties for customizing its behavior. For examples:

·        Icon:Enables you to add an arbitrary object to be placed beside the Header. Normally small image uses

·        IsCheckable:Enables you to make a MenuItem act like a CheckBox control

·        InputGestureText:Enables you to label an item with an associated gesture (most commonly, a keyboard shortcut such as Ctrl+O)

 

The only public API that Menu adds to its ItemsControl base class is the IsMainMenu property. When true (which it is by default) the Menu gets focus when the user presses the Alt or F10 key, matching user expectations for Win32 menus.

 

Normally menu items show horizontally. But when want to show vertical alignment use stack panel. The default orientation for StackPanel is vertical, so you don’t need to set the Orientation property in this case.

 

    <Menu>

           <Menu.ItemsPanel>

               <ItemsPanelTemplate>

                   <StackPanel/>

               </ItemsPanelTemplate>

           </Menu.ItemsPanel>

           <MenuItem Header=_File>

               <MenuItem Header=_New.../>

               <MenuItem Header=_Open.../>

               <Separator/>

               <MenuItem Header=Sen_d To>

                   <MenuItem Header=Mail Recipient/>

                   <MenuItem Header=My Documents/>

               </MenuItem>

           </MenuItem>

           <MenuItem Header=_Edit>

               …

           </MenuItem>

           <MenuItem Header=_View>

               …

           </MenuItem>

       </Menu>

 

 

ContextMenu

It works just like a menu but, can’t embed ContextMenu directly in an element tree, however. You must attach it to a control via an appropriate property. When a user right-clicks on the control (or presses Shift+F10), the context menu is displayed.

 

<ListBox>

  <ListBox.ContextMenu>

       <ContextMenu>

                   …The three MenuItems from Listing 4.3…

       </ContextMenu>

   </ListBox.ContextMenu>

         <Menu>

              <Menu.ItemsPanel>

                   <ItemsPanelTemplate>

                       <StackPanel/>

                   </ItemsPanelTemplate>

               </Menu.ItemsPanel>

               <MenuItem Header=_File>

                   <MenuItem Header=_New.../>

                   <MenuItem Header=_Open.../>

                   <Separator/>

                   <MenuItem Header=Sen_d To>

                       <MenuItem Header=Mail Recipient/>

                       <MenuItem Header=My Documents/>

                   </MenuItem>

               </MenuItem>

               <MenuItem Header=_Edit>

                   …

               </MenuItem>

               <MenuItem Header=_View>

                   …

               </MenuItem>

           </Menu>

</ListBox>

 

 

Other ItemsControls

 

TreeView

TreeView is a popular control for displaying hierarchical data with nodes that can be expanded and collapsed. It is like a menu. It can contain any items, and stacks them vertically. But TreeView is pretty pointless unless you fill it with TreeViewItems.

 

<TreeView Name=TreeView1>

  <TreeViewItem Header=Desktop Name=TreeItemDesktop>

        <TreeViewItem Header=Computer>

                   

        </TreeViewItem>

        <TreeViewItem Header=Recycle Bin>

                   

        </TreeViewItem>

        <TreeViewItem Header=Control Panel>

                   <TreeViewItem Header=Programs/>

                   <TreeViewItem Header=Security/>

                   <TreeViewItem Header=User Accounts/>

        </TreeViewItem>

        <TreeViewItem Header=Network>

                               

        </TreeViewItem>

   </TreeViewItem>

</TreeView>

 

IsExpanded and IsSelected properties contain in a treeView.

Try with these to handle above properties.

 

<TreeViewItem Header=Control Panel Name=TreeItemContPanel>

<TreeViewItem Header=Desktop Name=TreeItemDesktop>

 

In the .cs part:

TreeItemDesktop.IsSelected = true;

TreeItemContPanel.IsExpanded = true;

 

ToolBar

ToolBar control is typically uses to group together many small controls.

 

<ToolBar Height=29 Margin=12,12,19,0 VerticalAlignment=Top>

   <Button><Image Source=Save.png/></Button>

   <Separator/>

   <ToggleButton><Image Source=bold.png/></ToggleButton>

   <ToggleButton><Image Source=Italic.png/></ToggleButton>

   <ToggleButton><Image Source=UnderLine.png/></ToggleButton>

   <Separator/>

   <ToggleButton><Image Source=rightAline.png/></ToggleButton>

   <ToggleButton><Image Source=centre.png/></ToggleButton>

   <ToggleButton><Image Source=justify.png/></ToggleButton>

   <Separator/>

   <Label>Zoom</Label>

   

     <ComboBox>      </ComboBox>

     <Separator/>

</ToolBar>

 

ToolBars can be placed anywhere in an element tree, but they are typically placed inside a ToolBarTray which is a FrameworkElement. ToolBarTray holds a collection of ToolBars and, unless its IsLocked property is set to true, enables users to drag and reposition the ToolBars.

 

StatusBar also a Items control like a ToolBar. Next article will discuss about the WPF Range Controls.

Previous Article

Share/Save
No votes yet

Post new comment