4.3.3 倒影的实现

4.3.3  倒影的实现

倒影用来显示已有内容的倒置图像。在Expression Blend中创建倒影是很简单的，不过需要我们编写一点代码。我们待会儿就可以见到，实际上只需要一行代码就可以实现了。

需要注意的是，这和之前的版本有些不同，之前的Interactive Designer中默认的根元素是Grid，而在Blend中是Window，因为Grid是容器类型的控件，在其中可以包含多个元素，而在Window中只能包含一个元素。所以我们需要修改窗体的XAML代码，在ProductGrid外面套上一个Grid，给它取个名字叫GridContainer，见下面示例：

<Window>
......
<Grid x:Name="GridContainer">
<Grid.RowDefinitions>
<RowDefinition Height="0.757*"/>
<RowDefinition Height="0.243*"/>
</Grid.RowDefinitions>
<Grid x:Name="ProductGrid" DataContext="{Binding Mode=Default,
Source={StaticResource CatalogDS}, XPath=/Catalog/Products/
Product}" VerticalAlignment="Stretch" Height="Auto" Margin=
"0,0,0,0">
......
</Grid>
</Grid>
</Window>

然后在GridContainer中绘制一个矩形，命名为“Reflection”，Window中的控件结构关系如图4-39所示。

可能需要调整一下屏幕上ProductGrid的位置以放置这个实现倒影的矩形，因为在屏幕尺寸发生变化时，ProductGrid和Reflection的位置可能会发生变化导致界面超出我们的想象。所以这里需要添加一个横向的格子线，放到ProductGrid和Reflection之间，ProductGrid的底部与Reflection的顶部均与这条格子线对齐，如图4-40所示。

图4-40  在屏幕上放置实现倒影的矩形

将矩形的Fill和Stroke属性由纯色画笔改为“无画笔”，OpacityMask设置为全白色线性渐变，线性渐变的两边都设置为白色，左边的Alpha值设置为0.7，右边的Alpha值设置为0.0，如图4-41所示。

接下来需要在矩形中应用倒置转换，在转换面板上的翻转Tab页面中选择Y轴翻转，如图4-42所示。

现在需要编写一点代码，作用是将屏幕的内容拷贝到新添加的矩形中，翻转转换和透明度同时实现。

在项目面板中，找到Window1.xaml，打开扩展，将显示Window1.xaml.cs，如图4-43所示。

图4-43  编辑源代码

双击Window1.xaml.cs，进入代码编辑器。

我们需要加入初始化OnInitialized的处理（其实在初始化时已经被调用过了，但是因为在代码中没有处理而被忽略了），代码完成将ProductGrid图像拷贝到用于倒影的矩形中，代码如下：

public Window1()
{
this.InitializeComponent();
Reflection.Fill = new VisualBrush(ProductGrid);
}

太简单了吧，当运行应用程序时，我们可以看到倒影的效果。