How to use Continuum Animation with DataBoundListBox?

[Bernhard König]

I need some help in using the Continuum-Animation with the DataBoundListBox ... i looked at your example project for the final version of your controls ... as far as I can see, all I need to do is set the ContinuumElementProperty to the List control:

 

 

this.SetValue(RadContinuumAnimation.ContinuumElementProperty, this.ListBox1);

 

But with DataBoundListBox, it always animates the first item in the list. I would have expected it uses the selected item in the list (or I can define the item somehow).

Also, is there already a way how I can influence which of the elements inside the animated item I want to be animated? As far as I can see, the first control of type TextBlock gets animated. That's fine most of the time, but in a few cases I want the 2nd TextBlock to be animated. It would be nice to have an index property ("AnimatedTextBlockIndex" or something) so I can set the TextBlock I want to animate.

Thanks for any help :)

Bernhard

[Valentin.Stoychev]

Hi Bernhard König,

Currently this is the algorithm for choosing which element to animate:

if (!(this.continuumElement is TextBlock))
            {
                TextBlock textBlock = ElementTreeHelper.FindVisualDescendant<TextBlock>(this.continuumElement);
                if (textBlock != null)
                {
                    this.continuumElement = textBlock;
                }
            }

So you just need to set the correct container that holds the TextBlock, or just pass the TextBlock that you need to animate.

If you want to animate the selected item - you need to set the SelectedItem as continuum element, not the parent ListBox.

All the best,
Valentin.Stoychev
the Telerik team

[Bernhard König]

Hi Valentin,

thanks very much for writing back!

I understand and maybe I'm missing something but ... how can I get the actual visual element of the selected item out of a DataBoundListBox? If I use DataBoundListBox.SelectedItem, I only get the databound object and of course the Continuum animation can't do anything with that.

In the SDK Listbox, I could achieve this by using the ItemGenerator, but this is not present in the DataBoundListBox of your toolkit.

Please help :)

Thanks again,
Bernhard

[Deyan]

Hello Bernhard,

Thanks for writing back and for your question.

You can use the GetContainerForItem method to obtain the visual container of a data item from the collection bound to your RadDataBoundListBox:

RadDataBoundListBoxItem container = this.radDataBoundListBox.GetContainerForItem(this.radDataBoundListBox.SelectedItem) as RadDataBoundListBoxItem;

Please note that the container will be available only of the data item is realized (that means the UI virtualization logic has created a visual item and mapped the data item to it). Otherwise you will get null.

I hope this helps.

Do not hesitate to get back to us in case of further questions.

Regards,
Deyan
the Telerik team

[Bernhard König]

Hi Valentin,

thanks, that was what I needed, works great now :)

But now I have another problem: on the target page of the transition where the ForwardIn animation should be played, there's a Pivot control. I need to animate a TextBlock in the Title (TitleTemplate) of this control for my Continuum animation.

The Pivot:

<controls:Pivot x:Name="PivotControl" Title="{Binding Folder}" TitleTemplate="{StaticResource FolderPivotTitleTemplate}">

The template for the Title looks like this:

<DataTemplate x:Key="FolderPivotTitleTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Image HorizontalAlignment="Center" Height="24" VerticalAlignment="Center" Width="24" Source="/Images/24/folderdark24.png"/>
        <TextBlock x:Name="testtxt" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" d:LayoutOverrides="Height" Grid.Column="1" Margin="5,0,0,0" Style="{StaticResource PhoneTextNormalStyle}"/>
    </Grid>
</DataTemplate>

 

I want to animate this TextBlock I called testtxt. But how can I get there? I tried to experiment with your ElementTreeHelper and Silverlights own VisualTreeHelper but were not able to find any visual descendants of the pivot control. Maybe this is just a pure XAML question but it would be great if you can help me or guide me in the right direction ...

And another question came up: I noticed that on the target page of the Continuum animation always a ContinuumAndSlide animation is played. Why is that? I noticed that in your sample app that comes with your controls, you set a "normal" ContinuumTransition in XAML in your ContinuumTransitionEndPage.xaml:

 

<telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadContinuumTransition/>
</telerikPrimitives:RadTransitionControl.Transition>

But in the ContinuumTransitionEndPage.xaml.cs file, you set the dependency properties explicitely for the ContinuumAndSlide transition:

public ContinuumTransitionEndPage()
{
    InitializeComponent();

    this.SetValue(RadSlideContinuumAnimation.HeaderElementProperty, this.PageHeader);
    this.SetValue(RadSlideContinuumAnimation.ApplicationHeaderElementProperty, this.PageTitle);
}

I don't exactly understand how this works and how I can have a continuum without slide on the target page. No matter what I do, I always get the slide animation.

Thanks again for helping me!

Bernhard

[Valentin.Stoychev]

Hi Bernhard,

The continuum transition is a little bit more complex transition. It is a combination of several animations - we basically have two sliding animations running separately. One animation is over the main content, another one that is executed over the page header and a third animation that is executed on the page title.

That is why we are using the attached properties for the slide animations. 

As for the date template and element finding. I would suggest you to use the following:

<controls:Pivot >
    <controls:Pivot.Title>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image HorizontalAlignment="Center" Height="24" VerticalAlignment="Center" Width="24" Source="/Images/24/folderdark24.png"/>
            <TextBlock x:Name="testtxt" HorizontalAlignment="Left" TextWrapping="Wrap" Text="WP7 app" d:LayoutOverrides="Height" Grid.Column="1" Margin="5,0,0,0" Style="{StaticResource PhoneTextNormalStyle}"/>
        </Grid>
    </controls:Pivot.Title>

This way you are getting the testtxt directly initialized as a field in your page instance.

Kind regards,
Valentin.Stoychev
the Telerik team

[Bernhard König]

Hi Valentin!

Thanks again for helping me!

Using Pivot.Title directly without a template was the solution. Weird I didn't thought about it myself ... to focused on DataTemplates in the meantime I think :)

Edit: I got it - nevermind. I confused "Transition" with "Animation" - so the ContinuumTransition uses both, RadContinuumAnimation and RadContinuumAndSlideAnimation ...  the reason I asked anyhow is that this slide animation on the ForwardIn animation is not present for example on the official WP7 mail client. But I noticed it might be just because the mail content takes time to load and the slide animation is finished when the mail message is finally loaded & displayed. So, forget the following italic marked question - everything's clear now :)
(((As for my 2nd question, maybe I asked the wrong way ... let me ask directly without trying to explain anything :) ...

When using the Continuum Animation, is it correct that on ForwardOut animation the RadContinuum animation is used while on ForwardIn the RadContinuumAndSlide animation is used, nevertless I only specified the RadContinuum animation on the source and target page as the transition animation?)))

Thanks again,
Bernhard

[Deyan]

Hello Bernhard,

We will consider this ticket closed.

Do not hesitate to get back to us if you have further questions or need assistance.

Kind regards,
Deyan
the Telerik team