SplitCloseThemeAnimation SplitCloseThemeAnimation SplitCloseThemeAnimation Class

Represents the preconfigured animation that conceals a target UI using a split animation.

Syntax

Declaration

public sealed class SplitCloseThemeAnimationpublic sealed class SplitCloseThemeAnimationPublic NotInheritable Class SplitCloseThemeAnimation
<SplitCloseThemeAnimation .../>

Inheritance Hierarchy

Inherited Members

Inherited properties

, , , , , , , , , , , , ,

Inherited methods

, , , , , ,

Inherited events

Remarks

Note that setting the Duration property has no effect on this object since the duration is preconfigured.

Examples

The following is an example of a template of a custom control that uses split open and split close theme animations.


<!-- Example template of a custom control that uses split open and 
     split close theme animations. -->
<ControlTemplate TargetType="local:SplitOpenControl">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OpenStates">
                <VisualState x:Name="Open">
                    <Storyboard>
                        <SplitOpenThemeAnimation 
                            OpenedTargetName="contentBorder" 
                            ContentTargetName="content" 
                            ClosedTargetName="targetRect"
                            ContentTranslationDirection="Left"
                            ContentTranslationOffset="200"  
                            OffsetFromCenter="0"
                            OpenedLength="200"
                            ClosedLength="0"
                 />
                        <DoubleAnimation 
                            Storyboard.TargetName="targetRect" 
                            Storyboard.TargetProperty="Opacity" 
                            To="0" 
                            Duration="0" 
                 />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Closed">
                    <Storyboard>
                        <SplitCloseThemeAnimation
                            OpenedTargetName="contentBorder" 
                            ContentTargetName="content" 
                            ClosedTargetName="targetRect"
                            ContentTranslationDirection="Left"
                            ContentTranslationOffset="-200"  
                            OffsetFromCenter="0"
                            OpenedLength="200"
                            ClosedLength="0"
                 />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Rectangle x:Name="targetRect" Width="100" Height="100" Fill="Blue"/>

        <Popup IsOpen="False" Height="50" Width="200" x:Name="contentPopup">
            <Border x:Name="contentBorder" BorderBrush="Orange" BorderThickness="3">
                <TextBlock x:Name="content" Text="Hello World" FontSize="20"/>
            </Border>
        </Popup>
    </Grid>
</ControlTemplate>
public sealed class SplitOpenControl : Control
{
    private Popup _contentPopup;
    public SplitOpenControl()
    {
        this.DefaultStyleKey = typeof(SplitOpenControl);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _contentPopup = GetTemplateChild("contentPopup") as Popup;
    }

    protected override void OnPointerPressed(PointerRoutedEventArgs e)
    {
        this.CapturePointer(e.Pointer);
        _contentPopup.IsOpen = true;
        VisualStateManager.GoToState(this, "Open", true);            
    }

