Custom VisualStateGroup in RadWindow ControlTemplate

[Josh Eastburn]

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

[Pana]

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