演练：创建自定义起始页–第2部分

Visual Studio博客

2010年7月29日00

这是关于创建个性化版本的“开始页”的两部分演练的第二部分，该个性化版本使用户可以更改背景图像。这篇文章建立在我们之前创建的项目的基础上。如果你还没有这样做，我建议你演练的第一部分然后继续。

我们将讨论以下主题：

·将代码隐藏添加到起始页

·使用Visual Studio设置存储持久化用户设置

·在Visual Studio库中共享起始页

将代码隐藏添加到起始页

如果您乐于对图像进行硬编码，那么在上一个演练结束时创建的页面就可以了。但是，如果您希望能够在每次都不编辑XAML的情况下更改图像，则需要添加一些C#代码来处理此功能。在本节中，我们将添加打开文件浏览器对话框的功能，以便用户可以选择显示哪个图像作为背景。您可能还记得，在上一个演练中，我们从起始页XAML中删除了示例起始页用户控件。在本演练中，我们将修改UserControl并将其放置在起始页上。

1.添加UI以更改背景图像

2.使用“打开文件”对话框选择图像文件。

3.创建依赖属性以存储图像位置。

4.将图像源绑定到用户控件依赖属性

添加UI以更改背景图像

在接下来的步骤中，我们将删除用户控件中不必要的XAML，并添加带有事件处理程序的按钮。

打开MyControl.xaml文件并切换到xaml视图，删除用户控件的内容，使其如下所示：

将按钮添加到UserControl中，命名它并添加单击事件处理程序。当出现“<New Event Handler>”弹出窗口时，可以通过按tab键自动“连线”。

三。

最后在按钮内容中添加标题。最终结果如下：

选择背景图像

使用“打开文件”对话框为“开始页”选择背景图像

为了让用户选择要显示为背景的图像，我们需要使用文件浏览器对话框从文件系统中选择图像。在本节的其余部分中，我们将处理UserControl代码隐藏文件MyControl.xaml.cs。

在代码文件的顶部添加以下using语句。

使用Microsoft。Win32；

默认情况下，模板中不包含文件对话框的名称空间。

导航到从设计器图面添加的Button Click事件处理程序。这是我们将添加代码以打开文件对话框并设置背景图像的地方。我们只希望允许用户选择.jpg或.png文件作为背景，以便为具有这些扩展名的文件在对话框中添加过滤器。

///<摘要>

///启动打开文件对话框

///</summary>

///<param name=“sender”>

///<param name=“e”></param>

private void ChooseImageButton_Click（对象发送方，RoutedEventArgs e）

{

//“创建打开文件的实例”对话框

OpenFileDialog dlg=新的OpenFileDiaog（）；

//筛选对话框以仅显示图像

图纸。过滤器=“图像（*.PNG；*.JPG；）|*.PNG；

//显示打开的文件对话框

可为Null的<bool>result=dlg。ShowDialog（）；

}

有关打开文件对话框的更多信息，请参阅MSDN文章：http://msdn.microsoft.com/en-us/library/microsoft.win32.openfiledialog.aspx

使用WPF依赖项属性存储图像位置

现在我们有了选择图像的方法，我们需要创建一个WPF依赖属性来临时存储图像位置。使用依赖属性允许我们在源和起始页上的Image控件之间使用数据绑定。

要轻松添加依赖项属性，请键入“propdp”并按两次tab键。这将使用代码段为您创建依赖项属性大纲。确保在类中的任何方法之外执行此操作。

编辑依赖项属性模板，使最终结果如下：

公共字符串StartPageImage

{

获取{return（string）GetValue（StartPageImageProperty）；}

设置｛SetValue（StartPageImageProperty，value）；｝

}

//使用DependencyProperty作为StartPageImageProperty的后备存储。这将启用动画、样式、绑定等…

公共静态只读DependencyProperty StartPageImageProperty=

DependencyProperty。寄存器（“StartPageImage”，typeof（字符串），typeof，（MyControl），null）；

有关依赖项属性的详细信息，请参阅MSDN文章：http://msdn.microsoft.com/en-us/library/ms752914.aspx

