Custom VisualStateGroup in RadWindow ControlTemplate

2 posts, 0 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 09 Sep 2011 Link to this post

    I am building a RadWindow that will have two states--one that will appear above the hovered content and another state to appear below.  This is necessary because the style includes a callout arrow.

    To do this, I customized the default ControlTemplate to add a new VisualStateGroup and VisualStates:

        <!-- RadWindowTemplate -->
        <ControlTemplate x:Key="RadWindowTemplate" TargetType="telerikNavigation:RadWindow">
            <Grid x:Name="LayoutRoot" Margin="10 10 10 0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="15"/>
                </Grid.RowDefinitions>
     
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Disabled" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused" />
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="DragStates">
                        <VisualState x:Name="NotDragging" />
                        <VisualState x:Name="Dragging" />
                        <VisualState x:Name="Resizing" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="WindowStates">
                        <VisualState x:Name="NormalWindow" />
                        <VisualState x:Name="Maximized">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="WindowOuterBorder" Storyboard.TargetProperty="CornerRadius">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="WindowOuterBorder" Storyboard.TargetProperty="BorderThickness">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentOuterBorder" Storyboard.TargetProperty="BorderThickness">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0 1 0 0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentOuterBorder" Storyboard.TargetProperty="Margin">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButtons" Storyboard.TargetProperty="Margin">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Shadow" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Minimized">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentOuterBorder" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButtons" Storyboard.TargetProperty="Margin">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="HorizontalAlignment">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <HorizontalAlignment>Left</HorizontalAlignment>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="VerticalAlignment">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <VerticalAlignment>Top</VerticalAlignment>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="WindowOrientation">
                        <VisualState x:Name="Above"/>
                        <VisualState x:Name="Below">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPath"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            <!-- Control Template contents -->
        </Grid>
    </ControlTemplate>
     
    However, I am not able to call the "Above" or "Below" states from code.  This call always returns false:

    var window = new RadWindow();
     
    bool result = VisualStateManager.GoToState(window, "Below", false);
    // result is always false
     
    window.Show();

    Is there another way to add VisualStates to the RadWindow?  Another option might be to wrap it in a UserControl, but I need to change elements of the RadWindow itself in the VisualState Storyboard.

    Thanks.
    Josh
  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 15 Sep 2011 Link to this post

    Hi Josh,

    You could expect the go to state to fail since at the time you are calling GoToState you do not have the ControlTemplate applied yet. So none of your VisualStateGroups or VisualStates and Storyboards exist yet. You could probably wait for Loaded or some other event that will be invoked in late enough time.

    The proper way to implement the custom visual state would be to create a property on a custom window and call VisualStateManager.GoToState both on proeprty changed and OnApplyTemplate. For more information please check the attached project.

    Best wishes,
    Pana
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
Back to Top