Question

<ListBox Name="listBoxButtons"
         Height="700">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Background="{StaticResource PhoneAccentBrush}"
                    Name="border"
                    Width="432" Height="62"
                    Margin="6" Padding="12,0,0,6">
                <TextBlock Text="{Binding}" 
                           Foreground="#FFFFFF" FontSize="26.667"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Bottom"
                           FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                <Border.Projection>
                    <PlaneProjection RotationX="-60"/>
                </Border.Projection>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Code:

private void ShowAnim()
{
    IEasingFunction quadraticEase = new QuadraticEase { EasingMode = EasingMode.EaseOut };
    Storyboard _swivelShow = new Storyboard();
    foreach (var item in this.listBoxButtons.Items)
    {
        UIElement container = listBoxButtons.ItemContainerGenerator.ContainerFromItem(item) as UIElement;
        if (container != null)
        {
            Border content = VisualTreeHelper.GetChild(container, 0) as Border;
            if (content != null)
            {
                DoubleAnimationUsingKeyFrames showAnimation = new DoubleAnimationUsingKeyFrames();

                EasingDoubleKeyFrame showKeyFrame1 = new EasingDoubleKeyFrame();
                showKeyFrame1.KeyTime = TimeSpan.FromMilliseconds(0);
                showKeyFrame1.Value = -60;
                showKeyFrame1.EasingFunction = quadraticEase;

                EasingDoubleKeyFrame showKeyFrame2 = new EasingDoubleKeyFrame();
                showKeyFrame2.KeyTime = TimeSpan.FromMilliseconds(85);
                showKeyFrame2.Value = 0;
                showKeyFrame2.EasingFunction = quadraticEase;

                showAnimation.KeyFrames.Add(showKeyFrame1);
                showAnimation.KeyFrames.Add(showKeyFrame2);

                Storyboard.SetTargetProperty(showAnimation, new PropertyPath(PlaneProjection.RotationXProperty));
                Storyboard.SetTarget(showAnimation, content.Projection);

                _swivelShow.Children.Add(showAnimation);
            }
        }
    }
    _swivelShow.Begin();
}

But: Storyboard.SetTarget(showAnimation, content.Projection) throws an Exception. The content.Projection is null. How could that happen?

Answer 1

You are looking at the wrong Border element. The hierarchy of the item container in your case is like Border -> ContentControl -> ContentPresenter -> Border (this is yours). So you have to go deeper down the child hierarchy of your container to find the border you want.

The following code searches the children of an UIElement recursively and gives some debug output so you can see how deep it goes. It will stop when it finds a control named “border”:

    private UIElement GetMyBorder(UIElement container)
    {
        if (container is FrameworkElement && ((FrameworkElement)container).Name == "border")
            return container;

        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(container); i++)
        {
            var child = (FrameworkElement)VisualTreeHelper.GetChild(container, i);
            System.Diagnostics.Debug.WriteLine("Found child "+ child.ToString());

            System.Diagnostics.Debug.WriteLine("Going one level deeper...");
            UIElement foundElement = GetMyBorder(child);
            if (foundElement != null)
                return foundElement;
        }
        return null;
    }

To use it:

    Border content = (Border)GetMyBorder(container);