Анимированная высота в WIndows Телефон

Question

У меня есть сетка, содержащая два элемента, форму поиска и пользовательский UC для отображения элементов. Когда моя страница загружается, элемент управления просмотра скрыт. Я муравей, чтобы оживить его с помощью раскадровки, когда нажата кнопка в форме поиска. Я застрял в части анимации To=.... Я хочу анимировать его до высоты родительского контейнера и вытащить его снизу. Это возможно?

Для справки, это мое дерево структура:

Page ресурсы: тело

<Storyboard x:Name="animateViewSlide" Storyboard.TargetName="SearchForm" > 
     <DoubleAnimation Storyboard.TargetProperty="Height" To="???" Duration="100"/> 
</Storyboard> 

управления:

<Grid x:Name="LayoutRoot"> 
    <Grid x:Name="SearchForm" Margin="6,6,6,70"> 
    <uc:AwesomeViewer x:Name="awesomeView" Awesomeness="{Binding SelectedAwesomeThing}" Visibility="Collapsed"/> 
</Grid> 

Answer 1

UPDATE

Я понял, что это лучший способ сделать это, вместо того, чтобы использовать маржу, чтобы пройти через анимацию, просто анимируйте ось Y с помощью TranslateTransform;

<Grid x:Name="ItemToMove" 
      Visibility="{Binding Condition, Converter={StaticResource boolVisConv}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="30,0,0,-32" Opacity="0"> 
       <Grid.RenderTransform> 
        <TranslateTransform x:Name="notified" Y="40" /> 
       </Grid.RenderTransform> 
        <Grid.Triggers> 
        <EventTrigger RoutedEvent="Grid.Loaded"> 
         <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="notified" Storyboard.TargetProperty="Y"> 
             <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ItemToMove" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </Grid.Triggers> 

END UPDATE

Ваша беда будет вытекать из пытаюсь анимировать автоматически рассчитанное значение (Height), так что я бы ломом этой идеи, если вы не хотите использовать значение, жестко закодированного размера ваших родителей/Дети или просто предположим, например, что если приложение ограничено только режимом «Портрет», тогда ваше значение «Кому» составляет 800 пикселей, за исключением того, что я предполагаю, что это не то, что вы ищете.

Теперь вы, скорее всего, надеетесь, что можете просто поднести визуализированный размер в свое значение «Кому», например, через To="{Binding ActualHeight, ElementName=LayoutRootOROTHERParentContainer}"? Тем не менее, это не сработает ...

Так что, хотя у кого-то может быть лучший способ, единственный способ, который я нашел, - это оставить только автоматические расчетные размеры, чтобы сделать свою вещь, а вместо этого оживить степпинг объекта Margin через ObjectAnimationUsingKeyFrames, который при соединении с Opacity переход через DoubleAnimationUsingKeyFrames действительно выглядит довольно неплохо, за исключением того, что он добавит кучу дополнительного XAML для процесса. Таким образом, вы можете попробовать что-то более похожее на это (однако, если вы столкнетесь с лучшим решением, я тоже хотел бы это узнать. Будучи дизайнером для жизни, я часто сталкивался с этим довольно часто.)

Пример концепции;

(раскадровка)

<Storyboard x:Name="Kaboom"> 
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border"> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,750,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.2"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,600,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,550,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.4"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,500,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,450,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.6"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,400,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.7"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,350,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.8"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,300,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.9"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,250,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,200,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.1"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,150,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.2"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,100,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.3"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,50,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
     <DiscreteObjectKeyFrame KeyTime="0:0:1.4"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
    </ObjectAnimationUsingKeyFrames> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border"> 
     <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.01"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/> 
    </DoubleAnimationUsingKeyFrames> 
</Storyboard> 

Быстрый пример АПЧРК концепции в действии;

<Grid Height="800" Width="480" x:Name="ParentContainer"> 
      <!-- Your SearchForm thingy with its funky margins already set like your example --> 
      <Rectangle Margin="6,6,6,70" Fill="Green" /> 
      <Button Height="100" Width="100" Content="Click Me!" HorizontalAlignment="Left" VerticalAlignment="Top"> 
       <!-- Quick button to show it in action --> 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ei:ControlStoryboardAction Storyboard="{StaticResource Kaboom}"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
      </Button> 
      <!-- Your Awesomeness --> 
      <Border x:Name="border" Width="300" Background="Blue" HorizontalAlignment="Right" Margin="0,800,0,0" Opacity="0"> 
       <TextBlock x:Name="textBlock" Text="OH&#10;&#10;SNAP!!!&#10;&#10;Say&#10;&#10;WHAAA??" 
          TextAlignment="Center" VerticalAlignment="Center" 
          FontSize="40" FontWeight="Bold" Foreground="White"/> 
      </Border> 
     </Grid> 

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

Надеюсь, что это поможет и удачи!