P18 FlipPanel控件的讲解

1,进行Attributes设定,模板注册

    [TemplatePart(Name = "FlipButton", Type = typeof(ToggleButton)),
TemplatePart(Name = "FlipButtonAlternate", Type = typeof(ToggleButton)),
TemplateVisualState(Name = "Normal", GroupName = "ViewStates"),
TemplateVisualState(Name = "Flipped", GroupName = "ViewStates")]

2,注册依赖项属性

public object FrontContent
        {
            get
            {
                return GetValue(FrontContentProperty);
            }
            set
            {
                SetValue(FrontContentProperty, value);
            }
        }

        /// <summary>
        /// Back Content of the BackPanel
        /// </summary>
        public object BackContent
        {
            get
            {
                return GetValue(BackContentProperty);
            }
            set
            {
                SetValue(BackContentProperty, value);
            }
        }
        /// <summary>
        /// CornerRadius of the Control
        /// </summary>
        public CornerRadius CornerRadius
        {
            get
            {
                return (CornerRadius)GetValue(CornerRadiusProperty);
            }
            set
            {
                SetValue(CornerRadiusProperty, value);
            }
        }

        /// <summary>
        /// To show if Front Panel to show or Back Panel to show.
        /// </summary>
        public bool IsFlipped
        {
            get
            {
                return (bool)GetValue(IsFlippedProperty);
            }
            set
            {
                SetValue(IsFlippedProperty, value);

                ChangeVisualState(true);
            }
        }

3,进行OnApplyTemplate()---进行模板元素的事件绑定.

 base.OnApplyTemplate();

            //Attached Events
            ToggleButton flipButton = base.GetTemplateChild("FlipButton") as ToggleButton;
            if (flipButton != null) flipButton.Click += flipButton_Click;

            ToggleButton flipButtonAlternate = base.GetTemplateChild("FlipButtonAlternate") as ToggleButton;
            if (flipButtonAlternate != null)
                flipButtonAlternate.Click += flipButton_Click;

            this.ChangeVisualState(false);

4,FlipPanel.xmal解析

 <Style TargetType="{x:Type local:FlipPanel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FlipPanel}">
                    <Grid>

<!--添加可视化状态-- ViewStates为Group Name,>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ViewStates">

<!--添加到每个状态的Transitions动画,在GoState函数里面有参数.-->
                                <VisualStateGroup.Transitions>

<!--根据状态不同,按钮旋转90-->
                                    <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>
<!--根据到达当前状态,进行故事播放.-->
                                <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>
                        </VisualStateManager.VisualStateGroups>
<!--FlipPanel的内容-->
                        <Grid.RowDefinitions>

<!--FlipPanel切换区域-->
                            <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" 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>



                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

5,总结----最后一个参数表示是否触发xaml中的VisualTransition.

                //?GotoState false 和true有什么区别.
                VisualStateManager.GoToState(this, "Normal", useTransitions);