Расширение управления, которое скользит вверх

Question

Я пытаюсь создать эффект анимации, при котором нажатие «кнопки» в нижней части экрана вызывает анимированное «скольжение вверх» StackPanel - немного похоже на скольжение вверх, которое достигается с помощью панели приложения, когдаотображается меню.

Я пробовал несколько эффектов на основе образца в http://www.cespage.com/silverlight/tutorials/wp7tut24.html, который использует анимацию, такую ​​как:

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                                </Storyboard>

Однако, используя этот образец, нене дает мне желаемого эффекта - высота контейнера контента «скачет», хотя сама шкала контента анимирована.

Я также играл с анимацией высоты контейнера / контента:

                                    <DoubleAnimation Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Height" To="200" Duration="0"/>

... но на самом деле это не работает, так как высота перезаписывается панелью StackPanel (и я не могу использовать MaxHeight, поскольку это не тот тип свойств для анимации).

Любые идеи /указатели на то, что я должен анимировать?

---

Примечание - прежде чем кто-либо прокомментирует рекомендации по дизайну WP7 ... это дизайн / спецификация клиента, и он, кажется, подходит в рамках Metro :))

Answer 1

Можете ли вы оживить маржу?

Это не свойство зависимости, поэтому требуется немного усилий, но это можно сделать. (У меня есть пример где-нибудь, если вам нужен.)

Answer 2

Спасибо за предложение - я попробовал несколько вещей ... и в конце концов я пошел с:

• Я поместил расширитель и его содержимое в контейнер (границу)
• Я использовал макет Grid для размещения этого расширителя на экране
• Я анимировал TranslateTransform для включения / выключения этого расширителя.

Сокращенный код:

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ViewStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="0" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="154" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Background="{TemplateBinding Background}"
                            Margin="0,0,0,0">
                        <Border.RenderTransform>
                            <TranslateTransform x:Name="BorderTranslateTransform"></TranslateTransform>
                        </Border.RenderTransform>
                        <Grid>
                            // stuff here
                        </Grid>
                    </Border>

Answer 3

На этом компьютере не установлен WP7 SDK, так что все из памяти.Возьми это с зерном соли.И я предполагаю, что можно использовать жестко запрограммированные размеры (в противном случае это намного сложнее).

Во-первых, для согласованности сделайте свойство IsExpanded false с помощью defalut:

public static readonly DependencyProperty IsExpandedProperty =
    DependencyProperty.Register("IsExpanded", typeof(bool),
    typeof(Expander), new PropertyMetadata(false));

В ContentPresenter с именем «Content» добавьте Height="0".

В Storyboard из VisualState с именем «Expanded» добавьте эту анимацию:

<DoubleAnimation Storyboard.TargetName="Content"
                 Storyboard.TargetProperty="Height"
                 To="200"
                 Duration="0:0:1"/>

InStoryboard из VisualState с именем «Collapsed» добавьте эту анимацию:

<DoubleAnimation Storyboard.TargetName="Content"
                 Storyboard.TargetProperty="Height"
                 To="0"
                 Duration="0:0:1"/>

Настройте свойства анимаций To и Duration по своему вкусу.

Для слайд анимация содержимого, попробуйте удалить анимацию, которая работает с «ContentScaleTransform».В этом случае эта анимация вызовет больше эффекта «растущего» или «растягивающего».