public class FlipPanel:Control
    {

    }

public static readonly DependencyProperty FrontContentProperty =
            DependencyProperty.Register("FrontContent", typeof(object), typeof(FlipPanel), null);

 /// <summary>
/// 前面內(nèi)容
/// </summary>
public object FrontContent
{
   get { return GetValue(FrontContentProperty); }
   set { SetValue(FrontContentProperty, value); }
}

public static readonly DependencyProperty BackContentProperty =
            DependencyProperty.Register("BackContent", typeof(object), typeof(FlipPanel), null);

        /// <summary>
        /// 背面內(nèi)容
        /// </summary>
        public object BackContent
        {
            get { return GetValue(BackContentProperty); }
            set { SetValue(BackContentProperty, value); }
        }

public static readonly DependencyProperty IsFlippedProperty =
            DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipPanel), null);

        /// <summary>
        /// 是否翻轉(zhuǎn)
        /// </summary>
        public bool IsFlipped
        {
            get { return (bool)GetValue(IsFlippedProperty); }
            set { 
                SetValue(IsFlippedProperty, value);
                ChangeVisualState(true);
            }
        }

public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FlipPanel), null);

        /// <summary>
        /// 控件邊框圓角
        /// </summary>
        public CornerRadius CornerRadius
        {
            get
            {
                return (CornerRadius)GetValue(CornerRadiusProperty);
            }
            set
            {
                SetValue(CornerRadiusProperty, value);
            }
        }

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">
    <Style TargetType="{x:Type local:FlipPanel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FlipPanel">
                    ...
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipPanel), new FrameworkPropertyMetadata(typeof(FlipPanel)));

    [TemplatePart(Name = "FlipButton", Type = typeof(ToggleButton))]
    [TemplatePart(Name = "FlipButtonAlternate", Type = typeof(ToggleButton))]
    [TemplateVisualState(Name = "Normal", GroupName = "ViewStates")]
    [TemplateVisualState(Name = "Flipped", GroupName = "ViewStates")]
    public class FlipPanel : Control
    {

    }

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">
    <Style TargetType="{x:Type local:FlipPanel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FlipPanel}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>

                        <!-- This is the front content. -->
                        <Border x:Name="FrontContent" BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               CornerRadius="{TemplateBinding CornerRadius}"
               >
                            <ContentPresenter
                     Content="{TemplateBinding FrontContent}">
                            </ContentPresenter>
                        </Border>

                        <!-- This is the back content. -->
                        <Border x:Name="BackContent" BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}"
           CornerRadius="{TemplateBinding CornerRadius}"
           >
                            <ContentPresenter
                     Content="{TemplateBinding BackContent}">
                            </ContentPresenter>
                        </Border>

                        <!-- This the flip button. -->
                        <ToggleButton Grid.Row="1" x:Name="FlipButton" 
                     Margin="0,10,0,0" >
                        </ToggleButton>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

<ToggleButton Grid.Row="1" x:Name="FlipButton" RenderTransformOrigin="0.5,0.5"
                     Margin="0,10,0,0" Width="19" Height="19">
                            <ToggleButton.Template>
                                <ControlTemplate>
                                    <Grid>
                                        <Ellipse Stroke="#FFA9A9A9"  Fill="AliceBlue"  />
                                        <Path Data="M1,1.5L4.5,5 8,1.5"
                             Stroke="#FF666666" StrokeThickness="2"
                             HorizontalAlignment="Center" VerticalAlignment="Center">
                                        </Path>
                                    </Grid>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.RenderTransform>
                                <RotateTransform x:Name="FlipButtonTransform" Angle="-90"></RotateTransform>
                            </ToggleButton.RenderTransform>
                        </ToggleButton>

 <ControlTemplate TargetType="{x:Type local:FlipPanel}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            ...
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
</ControlTemplate>

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="ViewStates">
       <VisualState x:Name="Normal">
            <Storyboard>
               ...
            </Storyboard>
       </VisualState>
   </VisualStateGroup>
   <VisualStateGroup x:Name="FocusStates">
       <VisualState x:Name="Flipped">
            <Storyboard>
               ...
            </Storyboard>
       </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<VisualState x:Name="Normal">
     <Storyboard>
           <DoubleAnimation Storyboard.TargetName="BackContent" 
                       Storyboard.TargetProperty="Opacity" To="0" Duration="0" ></DoubleAnimation>
     </Storyboard>
