Question

I’m just wondering if there is a way to set a vertical threshold of where you want a story board item to appear on the screen (when sliding in and out) so that it doesn’t have to slide across everything on the screen when it’s popping in and out. I have an list of items that get flipped though according to a timer event but when an item comes onto the screen it passes over all the other buttons and user controls and it doesn’t look very pretty. It would be nice if I could just make it appear as if the item was sliding right out of the background into position.

I have two storyboard animations, one to deal with the object sliding in the other to deal with the current object that needs to be slid out. There are also arrow buttons on either side of the content area and currently the objects are sliding over the arrows, which is what I am trying to eliminate. Here is the storyboard code:

    <Storyboard x:Key="newsIn" x:Name="newsIn">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="newsContent">
            <EasingDoubleKeyFrame KeyTime="0" Value="500"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn" Bounces="0"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="newsOut" x:Name="newsOut">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="newsContent">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-500">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn" Bounces="0"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

I don’t know if I described this very clearly but if someone has done this before or knows of a resource where I could learn to do this your help is greatly appreciated.

Thanks for your time.

ANSWER: Put the elements your animating inside a canvas (or some container) and use the Clip property to only desplay them when they apear inside the dedicated area like so.

    <Canvas Name="newsContent" Grid.Column="1" >
       <Canvas.Clip>
           <RectangleGeometry Rect="0,0,372,200"/>
       </Canvas.Clip>
       <Ui element/>
       <Ui element2/>
       ....
    </Canvas>

Answer 1

Ok, can you try using clipToBounds = true on the control that is your content container i.e the control that contains the “news” items (i.e. canvas or grid etc). Make sure your arrows etc are not in the same container