Saturday, February 14, 2015

How to create a metro screen with LinsUIWPF Suite

Create a surface slider 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: