How to use Continuum Animation with DataBoundListBox?

8 posts, 0 answers
  1. Bernhard König
    Bernhard König avatar
    78 posts
    Member since:
    Nov 2009

    Posted 18 Mar 2011 Link to this post

    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





  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 22 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Bernhard König
    Bernhard König avatar
    78 posts
    Member since:
    Nov 2009

    Posted 23 Mar 2011 Link to this post

    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
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 24 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  6. Bernhard König
    Bernhard König avatar
    78 posts
    Member since:
    Nov 2009

    Posted 24 Mar 2011 Link to this post

    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


  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 31 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  8. Bernhard König
    Bernhard König avatar
    78 posts
    Member since:
    Nov 2009

    Posted 07 Apr 2011 Link to this post

    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
  9. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 14 Apr 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top
DevCraft banner