Showing posts with label Customize. Show all posts
Showing posts with label Customize. 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

How to create a custom tool item with LinsUIWPF Suite

Download   Demonstration  Question?   Contact Us

Prerequisite: Follow the link How to create a new project to create your application with LinsUIWPF Suite.

1.     Create a custom control which is derived from FlexToolBarBaseButton.
public class MyCustomToolItem : FlexToolBarBaseButton
{
}
2.     Overwrite the following virtual function
public override Size MeasureSize(bool bDropDown, FLEX_DOCKING_ALIGN nDock)
{
Size szMySize;
/////////////////////////////////////////////
// Caculate your custom tool item’s size
/////////////////////////////////////////////
return szMySize;
}
3.     Replace the original tool item with your custom tool item.
<src:FlexToolBar x:Class="Demo.BlossomToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:LinsUIWPF;assembly=LinsUIWPF" 
ID = "{StaticResource BLOSSOM_TOOLBAR_ID}" Text="Blossom" FlexDock="LEFT" Height="44" Width="277">
<src:MyCustomToolItem CommandID="{StaticResource DOWN_COMMAND_ID}" ID = "{StaticResource BLOSSOM_DOWN_ID}" HorizontalAlignment="Left" VerticalAlignment="Top" Icon="/Demo;component/Resource/navigate_down.ico"Text="Down" ToolTipText="Tooltip for &quot;Down&quot; comment." />
</src:FlexToolBar>



References:

How to create a 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 “MyMenu” as the class name. Click “Add” button.
5.     Open MyMenu.xaml. Change the following code,
<UserControl x:Class="MyDemo.MyMenu"
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 a unique ID to it. The unique ID is for layout persistent. It should be between 1,000 and 10,000,000.
<src:FlexMenu x:Class="MyDemo.MyMenu "
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:src="clr-namespace:LinsUIWPF;assembly=LinsUIWPF"
Height="300" Width="300" ID="1003">
<Grid>
            
</Grid>
</src:FlexMenu>
6.     Open MyMenu.xaml.cs.
Add the following line,
using LinsUIWPF;
and change the following code,
public partial class MyMenu : UserControl
{
public MyMenu()
{
InitializeComponent();
}
}
to as follows, 
public partial class MyMenuFlexMenu
{
public MyMenu()
{
InitializeComponent();
}
}
7.     Close MyMenu.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.  Select the new created menu item.
13.  Go to Properties panel.  Choose an icon, and enter for “Text”, “ToolTipText”, and “HelpContext”. Assign a unique ID to it

14.  Continue to add items
15.  Open Window1.xaml.cs.
Add the following code, to create and assign the menu to the application, a FlexDocument object, or a FlexPanel object.
public partial class Window1 : LinsMDIWindow
{   
public Window1()
{
InitializeComponent();

MyMenu myMenu = new MyMenu();
myMenu.ShowMenu();
this.MainMenu = myMenu;
}
}


References:

How to create a metro screen with LinsUIWPF Suite

1.     Follow the link How to create a new project to create your project with LinsUIWPF Suite.
2.     Highlight “MyDemo” project folder, and Project->Add New Item …, it should bring up the following dialog.
 
Choose “WPF” as Category and “User Control (WPF)” as Template. Use “MySurfaceSlider” as the class name. Click “Add” button.
3.     Open MySurfaceSlider.xaml. Change the following code,
<UserControl x:Class="Demo.MySurfaceSlider"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
           
</Grid>
</UserControl>
to as follows.
<src:SurfaceSlider x:Class="Demo.MySurfaceSlider"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:src="clr-namespace:LinsUIWPF;assembly=LinsUIWPF"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
           
</Grid>
</src:SurfaceSlider>
4.     Open MySurfaceSlider.xaml.cs.
Add the following line,
using LinsUIWPF;
and change the following code,
public partial class MySurfaceSlider : UserControl
{
public MySurfaceSlider()
{
InitializeComponent();
}
}
to as follows,
public partial class MySurfaceSlider : SurfaceSlider
{
public MySurfaceSlider()
{
InitializeComponent();
}
}
5.     Close MySurfaceSlider.xaml, then reopen it again, the screen should show the following,

6.     Go to the Toolbox again, drag the control “SurfaceSliderHeader” under LinsUIWPF Controls folder and drop it on to the view. The screen should show as the following.
The SurfaceSliderHeader is customizable. The user can put their information or dynamically updated content on it.

7.     Go to the Toolbox, drag the control “SurfaceSliderFooter” under LinsUIWPF Controls folder and drop it on to the view. The screen should show as the following.
The SurfaceSliderFooter is customizable. The user can put their information or dynamically updated content on it.

8.     Go to the Toolbox, drag the control “SurfaceSliderTasksPanel” under LinsUIWPF Controls folder and drop it on to the view. The screen should show as the following.

9.     Click at the “Add a task group” button. A new group container will be generated, and the screen should show as the following. Assign a unique ID to it.
<src:TaskGroup ID="4011" Text="File Operation">
</src:TaskGroup>
10.  Go to the Toolbox, drag the control “TaskGroupHeader” under LinsUIWPF Controls folder and drop it on to the created group container. The screen should show as the following.
The TaskGroupHeader is customizable. The user can put group information on it. 
11.  Click at the group container, a combobox will become visible. Click at the combobox, a dropdown list should popup as the following.
12.  Select “Add a small size taskbutton”, a small taskbutton will be created as the following. Assign a unique ID to it. A user can customize the task button to display information and dynamically updated content.
13.  Select “Add a vertical medium size taskbutton”, a vertical medium taskbutton will be created as the following. Assign a unique ID to it.
14.  Click at the left or right side of the group container.  The screen should show as the following. A user can click at Add a task group” button to create another group container
15.  Open Window1.xaml.cs.
Add the following code,
public partial class Window1 : LinsMDIWindow
{
public Window1()
{
InitializeComponent();

MainSurfaceSlider = new MySurfaceSlider();
}
}


References: