Silverlight: добавьте визуальный переход между состояниями видимым и невидимым

Question

Я хотел бы добавить визуальный эффект (например, постепенное увеличение, уменьшение) для элемента управления, который может изменить видимость.

Понятия не имею, с чего начать. Я читал немного о VisualStateManager и VisualTransform, но я все еще не знаю, возможно ли это и что делать. Вы можете мне помочь?

Спасибо

Answer 1

То, что вы хотите, возможно.

Вам нужен VisualStateManager, который определяет ShowState и HideState. Они в свою очередь определяют Storyboard, который контролирует видимость.

Затем вы звоните

VisualStateManager.GoToState(uiElement, "ShowState", true);

на вашем элементе для отправки в «ShowState» с анимацией. Замена имени состояния на «HideState» скроет элемент.

XAML, который мы используем для VisualStateManager, приведен ниже. Он также оживляет непрозрачность, поэтому происходит постепенное исчезновение / затухание.

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStates">
            <VisualState x:Name="ShowState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HideState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:01">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

ПРИМЕЧАНИЕ Значения KeyTime на них могут нуждаться в корректировке для вашего приложения. Глядя на это еще раз, я вижу, что оба значения «HideState» равны 0, что может не дать желаемого эффекта. AnthonyWJones вполне мог найти ошибку в нашем приложении!