    protected override void OnPointerReleased(PointerRoutedEventArgs e)
    {            
        VisualStateManager.GoToState(this, "Closed", true);
        this.ReleasePointerCapture(e.Pointer);
    }
}
// SplitOpenControl.h:
public ref class SplitOpenControl sealed : public Windows::UI::Xaml::Controls::Control
{
public:
    SplitOpenControl();
protected:
    virtual void OnApplyTemplate() override;
    virtual void OnPointerPressed(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
    virtual void OnPointerReleased(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
private:
    Windows::UI::Xaml::Controls::Primitives::Popup ^m_contentPopup;
};

// SplitOpenControl.cpp:
SplitOpenControl::SplitOpenControl()
{
    DefaultStyleKey = "MyApp.SplitOpenControl";
}

void SplitOpenControl::OnApplyTemplate()
{
    m_contentPopup = static_cast<Popup^>(GetTemplateChild("contentPopup"));
}

void SplitOpenControl::OnPointerPressed(PointerRoutedEventArgs^ e)
{
    CapturePointer(e->Pointer);
    m_contentPopup->IsOpen = true;
    VisualStateManager::GoToState(this, "Open", true);
}

void SplitOpenControl::OnPointerReleased(PointerRoutedEventArgs^ e)
{
    VisualStateManager::GoToState(this, "Closed", true);
    ReleasePointerCapture(e->Pointer);
}

Constructors summary

Initializes a new instance of the SplitCloseThemeAnimation class.

Properties summary

Gets or sets the initial size of the target element in the animation direction.

Identifies the ClosedLength dependency property.

Gets or sets the UI element that specifies the initial clip size.

Gets or sets the identifying name of the UI element that specifies the initial clip size.

Identifies the ClosedTargetName dependency property.

Identifies the ClosedTarget dependency property.

Gets or sets the UI element that will be translated. Typically this is a child/part of the element identified by OpenedTargetName or OpenedTarget.

Gets or sets the identifying name of the UI element that will be translated. Typically this is a child/part of the element identified by OpenedTargetName.

Identifies the ContentTargetName dependency property.

Identifies the ContentTarget dependency property.

Gets or sets a value that determines which direction the content should translate when the animation runs.

Identifies the ContentTranslationDirection dependency property.

Gets or sets the pixels to translate by when the animation runs.

Identifies the ContentTranslationOffset dependency property.

Gets or sets an offset from the center of the opened target.

Identifies the OffsetFromCenter dependency property.

Gets or sets the final size of the target UI element.

Identifies the OpenedLength dependency property.

Gets or sets the UI element that will be clipped.

Gets or sets the identifying name of the UI element that will be clipped.

Identifies the OpenedTargetName dependency property.

Identifies the OpenedTarget dependency property.

Constructors

  • SplitCloseThemeAnimation()
    SplitCloseThemeAnimation()
    SplitCloseThemeAnimation()
    SplitCloseThemeAnimation()

    Initializes a new instance of the SplitCloseThemeAnimation class.

    public SplitCloseThemeAnimation()public New()Public Sub New()public SplitCloseThemeAnimation()

Properties

  • ClosedLength
    ClosedLength
    ClosedLength
    ClosedLength

    Gets or sets the initial size of the target element in the animation direction.

    public double ClosedLength { get; set; }public double ClosedLength { get; set; }Public ReadWrite Property ClosedLength As doublepublic double ClosedLength { get; set; }
    <SplitCloseThemeAnimation ClosedLength="double"/>
    

    Property Value

    • double
      double
      double

      The initial size of the target in pixels.

  • ClosedLengthProperty
    ClosedLengthProperty
    ClosedLengthProperty
    ClosedLengthProperty

    Identifies the ClosedLength dependency property.

    public static DependencyProperty ClosedLengthProperty { get; }public static DependencyProperty ClosedLengthProperty { get; }Public Static ReadOnly Property ClosedLengthProperty As DependencyPropertypublic static DependencyProperty ClosedLengthProperty { get; }

    Property Value

  • ClosedTarget
    ClosedTarget
    ClosedTarget
    ClosedTarget

    Gets or sets the UI element that specifies the initial clip size.

    public DependencyObject ClosedTarget { get; set; }public DependencyObject ClosedTarget { get; set; }Public ReadWrite Property ClosedTarget As DependencyObjectpublic DependencyObject ClosedTarget { get; set; }

    Property Value

    Remarks

    Don't set this in XAML. For a XAML declaration, use ClosedTargetName instead.

  • ClosedTargetName
    ClosedTargetName
    ClosedTargetName
    ClosedTargetName

    Gets or sets the identifying name of the UI element that specifies the initial clip size.

    public string ClosedTargetName { get; set; }public string ClosedTargetName { get; set; }Public ReadWrite Property ClosedTargetName As stringpublic string ClosedTargetName { get; set; }
    <SplitCloseThemeAnimation ClosedTargetName="nameString" />
    

    Property Value

    • string
      string
      string

      The reference name. This is typically the x:Name of the relevant element as declared in XAML.

    Remarks

    If this target is not provided, the animation runs assuming that the split will happen from the center.

  • ClosedTargetNameProperty
    ClosedTargetNameProperty
    ClosedTargetNameProperty
    ClosedTargetNameProperty

    Identifies the ClosedTargetName dependency property.

    public static DependencyProperty ClosedTargetNameProperty { get; }public static DependencyProperty ClosedTargetNameProperty { get; }Public Static ReadOnly Property ClosedTargetNameProperty As DependencyPropertypublic static DependencyProperty ClosedTargetNameProperty { get; }

    Property Value

  • ClosedTargetProperty
    ClosedTargetProperty
    ClosedTargetProperty
    ClosedTargetProperty

    Identifies the ClosedTarget dependency property.

    public static DependencyProperty ClosedTargetProperty { get; }public static DependencyProperty ClosedTargetProperty { get; }Public Static ReadOnly Property ClosedTargetProperty As DependencyPropertypublic static DependencyProperty ClosedTargetProperty { get; }

    Property Value

  • ContentTarget
    ContentTarget
    ContentTarget
    ContentTarget

    Gets or sets the UI element that will be translated. Typically this is a child/part of the element identified by OpenedTargetName or OpenedTarget.

    public DependencyObject ContentTarget { get; set; }public DependencyObject ContentTarget { get; set; }Public ReadWrite Property ContentTarget As DependencyObjectpublic DependencyObject ContentTarget { get; set; }

    Property Value

    Remarks

    Don't set this in XAML. For a XAML declaration, use ContentTargetName instead.

  • ContentTargetName
    ContentTargetName
    ContentTargetName
    ContentTargetName

    Gets or sets the identifying name of the UI element that will be translated. Typically this is a child/part of the element identified by OpenedTargetName.

    public string ContentTargetName { get; set; }public string ContentTargetName { get; set; }Public ReadWrite Property ContentTargetName As stringpublic string ContentTargetName { get; set; }
    <SplitCloseThemeAnimation ContentTargetName="nameString" />
    

    Property Value

    • string
      string
      string

      The name of the UI element that will be translated.

  • ContentTargetNameProperty
    ContentTargetNameProperty
    ContentTargetNameProperty
    ContentTargetNameProperty

    Identifies the ContentTargetName dependency property.

    public static DependencyProperty ContentTargetNameProperty { get; }public static DependencyProperty ContentTargetNameProperty { get; }Public Static ReadOnly Property ContentTargetNameProperty As DependencyPropertypublic static DependencyProperty ContentTargetNameProperty { get; }

    Property Value

  • ContentTargetProperty
    ContentTargetProperty
    ContentTargetProperty
    ContentTargetProperty

    Identifies the ContentTarget dependency property.

    public static DependencyProperty ContentTargetProperty { get; }public static DependencyProperty ContentTargetProperty { get; }Public Static ReadOnly Property ContentTargetProperty As DependencyPropertypublic static DependencyProperty ContentTargetProperty { get; }

    Property Value

  • ContentTranslationDirection
    ContentTranslationDirection
    ContentTranslationDirection
    ContentTranslationDirection

    Gets or sets a value that determines which direction the content should translate when the animation runs.

    public AnimationDirection ContentTranslationDirection { get; set; }public AnimationDirection ContentTranslationDirection { get; set; }Public ReadWrite Property ContentTranslationDirection As AnimationDirectionpublic AnimationDirection ContentTranslationDirection { get; set; }
    <SplitCloseThemeAnimation ContentTranslationDirection="animationDirectionMemberName" />
    

    Property Value

  • ContentTranslationDirectionProperty
    ContentTranslationDirectionProperty
    ContentTranslationDirectionProperty
    ContentTranslationDirectionProperty

    Identifies the ContentTranslationDirection dependency property.

    public static DependencyProperty ContentTranslationDirectionProperty { get; }public static DependencyProperty ContentTranslationDirectionProperty { get; }Public Static ReadOnly Property ContentTranslationDirectionProperty As DependencyPropertypublic static DependencyProperty ContentTranslationDirectionProperty { get; }

    Property Value

  • ContentTranslationOffset
    ContentTranslationOffset
    ContentTranslationOffset
    ContentTranslationOffset

    Gets or sets the pixels to translate by when the animation runs.

    public double ContentTranslationOffset { get; set; }public double ContentTranslationOffset { get; set; }Public ReadWrite Property ContentTranslationOffset As doublepublic double ContentTranslationOffset { get; set; }
    <SplitCloseThemeAnimation ContentTranslationOffset="double" />
    

    Property Value

    • double
      double
      double

      A distance in pixels.

  • ContentTranslationOffsetProperty
    ContentTranslationOffsetProperty
    ContentTranslationOffsetProperty
    ContentTranslationOffsetProperty

    Identifies the ContentTranslationOffset dependency property.

    public static DependencyProperty ContentTranslationOffsetProperty { get; }public static DependencyProperty ContentTranslationOffsetProperty { get; }Public Static ReadOnly Property ContentTranslationOffsetProperty As DependencyPropertypublic static DependencyProperty ContentTranslationOffsetProperty { get; }

    Property Value

  • OffsetFromCenter
    OffsetFromCenter
    OffsetFromCenter
    OffsetFromCenter

    Gets or sets an offset from the center of the opened target.

    public double OffsetFromCenter { get; set; }public double OffsetFromCenter { get; set; }Public ReadWrite Property OffsetFromCenter As doublepublic double OffsetFromCenter { get; set; }
    <SplitCloseThemeAnimation OffsetFromCenter="double" />
    

    Property Value

    • double
      double
      double

      An offset in pixels. The default is 0.

  • OffsetFromCenterProperty
    OffsetFromCenterProperty
    OffsetFromCenterProperty
    OffsetFromCenterProperty

    Identifies the OffsetFromCenter dependency property.

    public static DependencyProperty OffsetFromCenterProperty { get; }public static DependencyProperty OffsetFromCenterProperty { get; }Public Static ReadOnly Property OffsetFromCenterProperty As DependencyPropertypublic static DependencyProperty OffsetFromCenterProperty { get; }

    Property Value

  • OpenedLength
    OpenedLength
    OpenedLength
    OpenedLength

    Gets or sets the final size of the target UI element.

    public double OpenedLength { get; set; }public double OpenedLength { get; set; }Public ReadWrite Property OpenedLength As doublepublic double OpenedLength { get; set; }
    <SplitCloseThemeAnimation OpenedLength="double" />
    

    Property Value

    • double
      double
      double

      The final size. If left unset, the value defaults to the size of the opened target.

  • OpenedLengthProperty
    OpenedLengthProperty
    OpenedLengthProperty
    OpenedLengthProperty

    Identifies the OpenedLength dependency property.

    public static DependencyProperty OpenedLengthProperty { get; }public static DependencyProperty OpenedLengthProperty { get; }Public Static ReadOnly Property OpenedLengthProperty As DependencyPropertypublic static DependencyProperty OpenedLengthProperty { get; }

    Property Value

  • OpenedTarget
    OpenedTarget
    OpenedTarget
    OpenedTarget

    Gets or sets the UI element that will be clipped.

    public DependencyObject OpenedTarget { get; set; }public DependencyObject OpenedTarget { get; set; }Public ReadWrite Property OpenedTarget As DependencyObjectpublic DependencyObject OpenedTarget { get; set; }

    Property Value

    Remarks

    Don't set this in XAML. For a XAML declaration, use OpenedTargetName instead.

  • OpenedTargetName
    OpenedTargetName
    OpenedTargetName
    OpenedTargetName

    Gets or sets the identifying name of the UI element that will be clipped.

    public string OpenedTargetName { get; set; }public string OpenedTargetName { get; set; }Public ReadWrite Property OpenedTargetName As stringpublic string OpenedTargetName { get; set; }
    <SplitCloseThemeAnimation OpenedTargetName="nameString" />
    

    Property Value

    • string
      string
      string

      The reference name. This is typically the x:Name of the relevant element as declared in XAML.

  • OpenedTargetNameProperty
    OpenedTargetNameProperty
    OpenedTargetNameProperty
    OpenedTargetNameProperty

    Identifies the OpenedTargetName dependency property.

    public static DependencyProperty OpenedTargetNameProperty { get; }public static DependencyProperty OpenedTargetNameProperty { get; }Public Static ReadOnly Property OpenedTargetNameProperty As DependencyPropertypublic static DependencyProperty OpenedTargetNameProperty { get; }

    Property Value

  • OpenedTargetProperty
    OpenedTargetProperty
    OpenedTargetProperty
    OpenedTargetProperty

    Identifies the OpenedTarget dependency property.

    public static DependencyProperty OpenedTargetProperty { get; }public static DependencyProperty OpenedTargetProperty { get; }Public Static ReadOnly Property OpenedTargetProperty As DependencyPropertypublic static DependencyProperty OpenedTargetProperty { get; }

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.ActivatableAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute

Details

Assembly

Windows.UI.Xaml.Media.Animation.dll