Как предотвратить обрезание элемента управления границей его родителя ListBox во время анимации?

Question

У меня есть значок изображения внутри StackPanel, который находится внутри ListBox, и я хочу анимировать его с помощью поведения перевода, чтобы он «отскочил».

<phone:PhoneApplicationPage 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
  x:Class="MyApp.PhonePage1"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
  <phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="BounceStoryboard">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-111"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="2"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </phone:PhoneApplicationPage.Resources>

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <StackPanel>
        <ListBox>
          <Image x:Name="image" Source="Common/Main/res/drawable/smiley.png" Width="96" RenderTransformOrigin="0.5,0.5" Margin="180,0">
            <Image.RenderTransform>
            <CompositeTransform/>
            </Image.RenderTransform>
          </Image>
        </ListBox>
      </StackPanel>
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

Но когда он перемещается вверх, верхняя часть изображения обрезается внутри границ родительского элемента списка.

Можно ли настроить свойство, чтобы оно перекрывало границы при анимации?

Спасибо!

Answer 1

Вы должны сделать своего родителя Grid больше.

Попробуйте дать StackPanel a Margin из 22.

Обновление с рабочим примером

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    x:Class="outofboundaryissue1.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="m_activateIdentityStoryboard" RepeatBehavior="Forever" AutoReverse="True">  
            <DoubleAnimationUsingKeyFrames   
                Storyboard.TargetProperty=  
                      "(UIElement.RenderTransform).(CompositeTransform.TranslateY)"   
                Storyboard.TargetName="image">  
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>  
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-22"/>  
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="22"/>  
            </DoubleAnimationUsingKeyFrames>  
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF2D0C0C">
            <StackPanel d:LayoutOverrides="Height">
                <Image x:Name="image" Source="/Koala.jpg" RenderTransformOrigin="0.5,0.5" Width="100" Height="75">
                    <Image.RenderTransform>
                        <CompositeTransform/>
                    </Image.RenderTransform>
                </Image>
            </StackPanel>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>