三。

导航回添加文件对话框代码的Button Click事件处理程序。要将文件对话框中的图像位置存储在此新属性中，请在dlg之后添加以下代码。ShowDialog（）调用。

//处理对话框结果
if（结果==真）
{
StartPageImage=dlg。文件名；
}

切换回StartPage.xaml文件，使用注释“<！–”重新展开网格左列–>”。

向下滚动到“开始页选项”部分，因为这是放置控件的位置。

UserControl的名称空间已经包含在模板中，所以我们需要做的就是将控件的实例添加到页面中。

<my:MyControl x:Name=“ImageController”/>

6	现在剩下的工作就是替换StartPage顶部的硬编码图像源。XAML文件，它绑定到我们刚刚添加的UserControl。 <Image Source=“{Binding ElementName=ImageController，Path=StartPageImage}”Stretch=“UniformToFill”/>

使用Visual Studio设置存储

有代码支持用户更改起始页是很好的，但当用户关闭当前VS会话时，该信息将丢失。VisualStudio有一个内置设置存储，用户可以在其中跨会话持久化数据。设置存储基于集合的概念，每个希望存储数据的扩展都应该在自己的集合中这样做。它们很容易通过名称创建和访问。如果要存储用户设置，“起始页”项目模板会自动为您创建一个集合。

本节将介绍如何使用此商店的基本知识。我们将从检索以前存储的值开始。

打开MyControl。XAML。CS文件并导航到OnLoaded事件处理程序并取消注释设置存储示例代码。

更新示例代码中的变量名称，使其与此场景更加相关。

字符串路径=StartPageSettings。RetrieveString（“ImageSource”）；

添加以下代码以检查存储的值是否为空以及是否为有效的文件路径。最终结果应如下所示：

//从上一个会话加载控制用户设置。
字符串路径=StartPageSettings。RetrieveString（“ImageSource”）；
 
//将设置应用于依赖属性
if（路径！=null&&System.IO.File.Exists（路径））
             {
StartPageImage=路径；
             }

三。

将以下代码添加到ChooseImageButton_Click事件处理程序中，以存储用户选择的图像。最终结果应如下所示：

//处理打开文件对话框的结果
if（结果==真）
             {
StartPageImage=dlg。文件名；
StartPageSettings。StoreString（“图像源”，dlg.FileName）；
             }

生成并运行扩展，最终结果将跨VisualStudio会话存储图像文件路径。

注意：如果您的页面没有显示在实验实例中，请打开“工具”->“选项”->“启动设置”，然后选择“[已安装的扩展]”解决方案名称'。

有关设置存储的更多信息，请参阅MSDN文章：http://msdn.microsoft.com/en-us/library/ff460144.aspx

将起始页上载到Visual Studio库

现在，扩展已经完成，可以在VisualStudio库上展示了。接下来的步骤将完成获取模板生成的VSIX文件并将其作为免费扩展发布。发布之前，应确保VSIX文件中的内容包含对扩展名的准确描述。

1	将文件Path复制到解决方案的输出目录；这将使在上传过程中更容易找到文件。获取此路径的最快方法之一是单击解决方案资源管理器上下文菜单中的“在Windows资源管理器中打开文件夹”命令。
2	转到Visual Studio库然后单击“上载”按钮。
三。	如果您尚未使用Windows Live ID登录，此时将提示您登录。
4	登录后，选择“工具”作为扩展类型，然后单击“下一步”按钮。
5	选择“上传我的工具”并单击浏览按钮以指定要上传的文件。
6	粘贴从扩展的bin目录复制的路径，并选择“MySimpleStartPage”VSIX文件。将路径添加到页面后，单击“下一步”按钮。
7	填写此扩展的元数据，在本例中，我们只需检查“起始页”类别并添加简短描述。
8	在单击“创建贡献”按钮之前，您需要同意贡献协议。单击“创建贡献”按钮后，Visual Studio库将根据此处输入的信息为您的扩展创建一个页面。注意：在“发布”此页面之前，扩展不公开。
9	单击“发布”链接，使您的扩展公开可用。