使用 Expression Blend 实现 Windows 应用商店应用的魔法 MVVM

• 下载 EasyMVVM.zip - 139.6 KB

您是否正在为 Windows 应用商店开发应用程序？您尝试过使用 Expression Blend 开发您的应用程序吗？Expression Blend for Windows Store apps 在进行 MVVM (Model View View Model) 开发时非常有价值。您如何利用 BLEND 的魔力来实现 MVVM？让我们深入了解一下。

入门

现在您已准备好观看 Expression Blend for Windows Store Applications 的神奇之处了。让我们创建一个空白的 Windows 应用商店应用程序项目。

创建完一个空项目后，然后创建一些文件夹，例如“Models”、“Views”和“View Models”。

将“MainPage.xaml”放在“Views”文件夹中，这样可以更轻松地管理视图、模型和视图模型。

创建模型

现在是时候为您的应用程序创建一些模型了。在此项目中，我个人选择了颜色作为我的选择。既然我选择了颜色，就让我们创建其相应的模型，即“ColorInfo”和“GroupInfo”。“ColorInfo”包含颜色应包含的信息。

这是 ColorInfo 模型的相应代码，

C#

  public class ColorInfo
    {
        public Color Color { get; set; }
        public string Name { get; set; }
        public SolidColorBrush Brush { get { return new SolidColorBrush(this.Color); } }
    }<!--[if IE]>

<![endif]-->

它包含颜色的名称及其其他相应信息。

第二个模型将是“GroupInfo”。它将有一个“ColorInfo”类型的数组。
 它基本上是一个组。

C#

    public class GroupInfo
    {
        public string Name { get; set; }
        public ColorInfo[] Colors { get; set; }
    }

太棒了，您现在已完成了“Models”，现在是时候深入研究“ViewModels”了。

创建 ViewModels

现在是时候创建“ViewModels”了。对于这个项目，我们将只创建一个“ViewModel”，即“MainPageViewModel”。在此 ViewModel 中，我使用了 LINQ 从“Colors”类中获取颜色，并将它们分成“五”个一组。

