利用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>

 

最终效果如下图：

 

 

是不是很酷？