</VisualState>

<VisualState x:Name="Flipped">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="90" Duration="0">    
        </DoubleAnimation>
     <DoubleAnimation Storyboard.TargetName="FrontContent" 
                       Storyboard.TargetProperty="Opacity" To="0" Duration="0"></DoubleAnimation>
    </Storyboard>
</VisualState>

 <VisualStateGroup x:Name="ViewStates">
      <VisualStateGroup.Transitions>
           <VisualTransition GeneratedDuration="0:0:0.7">    
           </VisualTransition>
      </VisualStateGroup.Transitions>
      <VisualState x:Name="Normal">
       ...
      </VisualState>
</VisualStateGroup>

<VisualStateGroup.Transitions>
       <VisualTransition To="Flipped" GeneratedDuration="0:0:0.5"></VisualTransition>
       <VisualTransition To="Normal" GeneratedDuration="0:0:0.1"></VisualTransition>
</VisualStateGroup.Transitions>

<VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.7" To="Flipped">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="90" Duration="0:0:0.2"></DoubleAnimation>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition GeneratedDuration="0:0:0.7" To="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0.2"></DoubleAnimation>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>

public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            ToggleButton flipButton = base.GetTemplateChild("FlipButton") as ToggleButton;
            if (flipButton != null) flipButton.Click += flipButton_Click;

            // Allow for two flip buttons if needed (one for each side of the panel).
            // This is an optional design, as the control consumer may use template
            // that places the flip button outside of the panel sides, like the 
            // default template does.
            ToggleButton flipButtonAlternate = base.GetTemplateChild("FlipButtonAlternate") as ToggleButton;
            if (flipButtonAlternate != null)
                flipButtonAlternate.Click += flipButton_Click;

            this.ChangeVisualState(false);
        }

private void flipButton_Click(object sender, RoutedEventArgs e)
        {
            this.IsFlipped = !this.IsFlipped;
        }

private void ChangeVisualState(bool useTransitions)
{
            if (!this.IsFlipped)
            {
                VisualStateManager.GoToState(this, "Normal", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Flipped", useTransitions);
            }
}

<Window x:Class="CustomControlsClient.FlipPanelTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="FlipPanelTest" Height="300" Width="300" 
        xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls" >
    <Grid x:Name="LayoutRoot" Background="White">
        <lib:FlipPanel x:Name="panel" BorderBrush="DarkOrange" BorderThickness="3" IsFlipped="True"
         CornerRadius="4" Margin="10">
            <lib:FlipPanel.FrontContent>
                <StackPanel Margin="6">
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkOrange">This is the front side of the FlipPanel.</TextBlock>
                    <Button Margin="3" Padding="3" Content="Button One"></Button>
                    <Button Margin="3" Padding="3" Content="Button Two"></Button>
                    <Button Margin="3" Padding="3" Content="Button Three"></Button>
                    <Button Margin="3" Padding="3" Content="Button Four"></Button>
                </StackPanel>
            </lib:FlipPanel.FrontContent>
            <lib:FlipPanel.BackContent>
                <Grid Margin="6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkMagenta">This is the back side of the FlipPanel.</TextBlock>
                    <Button Grid.Row="2" Margin="3" Padding="10" Content="Flip Back to Front" HorizontalAlignment="Center" VerticalAlignment="Center" Click="cmdFlip_Click"></Button>
                </Grid>
            </lib:FlipPanel.BackContent>
        </lib:FlipPanel>
    </Grid>
</Window>

private void cmdFlip_Click(object sender, RoutedEventArgs e)
        {
            panel.IsFlipped = !panel.IsFlipped;
        }