C#

 public class MainPageViewModel 
    {
        public MainPageViewModel()
        {
            var colors = typeof(Colors)
                .GetRuntimeProperties().Select(x => new ModelsColorInfo
                {
                    Name = x.Name,
                    Color = (Color)x.GetValue(null)
                });
            this.Groups.Add(new GroupInfo { Name = "Group 1", Colors = colors.Skip(00).Take(5).ToArray() });
            this.Groups.Add(new GroupInfo { Name = "Group 2", Colors = colors.Skip(05).Take(5).ToArray() });
            this.Groups.Add(new GroupInfo { Name = "Group 3", Colors = colors.Skip(10).Take(5).ToArray() });
            this.Groups.Add(new GroupInfo { Name = "Group 4", Colors = colors.Skip(15).Take(5).ToArray() });
            this.Groups.Add(new GroupInfo { Name = "Group 5", Colors = colors.Skip(20).Take(5).ToArray() });    
        }

        ObservableCollection<Models.GroupInfo> _Groups = new ObservableCollection<Models.GroupInfo>();
        public ObservableCollection<Models.GroupInfo> Groups { get { return _Groups; } }       
    }

    public abstract class BindableBase : System.ComponentModel.INotifyPropertyChanged
    {

        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        protected void SetProperty<T>(ref T storage, T value, [System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
        {
            if (!object.Equals(storage, value))
            {
                storage = value;
                if (PropertyChanged != null)
                    PropertyChanged(this, new System.ComponentModelPropertyChangedEventArgs(propertyName));
            }
        }
        protected void RaisePropertyChanged([System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new System.ComponentModelPropertyChangedEventArgs(propertyName));
        }
    <!--[if IE]>

<![endif]-->

以上就是 ViewModels 和 Models 的全部内容。现在是时候切换 IDE 了，即我们亲爱的 BLEND。

Blend 时间：(在 BLEND 中完成设计)

现在是 Expression Blend 展示其魔力的时候了。在创建了相应的 Models 和 View Models 后，设计应用程序会非常容易。既然您已切换到 ExpressionBlend，请转到 Expression Blend 的“DateTab”。底部会有一个 DataContext 选项卡。

 

单击“Set design-time DataContext”，会出现一个弹出窗口。

将“DataContext Type”选择为“DesignInstance”，
完成此操作后，您会看到一系列类。找到“MainPageViewModel”。如果您找不到它，这有时会在 Expression Blend 中发生，这是因为解决方案已在 Visual Studio 中编译，但尚未在 Blend 中生成。要解决此问题，请使用“Ctrl + Shift + Build”。在 Blend 中生成项目后，您会在列表中找到“MainPageViewModel”。选择它！

注意：不要忘记选中“IsDesignTimeCreatable”。

按照此过程，您会注意到“TAB”发生了变化。它看起来会像这样，

现在这里有“Groups”和“Colors”

“Groups”这里是基于我们在 Model 中创建的 GroupInfo 类。它包含 ColorInfo，现在命名为“Colors”。在这里，我们将把 Colors 拖放到 MainPage 上。

太棒了！您看到这里 Groups 已自动形成。它存在一个问题。我们可以看到颜色的名称，但有一个多余的标签，并且创建的 Item 中未显示“Color named”的颜色。要相应地进行设计，我们需要执行以下操作：

1. 右键单击 Item
2. 转到 Edit additional Template
3. Edit Generated Item
4. 然后选择“Edit Current”

现在注意“Objects&Timeline”选项卡，您会注意到它看起来会像这样。

这里，我们有一个包含两个 TextBlocks 的堆叠面板。在 Border 中有一个“Image”。实际上，这里不需要任何图像，因此我们将其删除。现在单击“Border”并将您的注意力转移到“Properties Tab”并执行以下操作：

1. 单击背景颜色末尾的小绿框。
2. 现在单击 Create DataBinding。
3. 选择 Colors，然后选择 SolidColorBrush。

您已完成。现在您会注意到颜色会出现在方框中。从“Objects&Timeline”中删除堆叠面板内多余的 TextBlock。

现在是时候让 Item 更加美观了。从 Objects and timelines Tab 中选择“Grid”，并减小其高度，使其看起来更漂亮一些。

现在从左上角添加一些边距，这样它就不会扩散到屏幕边缘，为此，单击 MainPage，然后转到 properties。在这里，在 margin 中设置您喜欢的上边距和左边距值。在我的例子中，该值为“33”。

这样我们的设计就完成了。但是，如果我们向应用程序添加 Semantic Zoom 控件呢？这倒是个不错的主意。

添加 Semantic Zoom

Semantic Zoom 是 Windows 8.1 SDK 中提供的一个控件。使用 Blend 添加 Semantic Zoom 非常容易。转到左上角的 Assets 选项卡，然后选择“Controls”的 semantic zoom control。

将其拖放到“Objects&Timeline”选项卡中的 Grid 上。
Semantic Zoom 内部有两个视图：

1. ZoomIn View
2. ZoomOut View

ZoomIn View 是应用程序的当前默认视图，而 ZoomOut view 是用户单击“减号按钮（位于 Metro 应用右下角）”以查看组时的视图。

注意
ZoomIn 和 ZoomOut 的快捷方式是：
Ctrl & '+'
Ctrl & "-"

对于 ZoomIn View，我们已经开发了 GridView，因此删除 ZoomInView 中的“GridView”，然后将默认的“GridView”拖到 ZoomInView Catagory。

 

对于 ZoomOut View，选择“GridView”并按照以下步骤操作：

1. 转到 DataContext 选项卡
2. 将 Groups 拖到屏幕上
3. 您会注意到 Groups 会出现在屏幕上。

看到 Groups 出现在屏幕上后，您需要这样做：

1. 右键单击 Item
2. 转到 Edit additional Template
3. Edit Generated Item
4. 然后选择“Edit Current”

现在这里有一个非常重要的事情，选择“Object and Timeline”中的 border。删除图片，然后只选择 Border。转到 properties，然后单击背景颜色末尾的小绿按钮。选择“Create Data Binding”。现在这里有 Groups，您需要将其绑定到该 Group 中的第一个颜色，我们称之为 Color[0]。

因此，选择 Color[0] 的 SolidColorBrush，您也可以通过更改 [0] 来选择任何颜色。完成绑定后，您会注意到 Groups 会显示如下。

是不是很神奇？您的所有应用程序都使用 Blend 设计。我希望您喜欢这个教程。

源代码

• MSDN CODE GALLARY
• 个人博客
• TechNet 文章