Showing posts with label Context Menu. Show all posts
Showing posts with label Context Menu. Show all posts

Saturday, February 14, 2015

How to create a context menu with LinsUIWPF Suite

Download   Demonstration  Question?   Contact Us

1.     Follow the link How to create a new project to create your project with LinsUIWPF Suite.
2.     Highlight “MyDemo” project folder, and Project->New Folder to create a new folder named “Icons”.
3.     Project->Add Existing Item …, and select icons to add them into the “Icons” folder.
4.     Project->Add New Item …, it should bring up the following dialog.

Choose “WPF” as Category and “User Control (WPF)” as Template. Use “MyContextMenu” as the class name. Click “Add” button.
5.     Open MyContextMenu.xaml. Change the following code,
<UserControl x:Class="MyDemo.MyContextMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Grid>
           
</Grid>
</UserControl>
to as follows, and assign an unique ID to it. The unique ID is for layout persistent. It should be between 1,000 and 10,000,000.
<src:ContextMenuDropDown x:Class="MyDemo.MyContextMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:src="clr-namespace:LinsUIWPF;assembly=LinsUIWPF"
Height="300" Width="300" ID="1021">
<Grid>
            
</Grid>
</src:ContextMenuDropDown>
6.     Open MyContextMenu.xaml.cs.
Add the following line,
      using LinsUIWPF;
and change the following code,
public partial class MyContextMenu : UserControl
{
public MyContextMenu()
{
InitializeComponent();
}
}
to as follows,
public partial class MyContextMenu ContextMenuDropDown
{
public MyContextMenu()
{
InitializeComponent();
}
}
7.     Close MyContextMenu.xaml, then reopen it again, the screen should show the following,
8.     Click the combo box; it will pop up the list,
9.     Select “Add a menuitem”, and then click and select the new created menu item,
10.  Go to Properties panel.  Choose an icon, and enter for “Text”, “ToolTipText”, and “HelpContext”. Assign a unique ID to it
11.  Click the combo box; it will pop up the list, select “Add a menuitem”
12.  Repeat step 8 and 9.
13.  Continue to add items
14.  Open Window1.xaml.cs.
Add the following code, and assign the context menu to some object.
public partial class Window1 : LinsMDIWindow
{
public Window1()
{
InitializeComponent();
  
MyPanel panel = new MyPanel();
panel.ShowPanel();

FlexContextMenu contextMenu = new FlexContextMenu();
contextMenu.DropDownMenu = new MyContextMenu();
panel.ContextMenu = contextMenu;
}
}



References:
Command,
Command Events,
Commands Manager,
Context Menu,
Features,
How To,
Index,
Instruction,
LinsUIWPFDockingManager,
Tool Items Manager

Friday, February 13, 2015

Context Menu


ContextMenuDropDown class
Represents a pop-up menu that enables a control to expose functionality that is specific to the context of the control.
Examples
The following example shows how to create a ContextMenuDropDown object and assign it to an image.
public partial class MyContextMenuDropDown : ContextMenuDropDown
{
// ***** //
public partial class Window1 : LinsMDIWindow
{
Public image;
public Window1()
// Create a contextmenu instance.
FlexContextMenu contextmenu = new FlexContextMenu();
// Create a contextmenudropdown instance.
contextmenu.DropDownMenu = new MyContextMenuDropDown();
// Assign the contextmenu to the image
Image.ContextMenu = contextmenu;
}
}

§  Constructors
1)  public ContextMenuDropDown()
Remarks
Initialize a new instance of ContextMenuDropDown
§  Members
1)  public virtual Rect Bounds { get; }
Remarks
Retrieve both the size and the location of the context menu, in pixels, relative to its parent.
2)  public virtual Rect BoundsAtMDIFrame { get; }
Remarks
Retrieve both the size and the location of the context menu, in pixels, relative to MDI frame.
3)  public virtual long ID { get; set; }               
Remarks
Every ContextMenuDropDown object should have a unique ID. If the user does not assign a number to the ID, a unique number which is larger than FlexConstants.m_nUserDefinedControlStartID (10,000,000) will be automatically generated and assigned to it. If the ID is between FlexConstants.m_nUserDefinedControlStartID (1000) and FlexConstants.m_nUserDefinedControlStartID (10,000,000), then once the context menu is created, it will never been destroyed, and its layout will be persistent and customizable. You can always use LinsUIWPFDockingManager.GetContextMenuFromAllPlacesByID() to retrieve its instance, once it is created.
4)  public FlexCollection<UIElement> Items { get; set; }               
Remarks
Gets or sets all menu items.
5)  public bool ShowToolTip { get; set; }
Remarks
This field decided if the tooltip will be shown, when the mouse hovers above one of the menu items, if the menu item has a tooltip assigned to it.
6)  public string Text { get; set; }
Remarks
Gets or sets the caption of the context menu.
§  Methods
1)  public void EnsureVisible(FlexToolBarBaseButton visibleButton)      
Parameters
visibleButton
Type: FlexToolBarBaseButton
A menu item.            
Remarks
Move the menu item, visibleButton, into view area if it is outside the view area.
2)  public virtual bool HitTest(
Point ptMousePosAtMDIFrame)                 
Parameters
ptMousePosAtMDIFrame
Type: Point
A location which is in MDI Frame coordinate. 
Remarks
Test whether the point, ptMousePosAtMDIFrame, which is in MDI Frame coordinate, is inside this context menu.
3)  public virtual Size MeasureSize()              
Remarks
This calculates how much space the context menu requires. If the user wants to customize the context menu, this method may need to be overridden by the user.
§  Events
1)     public event CloseEventhandler Closed              
Remarks
This event is fired when the context menu closes. 
2)     public event DescendantItemClickedEventhandler DescendantItemClicked              
Remarks
This event is fired when any menu item is clicked.  





