ComponentOne中文技术文档
Page tree
Skip to end of metadata
Go to start of metadata

快速入门可以帮助您顺利的创建和运行WPF及及Silverlight版版DockControl。快速入门中，您需要在Visual Studio中创建
一个新工程，添加一个C1DockControl到您的应用程序中，并在此基础上再添加一个附有C1DockTabItems的
C1DockTabControl。

第一步：创建一个WPF应用程序

在这一步中，您将使用WPF及及Silverlight版版DockControl在Visual Studio中创建一个WPF或Silverlight应用程序。
您需要完成以下步骤来建立一个工程并添加一个C1DockControl控件到您的应用程序中：

  1. 在Visual Studio中，选择文件文件|新建新建|项目项目，注意：完成快速入门的步骤需要Visual Studio2010及以上版本。
  2. 在新建项目新建项目对话框中，在左侧控制板中选择语言（如C#），并在模板列表中选择WPF或或Silverlight应用程序。
  3. 在.NET Framework下拉列表中，选择.NET Framework 3.5及以上版本。
  4. 输入项目名称项目名称并点击确定确定，此时会出现新的新的WPF应用程序应用程序或者新的新的Silverlight应用程序应用程序对话框。
  5. 如果需要为解决方案创建目录为解决方案创建目录，则可以选中复选框，点击确定MainPage.xaml文件将被打开。
  6. 在XAML窗口中，将光标移至<Grid>与</Grid>标签之间并点击一次。
  7. 导航到工具栏并拖拽C1DockControl图标到<Grid>标签之间，添加C1DockControl到Window.xaml中，产生的

XAML标签将与下述相似：

WPF XAML

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<c1:C1DockControl></c1:C1DockControl>
</Grid>
</Window>


Silverlight XAML

<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DockControlQuickStart.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<c1:C1DockControl></c1:C1DockControl>
</Grid>
</UserControl>


注意：注意：C1.WPF.Docking或C1.Silverlight.Docking的命名空间与<c1:C1DockControl></c1:C1DockControl>标签已经被添加到工程中。

在下一步中，您将添加一个附有C1DockTabItems的C1DockTabControl。

第二步：添加一个附有C1DockTabItems的C1DockTabControl

接下来，我们将添加一个附有C1DockTabItems的C1DockTabControl。

  1. 在XAML标签中，将您的光标移至<c1:C1DockControl></c1:C1DockControl>之间并敲击回车键。
  2. 在项目中，采用以下XAML标签添加一个C1DockTabControl：


XAML

<c1:C1DockTabControl Dock="Left">
<c1:C1DockTabItem Header="Toolbox">
<TextBlock Text="Here is your Toolbox." />
</c1:C1DockTabItem>
</c1:C1DockTabControl>


此XAML中包含一个标题为Toolbox的C1DockTabItem，如果您运行应用程序，C1DockTabControl外观将与下图的显示相似：

让我们添加另一个C1DockTabItem和C1DockTabControl，此时当您运行应用程序时，可以选择C1DockTabControl的标签，停靠或者浮动窗口。

  1. 请在XAML中</c1:C1DockTabItem>标签之后，添加另一个C1DockTabItem和C1DockTabControl，此时C1DockControl的XAML将与下述标签相似：

    XAML

    <c1:C1DockControl>
    <c1:C1DockTabControl Dock="Left">
    <c1:C1DockTabItem Header="Toolbox">
    <TextBlock Text="Here is the Toolbox." />
    </c1:C1DockTabItem>
    <c1:C1DockTabItem Header="Project">
    <TextBlock Text="Tree of files" />
    </c1:C1DockTabItem>
    </c1:C1DockTabControl>

    <c1:C1DockTabControl DockWidth="500" ShowHeader="False">
    <c1:C1DockTabItem Header="myfile.ext">
    <TextBlock Text="This is the text of myfile.ext" />
    </c1:C1DockTabItem>
    </c1:C1DockTabControl>
    </c1:C1DockControl>
    在下一步中您将运行应用程序及改变窗口的停靠模式。

    第三步：运行应用程序

    您已经成功创建了一个包含C1DockControl和多个标签项的WPF或或Silverlight应用程序，接下来请您完成以下步骤运行应用程序：
  2. 从菜单中选择调试调试，再选择启动调试启动调试，此时您可以预览应用程序的外观，其外观会与下图相似：



Toolbox停靠在左边，正如我们在XAML中的设定。

  1. 点击Toolbox标题栏中的向下箭头选项，可以选择浮动、滑动或者隐藏C1DockControl选项。



注意到您也可点击项目标签来选择任意的C1DockControl项。
如果您点击了图钉按钮图钉按钮 ， C1DockTabItems会出现在左侧。当再点击标签时它会被滑动打开。

如果您点击隐藏隐藏按钮 ， C1DockControl将会被隐藏。

  1. 选择Toolbox标题栏，拖拽并覆盖标签为myfile.ext的C1DockControl，注意到停靠指示器会出现在停靠区域，当您来回拖动时停靠区域会出现蓝色的阴影效果。



其次需要注意的是，附有myfile.ext C1DockTabItem的C1DockControl没有标题，因此我们不能将设置ShowHeader为False。
恭喜您！您已经成功的完成了WPF及及Silverlight版版DockControl的快速入门，在快速入门中，您可以使用C1DockControl来创建几个可以浮动或者停靠的窗口。

XAML快速参考

本主题主要给出了一个如何采用XAML创建C1DockControl、C1DockGroup、C1DockTabControl及C1DockTabItem的快速概要。在开发之前，需要在根元素标签下添加一个C1命名声明：:
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
以下给出一个停靠的布局模板：

以下是停靠布局模板的XAML描述：

XAML

<c1:C1DockControl x:Name="dockControl" Margin="-128,0,12,127">
<c1:C1DockGroup>
<c1:C1DockTabControl Dock="Top">
<c1:C1DockTabItem Header="Tab 1" TabShape="Sloped">
<!-Your Content Here->
</c1:C1DockTabItem>
<c1:C1DockTabItem Header="Tab 2" TabShape="Sloped">
<!-Your Content Here->
</c1:C1DockTabItem>
</c1:C1DockTabControl>
<c1:C1DockTabControl>
<c1:C1DockTabItem Header="Tab 3" TabShape="Sloped" >
<!-Your Content Here->
</c1:C1DockTabItem>
</c1:C1DockTabControl>
</c1:C1DockGroup>
<c1:C1DockGroup>
<c1:C1DockTabControl Dock="Top" DockWidth="500" DockHeight="500" TabItemShape="Rounded">
<c1:C1DockTabItem Header="Tab 4">
<!-Your Content Here->
</c1:C1DockTabItem>

<c1:C1DockTabItem Header="Tab 5">
<!-Your Content Here->
</c1:C1DockTabItem>
</c1:C1DockTabControl>
<c1:C1DockTabControl>
<c1:C1DockTabItem Header="Tab 6">
<!-Your Content Here->
</c1:C1DockTabItem>
</c1:C1DockTabControl>
</c1:C1DockGroup>
<c1:C1DockTabControl>
<c1:C1DockTabItem Header="Tab 7" TabShape="Sloped">
<!-Your Content Here->
</c1:C1DockTabItem>
<c1:C1DockTabItem Header="Tab 8" TabShape="Sloped">
<!-Your Content Here->
</c1:C1DockTabItem>
</c1:C1DockTabControl>
</c1:C1DockControl>

  • No labels