locked
How to implement Visual State manager in WPF ? RRS feed

  • Question

  • Hi all,

             How to implement Visual State  manager  in WPF .

            Thanks

    Aniruddha Acharya


    A.Acharya Feedback to us Develop and promote your apps in Windows Store Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, March 13, 2013 9:35 PM

Answers

  • Nothing much difficult in it.. you can use the things as like in Silverlight. There may be slight changes in the Storyboard classes. Better create the Story board as you want and just replace it in your code.

    <Style TargetType="local:MyControl">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Gray" />
            <Setter Property="BorderThickness" Value="1,1,0,0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:MyControl">
                        <Border x:Name="PART_Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup>
                                    <VisualState x:Name="IsFirstBorder" />
                                    <VisualState x:Name="IsLastBorder">
                                        <Storyboard BeginTime="0">
                                            <ThicknessAnimation BeginTime="0"
                                                                Duration="1"
                                                                Storyboard.TargetName="PART_Border"
                                                                Storyboard.TargetProperty="BorderThickness"
                                                                To="1, 1, 0, 1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



    sankar

    • Marked as answer by Lisa Zhu Monday, March 25, 2013 11:38 AM
    Thursday, March 14, 2013 4:19 AM
  • With respect to the documentation, with examples, for VisualStateManager and - optionally - StoryBoard usage in WPF, these links will also help:
    VisualStateManager Class
    Storyboards Overview

    • Marked as answer by Lisa Zhu Monday, March 25, 2013 11:38 AM
    Thursday, March 14, 2013 6:27 AM

All replies

  • Nothing much difficult in it.. you can use the things as like in Silverlight. There may be slight changes in the Storyboard classes. Better create the Story board as you want and just replace it in your code.

    <Style TargetType="local:MyControl">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Gray" />
            <Setter Property="BorderThickness" Value="1,1,0,0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:MyControl">
                        <Border x:Name="PART_Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup>
                                    <VisualState x:Name="IsFirstBorder" />
                                    <VisualState x:Name="IsLastBorder">
                                        <Storyboard BeginTime="0">
                                            <ThicknessAnimation BeginTime="0"
                                                                Duration="1"
                                                                Storyboard.TargetName="PART_Border"
                                                                Storyboard.TargetProperty="BorderThickness"
                                                                To="1, 1, 0, 1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



    sankar

    • Marked as answer by Lisa Zhu Monday, March 25, 2013 11:38 AM
    Thursday, March 14, 2013 4:19 AM
  • With respect to the documentation, with examples, for VisualStateManager and - optionally - StoryBoard usage in WPF, these links will also help:
    VisualStateManager Class
    Storyboards Overview

    • Marked as answer by Lisa Zhu Monday, March 25, 2013 11:38 AM
    Thursday, March 14, 2013 6:27 AM