Reference:
Command,
Command Events,
Commands Manager,
Create a Context Menu,
Create a Command,
Dynamically Link a Tool Item to a Command Existed in an Optional Assembly,
Features,
FlexToolBarComboBox,
How To,
Index,
Instruction,
LinsUIWPFDockingManager,
Tool Items Manager


FlexToolBarButton


FlexToolBarButton class
It derived from FlexToolBarBaseButton. This tool item reacts to user input from a mouse, keyboard, stylus, or other input device.
Examples
The following example shows how to use the CommandID attribute of a tool item.
public partial class CopyButton : FlexToolBarButton
{
public CopyButton() : base()
{
// ******* //
CommandID = COPY_COMMAND_ID;
}
}

class CopyCommand : LinsUICommand
{
public CopyCommand(long nCommandID, object data) : base(nCommandID, data)
{
// Assign a help file to this command. The help file must be stored at the location
// specified by FlexUISettings.DefaultHelpFilePath,
HelpFile = "Copy.rtf";
// Assign a short-cut key to this command.
InputKeyGesture = new System.Windows.Input.KeyGesture(
System.Windows.Input.Key.C,
System.Windows.Input.ModifierKeys.Control);
}

public override void Execute(object parameter)
{
base.Execute(parameter);

// Execute your command //
}

[CommandEventAttribute(COMMAND_EVENT.HELPBUTTON_CLICK)]
protected void HelpClick(object sender, EventArgs e)
{
// ******* //
}

[CommandEventAttribute(COMMAND_EVENT.KEY_UP)]
protected void OnKeyUp(object sender, EventArgs e)
{
if (!(e is KeyEventArgs))
{
return;
}
KeyEventArgs keyEvent = e as KeyEventArgs;

// ******* //
}

public override bool CanExecute(object parameter)
{
return true;
}
}

public partial class MainWindow : LinsMDIWindow
{
public MainWindow()
{
InitializeComponent();
CreateCommands();
}

private void CreateCommands()
{
// Create COPY command instance
LinsUICommand command = new CopyCommand(COPY_COMMAND_ID, null);
}
}

