运行环境：blend 4.0
一个漂亮的按钮和布局效果会带给用户不一样的感受，blend中可以自定义许多漂亮的按钮，今天我就做了这样一个按钮，当然是模仿所致，所以有许多不足，请见谅，本文纯属自己练笔之作。
View Code
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="RecDemo.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Margin="0,0,0,-14">
<Image Source="image/快速入口切图/未标题-3.png" Stretch="Fill" Width="38" Height="Auto" Margin="0,0,0,15.837"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Margin="0,-33,-5,-24">
<Image RenderTransformOrigin="2.553,3.486" Source="image/快速入口切图/积累.png" Stretch="Fill" Width="38" Height="37"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,52,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Grid HorizontalAlignment="Right" Width="160" Margin="0,0,30,0" Height="162" VerticalAlignment="Bottom">
<Image x:Name="image1" Margin="-429,-165,-21,8" Source="pack://siteoforigin:,,,/image/快速入口切图/桌面.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Ellipse Margin="-240,7,0,9" HorizontalAlignment="Left" Width="152">
<Ellipse.Effect>
<DropShadowEffect BlurRadius="3" Direction="230"/>
</Ellipse.Effect>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#24FFF3F3" Offset="0"/>
<GradientStop Color="#34544C4C" Offset="0.979"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="-240,7,0,9" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="10" Fill="#1FFFFFFF" HorizontalAlignment="Left" Width="152">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Effect>
<DropShadowEffect Direction="271"/>
</Ellipse.Effect>
</Ellipse>
<Rectangle Margin="-232,79,0,0" HorizontalAlignment="Left" Height="1.75" VerticalAlignment="Top" Width="138.5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFDFD" Offset="0.008"/>
<GradientStop Color="#7F292727" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FFFF3F3" Offset="0"/>
<GradientStop Color="#7F544C4C" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Margin="-232,79,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Height="1.75" VerticalAlignment="Top" Width="138.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFDFD" Offset="0.008"/>
<GradientStop Color="#FF292727" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FFFF3F3" Offset="0"/>
<GradientStop Color="#7F544C4C" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Button Content="人脉" Margin="-208.833,23.75,0,0" Style="{DynamicResource ButtonStyle1}" Foreground="#FFFDF9F9" HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="38"/>
<Button Content="人脉" Margin="-147.5,23.75,0,0" Style="{DynamicResource ButtonStyle1}" Foreground="#FFFDF9F9" HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="38"/>
<Button Content="人脉" Margin="-208.833,0,0,40.25" Style="{DynamicResource ButtonStyle1}" Foreground="#FFFDF9F9" HorizontalAlignment="Left" Width="38" Height="37" VerticalAlignment="Bottom"/>
<Button Content="人脉" Margin="-147.5,0,0,40.25" Style="{DynamicResource ButtonStyle1}" Foreground="#FFFDF9F9" HorizontalAlignment="Left" Width="38" Height="37" VerticalAlignment="Bottom"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="37" Source="image/快速入口切图/选中图标.png" Stretch="Fill" VerticalAlignment="Top" Width="38" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Grid>
</Window>