利用ExpressionBlend打造精彩用户界面

### 利用Expression Blend打造精彩用户界面 #### 1. 动画基础与简单使用 在动画制作中，`Storyboard.TargetProperty` 起着关键作用，它能告知故事板（Storyboard），`Storyboard.TargetName` 所指定元素的哪些属性会逐关键帧地发生变化。例如，我们可以指定在时间为 0 和 0.5 时的关键帧，声明在时间 0 时属性值为 0，在时间 0.5 时属性值为 1（即 100%）。使用 `EasingDoubleKeyFrame` 声明的动画会以线性函数的方式递增。 使用步骤如下： 1. 从 Blend 中，在设备面板选择测试目标。 2. 按下 F5 或 Ctrl + F5，等待应用从网络获取信息。 3. 选择一个元素，观察矩形的不透明度增加。 4. 选择另一个元素，观察失去焦点的元素恢复正常。 #### 2. 更改应用皮肤 ##### 2.1 问题提出 我们希望根据用户选择的浅色或深色主题，使用不同的资源字典来定制应用，并使用假数据进行测试。 ##### 2.2 解决方案 需要创建包含不同画笔的字典，选择 `PhoneLightThemeVisibility`，并使用 Blend 内创建的示例数据应用偏好的主题。 ##### 2.3 具体操作流程 1. **创建项目**：可以在 Blend 或 Visual Studio 中创建 Windows Phone 新项目。 2. **添加字典**：在项目中添加名为 Skins 的文件夹，向该文件夹添加两个字典文件 `DarkTheme.xaml` 和 `LightTheme.xaml`。 3. **编辑 app.XAML 文件**：该文件会自动链接到字典，注意注释掉代表要应用主题的两行代码（在运行时生效，而非设计时）。若有两个主题共享的设置，可添加包含共享键的资源字典。示例代码如下： ```xml <ResourceDictionary.MergedDictionaries> <!--<ResourceDictionary Source="Skins/DarkTheme.xaml" />--> <!--<ResourceDictionary Source="Skins/LightTheme.xaml" />--> </ResourceDictionary.MergedDictionaries> ``` 4. **使用 Blend 的数据面板**： - 点击相应按钮显示菜单，选择“New Sample Data”。 - 在弹出的对话框中，选择数据源名称、定义范围的点以及数据源的可见性，将数据源命名为 `SampleDataSource`。若采用面向领域的方法，可在项目级别创建数据源以便在其他视图中重用，并在运行时启用示例数据。 - 此时基础模板会生成名为 `SampleDataSource` 的数据源，其中包含一个复杂类型，该类型中有一个由 `Property1` 和 `Property2` 组成的对象集合。为模拟应用领域，将这两个属性重命名为 `Reason` 和 `Money`，并通过点击集合旁边的加号添加 `Date` 属性。 - 点击“Edit Sample Value” 按钮编辑属性值，为 `Date` 定义类型为 `String Date`，为 `Money` 定义类型为 `String Price`，为 `Reason` 使用 `String loremipsum`，并指定集合中包含的项目数量，这里选择 30。 5. **创建视图模板**： - 设计师可将数据源中的集合拖到要显示列表的页面，创建一个已有 `ItemTemplate` 的列表框。基础模板可能不够吸引人，但能节省一些工作。初始模板代码如下： ```xml <DataTemplate x:Key="ItemTemplate"> <StackPanel> <TextBlock Text="{Binding Date}"/> <TextBlock Text="{Binding Money}"/> <TextBlock Text="{Binding Reason}"/> </StackPanel> </DataTemplate> ``` - 若想得到表格设计，可删除 `StackPanel`，使用 `Grid` 定义 182/76/200 像素的列，并在列表框上方创建另一个具有相同列的 `Grid` 作为表头。修改后的模板代码如下： ```xml <DataTemplate x:Key="ItemTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="182" /> <ColumnDefinition Width="76" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Date}" /> <TextBlock Text="{Binding Money}" Grid.Column="1" /> <TextBlock Text="{Binding Reason}" Grid.Column="2" /> </Grid> </DataTemplate> ``` 6. **定义主题画笔**： - 深色主题下的画笔定义示例： ```xml <SolidColorBrush x:Key="DateBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="ReasonBrush" Color="#FBBEBE00" /> <SolidColorBrush x:Key="MoneyBrush" Color="#FFFF0000" /> ``` - 浅色主题下的画笔定义示例： ```xml <SolidColorBrush x:Key="DateBrush" Color="#FF160FF9" /> <SolidColorBrush x:Key="ReasonBrush" Color="#FBE707AB" /> <SolidColorBrush x:Key="MoneyBrush" Color="#FFA90000" /> ``` 7. **运行时应用主题**：在 `App.xaml.cs` 文件中创建一个私有方法 `ApplyTheme()` 来应用主题，并在 `Launching` 或 `Activated` 事件中调用该方法。代码如下： ```csharp private void Application_Launching(object sender, LaunchingEventArgs e) { ApplyTheme(); } private void Application_Activated(object sender, ActivatedEventArgs e) { ApplyTheme(); } private void ApplyTheme() { Visibility vis = (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"]; ResourceDictionary dict = new ResourceDictionary(); dict.Source = new Uri((vis == System.Windows.Visibility.Visible) ? "/Skins/LightTheme.xaml" : "/Skins/DarkTheme.xaml", UriKind.Relative); Application.Current.Resources.MergedDictionaries.Clear(); Application.Current.Resources.MergedDictionaries.Add(dict); } ``` 以下是更改应用皮肤的操作流程图： ```mermaid graph TD A[创建项目] --> B[添加字典文件夹和文件] B --> C[编辑 app.XAML 文件] C --> D[使用 Blend 数据面板创建数据源] D --> E[创建视图模板] E --> F[定义主题画笔] F --> G[运行时应用主题] ``` #### 3. 创建酷炫动画 ##### 3.1 问题提出 为了让应用与用户的交互更加有趣，我们希望为应用添加动画效果。