§  Constructors
1)  public FlexToolBarButton()
Remarks
Initialize a new instance of FlexToolBarButton
§  Members
1)  public virtual ToolBarItemDisplayStyle Appearence { get; set; }
Remarks
Gets or sets the appearance of the tool item. The default is ToolBarItemDisplayStyle.ImageAndText. It can be one of the following values,
§   None:             
Assigned Text and assigned Icon are to be rendered.
§   Text:                
Only Text is to be rendered.
§   Image:         
Only Icon is to be rendered.
§   ImageAndText:              
Both Text and Icon are to be rendered.
2)  public virtual Rect Bounds { get; }
Remarks
Retrieve both the size and the location of the tool item, in pixels, relative to its parent.
3)  public virtual Rect BoundsAtMDIFrame { get; }
Remarks
Retrieve both the size and the location of the tool item, in pixels, relative to MDI frame.
4)  public virtual bool Checked { get; set; }
Remarks
Gets or sets the check status of the tool item. The default is false.
5)  public long CommandID { get; set; }               
Remarks
If this attribute is assigned, then this tool item will be associated to the correspondent command with the same CommandID. See the above example for creating a command. 
6)  public FontFamily Font { get; set; }
Remarks
Gets or sets the font of the tool item. The default is SystemFonts.MenuFontFamily.
7)  public Color FontColor { get; set; }
Remarks
Gets or sets the font color of the tool item. The default is SystemManager.FlexParameters.DefaultToolItemFontColor.
8)  public double FontSize { get; set; }
Remarks
Gets or sets the font size of the tool item. The default is SystemFonts.MenuFontSize.
9)  public FontStyle FontStyle { get; set; }
Remarks
Gets or sets the font style of the tool item. The default is normal.
10)public FontWeight FontWeight { get; set; }
Remarks
Gets or sets the font weight of the tool item. The default is normal.
11)public string HelpContext { get; set; }
Remarks
Gets or sets the help content for the tool item. If this tool item has been associated to a command (CommandID attribute is assigned), then this attribute will be ignored, instead the COMMAND_EVENT.HELPBUTTON_CLICK event defined inside the correspondent command will be executed once the help button on the tooltip is clicked.
12)public string HelpFile { get; set; }
Remarks
Gets or sets the help file for the tool item. If this tool item has been associated to a command (CommandID attribute is assigned), then this attribute will be ignored, instead the COMMAND_EVENT.HELPBUTTON_CLICK event defined inside the correspondent command will be executed once the help button on the tooltip is clicked.
13)public virtual ImageSource Icon { get; set; }
Remarks
Gets or sets the icon of the tool item.
14)public double IconSize { get; set; }
Remarks
Gets or sets the icon size of the tool item. The default is 16 pixels.
15)public virtual long ID { get; set; }               
Remarks
Every tool item should have a unique ID. If the user does not assign a number to the ID, a unique number which is larger than FlexConstants.m_nUserDefinedControlStartID (10,000,000) will be automatically generated and assigned to it. If the ID is between FlexConstants.m_nUserDefinedControlStartID (1000) and FlexConstants.m_nUserDefinedControlStartID (10,000,000), then once the tool item is created, it will never been destroyed, and its layout will be persistent and customizable. You can always use LinsUIToolItemManager.GetToolItem() to retrieve its instance, once it is created.
16)public bool IsCheckable { get; set; }
Remarks
Gets or sets the check ability of the tool item. The default is false.
17)public virtual bool IsSubMenu { get; }
Remarks
True, if the tool item has sub-items, for example, a dropdown button.
18)public virtual TextImageRelation Relation { get; set; }
Remarks
Gets or sets the appearance of the tool item. The default is TextImageRelation.TextBeforeImage. It can be one of the following values,
§   Overlay:             
The Icon and the Text share the same space.
§    ImageAboveText:                
The Icon is displayed vertically above the Text.
§   TextAboveImage:         
The Text is displayed vertically above the Icon.
§   ImageBeforeText:              
The Icon is displayed horizontally before the Text.
§   TextBeforeImage:              
The Text is displayed horizontally before the Icon.
19)public string Text { get; set; }
Remarks
Gets or sets the text of the tool item.
20)public string ToolTipText { get; set; }
Remarks
Gets or sets the tooltip of the tool item.
§  Methods
1)  public virtual bool HitTest(
Point ptMousePosAtMDIFrame)                 
Parameters
ptMousePosAtMDIFrame
Type: Point
A location which is in MDI Frame coordinate. 
Remarks
Test whether the point, ptMousePosAtMDIFrame, which is in MDI Frame coordinate, is inside this tool item.
2)  public virtual Size MeasureSize(
bool bDropDown,
FLEX_DOCKING_ALIGN nDock)              
Parameters
bDropDown
Type: bool
True, if this tool item is on a dropdown list, for example a context menu or a sub-menu.            
nDock
Type: FLEX_DOCKING_ALIGN
The docking style of the tool item’s container. Always pass in FLEX_DOCKING_ALIGN .TOP, except the container is a FlexToolBar, and then pass the toolbar’s FlexDock. attribute.            
Remarks
This calculates how much space the tool item requires. If the user wants to customize the tool item, this method may need to be overridden by the user.
3)  public virtual void Refresh()              
Remarks
This forces to redraw the tool item. 
§  Events
1)     public event ClickEventhandler ClickEvent              
Remarks
This event is fired when the tool item is clicked.  
2)     public event RoutedEventHandler GotFocus              
Remarks
This event is fired when the tool item receives focus.  
3)     public event RoutedEventHandler LostFocus              
Remarks
This event is fired when the tool item lost focus.  


References:
Assign a Help Document to a Tool Item,
Command,
Command Events,
Commands Manager,
Create a Command,
Create a Custom Tool Item,
Dynamically Link a Tool Item to a Command Existed in an Optional Assembly,
Features,
FlexToolBarBaseButton,
How To,
Index,
Instruction,
Tool Items Manager