9 Answers, 1 is accepted
0
Hi Dele,
Thanks for contacting us and for your question.
Yes, you can do this with the RadDataBoundListBox by using the RadTileAnimation. Here is a code snippet that demonstrates the approach:
If you also wish to apply a delay to the item that triggers the animation (usually the selected item), you should catch the ItemTap event of the RadDataBoundListBox and hint the RadTileAnimation to the item that causes it:
I hope this helps.
Do not hesitate to get back to us in case of further questions.
Best wishes,
Deyan
the Telerik team
Thanks for contacting us and for your question.
Yes, you can do this with the RadDataBoundListBox by using the RadTileAnimation. Here is a code snippet that demonstrates the approach:
public
MainPage()
{
InitializeComponent();
RadTileTransition transition =
new
RadTileTransition();
this
.SetValue(RadTransitionControl.TransitionProperty, transition);
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, ListBox1);
}
If you also wish to apply a delay to the item that triggers the animation (usually the selected item), you should catch the ItemTap event of the RadDataBoundListBox and hint the RadTileAnimation to the item that causes it:
private
void
RadDataBoundListBox_ItemTap(
object
sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
{
this
.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
}
I hope this helps.
Do not hesitate to get back to us in case of further questions.
Best wishes,
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>>
0
Dele
Top achievements
Rank 2
answered on 18 Mar 2011, 02:55 PM
Thank you for the quick reply.
I tried this on the Databoundlistbox, but it doesn't seem to animate (when it loads nor when I click on an item). Here are all the components below. I'm not sure if it's due to my template or maybe I'm missing something else?
I tried this on the Databoundlistbox, but it doesn't seem to animate (when it loads nor when I click on an item). Here are all the components below. I'm not sure if it's due to my template or maybe I'm missing something else?
<
telerikPrimitives:RadDataBoundListBox
CacheMode
=
"BitmapCache"
x:Name
=
"lbRecentAlerts"
ItemsSource
=
"{Binding RecentAlerts}"
SelectedItem
=
"{Binding SelectedAlert, Mode=TwoWay}"
ItemTemplate
=
"{StaticResource AmberAlertListTemplate}"
ItemTap
=
"lbRecentAlerts_ItemTap"
>
<
i:Interaction.Triggers
>
<
i:EventTrigger
EventName
=
"ItemTap"
>
<
mvvmLightCommand:EventToCommand
Command
=
"{Binding GoToAlertCommand, Mode=OneWay}"
/>
</
i:EventTrigger
>
</
i:Interaction.Triggers
>
</
telerikPrimitives:RadDataBoundListBox
>
public
MainPage()
{
InitializeComponent();
Loaded +=
new
RoutedEventHandler(MainPage_Loaded);
RadTileTransition transition =
new
RadTileTransition();
this
.SetValue(RadTransitionControl.TransitionProperty, transition);
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbRecentAlerts);
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);
}
private
void
lbRecentAlerts_ItemTap(
object
sender, ListBoxItemTapEventArgs e)
{
this
.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
}
0
Hi Dele,
Thanks for getting back to me.
Please check the version of the controls that you are using. This functionality is available as of RadControls for Windows Phone 7 Q1, i.e. the official release.
Also, I see in the code snippet that you are using that you are setting the ContainerToAnimateProperty twice. This is not correct since in this way you are disabling the animation for lbRecentAlerts (because you initialize the attached property with another value). Since the lbRecentAlerts is the control you would like to animate, you should remove that line:
This works on my side as expected.
I hope this helps.
Do not hesitate to get back to me if you need further assistance or have any questions.
Best wishes,
Deyan
the Telerik team
Thanks for getting back to me.
Please check the version of the controls that you are using. This functionality is available as of RadControls for Windows Phone 7 Q1, i.e. the official release.
Also, I see in the code snippet that you are using that you are setting the ContainerToAnimateProperty twice. This is not correct since in this way you are disabling the animation for lbRecentAlerts (because you initialize the attached property with another value). Since the lbRecentAlerts is the control you would like to animate, you should remove that line:
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);
This works on my side as expected.
I hope this helps.
Do not hesitate to get back to me if you need further assistance or have any questions.
Best wishes,
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>>
0
Dele
Top achievements
Rank 2
answered on 19 Mar 2011, 04:56 PM
I do see that it works when I comment out that line. However, since i have two listboxes on that page I want to animate, how do I do so?
Do I just repeat everything twice?
Do I just repeat everything twice?
0
Hello Dele,
Thanks for writing back.
The RadTileAnimation accepts one container to animate at a time. In your scenario, you will have to dynamically set the ContainerToAnimate attached property to the corresponding listbox when the user taps on an item from the list box you would like to animate. Take a look how I have modified the source code in your application:
As you can see, I am handling the ItemTap and SelectionChanged events of the corresponding listboxes. Each time one of them occurs, I re-initialize the ContainerToAnimate property of the RadTileAnimation to the corresponding listbox so that its items are correctly animated.
I hope this helps.
Do not hesitate to get back to us in case of further questions.
Greetings,
Deyan
the Telerik team
Thanks for writing back.
The RadTileAnimation accepts one container to animate at a time. In your scenario, you will have to dynamically set the ContainerToAnimate attached property to the corresponding listbox when the user taps on an item from the list box you would like to animate. Take a look how I have modified the source code in your application:
public
MainPage()
{
//mtiks analytics
mtiks.Instance.postEventAttributes(
"Load Main Page"
);
Messenger.Default.Register<Uri>(
this
,
"GoToAlertDetailRequest"
, (uri) => NavigationService.Navigate(uri));
InitializeComponent();
Loaded +=
new
RoutedEventHandler(MainPage_Loaded);
RadTileTransition transition =
new
RadTileTransition();
this
.SetValue(RadTransitionControl.TransitionProperty, transition);
this
.lbWatchlist.SelectionChanged +=
new
SelectionChangedEventHandler(lbWatchlist_SelectionChanged);
this
.lbRecentAlerts.ItemTap +=
new
EventHandler<ListBoxItemTapEventArgs>(lbRecentAlerts_ItemTap);
this
.lbRecentAlerts.SetValue(InteractionEffectManager.IsInteractionEnabledProperty,
true
);
InteractionEffectManager.AllowedTypes.Add(
typeof
(RadDataBoundListBoxItem));
}
void
lbWatchlist_SelectionChanged(
object
sender, SelectionChangedEventArgs e)
{
this
.SetValue(RadTileAnimation.ElementToDelayProperty,
this
.lbWatchlist.ItemContainerGenerator.ContainerFromIndex(
this
.lbWatchlist.SelectedIndex));
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);
}
private
void
lbRecentAlerts_ItemTap(
object
sender, ListBoxItemTapEventArgs e)
{
this
.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
this
.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbRecentAlerts);
}
As you can see, I am handling the ItemTap and SelectionChanged events of the corresponding listboxes. Each time one of them occurs, I re-initialize the ContainerToAnimate property of the RadTileAnimation to the corresponding listbox so that its items are correctly animated.
I hope this helps.
Do not hesitate to get back to us in case of further questions.
Greetings,
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>>
0
Dele
Top achievements
Rank 2
answered on 22 Mar 2011, 05:24 PM
This worked perfectly. Thanks a lot for your help.
0
Hello Dele,
Thanks for your time. For now, I will consider this ticket closed.
Do not hesitate to get back to us in case of further questions.
Greetings,
Deyan
the Telerik team
Thanks for your time. For now, I will consider this ticket closed.
Do not hesitate to get back to us in case of further questions.
Greetings,
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>>
0
Lukasz
Top achievements
Rank 1
answered on 08 Jul 2011, 12:33 PM
Hi,
I also have problem with make DataboundListBox animate items.
I'm using Q2 RadControls.
What I'm missing?
EDIT
I resolve one problem but have another :)
When data for DataboundListBox is loaded in BackgroundWork animate in pageIn don't work.
Problem is also that when Page have:
Then only ListBox will be animated and the rest of the controls not.
I made simple project, I fallow all steps and still don't work:
EDIT
I added second project with problem from edited post.
Link to the projects: Project
I also have problem with make DataboundListBox animate items.
I'm using Q2 RadControls.
What I'm missing?
EDIT
I resolve one problem but have another :)
When data for DataboundListBox is loaded in BackgroundWork animate in pageIn don't work.
Problem is also that when Page have:
<
telerikPrimitives:RadTransitionControl.Transition
>
<
telerikPrimitives:RadTileTransition
/>
</
telerikPrimitives:RadTransitionControl.Transition
>
I made simple project, I fallow all steps and still don't work:
EDIT
I added second project with problem from edited post.
Link to the projects: Project
0
Accepted
Hello Lukasz,
Thanks for writing and for the provided project.
I am not quite sure that I correctly understand the issues that you experience. RadTileAnimation expects a container which it will animate. When you set this container to be a list box control, RadTileAnimation will take its visual items and animate them.
If you are binding the listbox on the Loaded event of the page, this might lead to undesired behavior since RadTileAnimation itself starts when the page is loaded. This might occur a moment before you bind the control to a data source which will lead to an invalid scenario where RadTileAnimation tries to animate a ListBox which is empty.
Best wishes,
Deyan
the Telerik team
Thanks for writing and for the provided project.
I am not quite sure that I correctly understand the issues that you experience. RadTileAnimation expects a container which it will animate. When you set this container to be a list box control, RadTileAnimation will take its visual items and animate them.
If you are binding the listbox on the Loaded event of the page, this might lead to undesired behavior since RadTileAnimation itself starts when the page is loaded. This might occur a moment before you bind the control to a data source which will lead to an invalid scenario where RadTileAnimation tries to animate a ListBox which is empty.
Best wishes,
Deyan
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!