利用WPF的Border制作扑克牌立体效果

偶然间发现通过修改WPF的Border，可以立即实现简单的立体效果：

第一步：

<Canvas x:Name="mainCanvas" Background="Green" Width="250" Height="250">
<Border BorderBrush="White" BorderThickness="5" CornerRadius="15" >

</Border>

效果如下图：



第二步：

在外面加一个Border,设置如下：

<Border BorderBrush="DarkGray" BorderThickness=".0,.0,2,2" CornerRadius="18" Width="140" Height="193" Canvas.Left="53" Canvas.Top="30">
<Border BorderBrush="White" BorderThickness="5" CornerRadius="15" >

</Border>

</Canvas>



可以看到颜色为DarkGray的Border造成了阴影效果。

再往里放张图片看看吧：（把图片设置成Border的背景就可以了）

完整的代码：

<Canvas x:Name="mainCanvas" Background="Green" Width="250" Height="250">
<Border BorderBrush="DarkGray" BorderThickness=".0,.0,2,2" CornerRadius="18" Width="140" Height="193" Canvas.Left="53" Canvas.Top="30">
<Border BorderBrush="White" BorderThickness="5" CornerRadius="15" >
<Border BorderBrush="Black" BorderThickness="1.5" CornerRadius="15">
<Border.Background>
<ImageBrush>
<ImageBrush.ImageSource>
<BitmapImage UriSource="metoo.jpg" />
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
</Border>
</Border>
</Canvas>

最终效果如下图：



是不是很酷？