ListPicker and RadTransitionControl in DataTemplate

[Vladimir]

Hi!

I would like to make a ListPicker with a Custom ItemTemplate and inside the data template I would like to use RadTransitionControl with 3 different textblocks. These TextBlocks should show the 3 different properties of DataContext object.
For Instance, that could be a Time Period object , Start, Finish and.... Caption.
How I can I make it?, I've spend some time already trying doing that... by I don't like the result...
For example, The I am using the animation :

var inAnimation = new RadMoveAnimation();
inAnimation.MoveDirection = MoveDirection.TopIn;


 var outAnimation = new RadMoveAnimation();
outAnimation.MoveDirection = MoveDirection.TopOut;

RadTransitionControl1.Transition.ForwardOutAnimation = outAnimation;
RadTransitionControl1.Transition.ForwardInAnimation = inAnimation;
RadTransitionControl1.Transition.PlayMode = TransitionPlayMode.Simultaneously;

and TopOut animation overlaps the control that above my user control... I am not sure why..
Could you point out, how I can achieve the scenario I described.

Thank you in advance,
Vladimir.

[Kiril Stanoev]

Hello Vladimir,

Sorry for the delayed reply. I was unable to reproduce the issue. Could you please take a look at the attached project and let me know if I am missing anything. I'd be glad to assist you further. 

Regards,
Kiril Stanoev
the Telerik team

[Vladimir]

Hi Kiril,
Thank you for your time and the upload.

This is not exactly  what I am looking for.
I've slightly modified the solution and now I have the issue again.
(Animation overlap) Please check out the screenshots.

So what I did:

Changed DataItem class:

public class DataItem : INotifyPropertyChanged
    {
        private Control _contentControl;
        public Control ContentControl
        {
            get { return _contentControl; }
            set
            {
                _contentControl = value;
                OnPropertyChanged();
            }
        }

        public int DataIndex { get; set; }

        public string Caption { get; set; }
        public DateTime Start { get; set; }
        public DateTime Finish { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }

Added one more method to the MainView:

private void ChangeContent()
       {
           DataItem item = listPicker1.SelectedItem as DataItem;

           if (item != null)
           {
               TextField field = new TextField();

               switch (item.DataIndex)
               {
                   case 0:
                       field.Content = item.Start.ToShortDateString();
                       break;
                   case 1:
                       field.Content = item.Finish.ToShortDateString();
                       break;
                   case 2:
                       field.Content = item.Caption;
                       break;
                   default:
                       item.DataIndex = 0;
                       field.Content = item.Start.ToShortDateString();
                       break;
               }

               item.DataIndex++;

               item.ContentControl = field;
           }
       }

and

void timer_Tick(object sender, EventArgs e)
       {
           timer.Stop();
           ChangeContent();
       }

and

private void RadTransitionControl_OnNewContentTransitionEnded(object sender, EventArgs e)
       {
           ChangeContent();
           timer.Start();
       }

and initialization code in MainPage Contructor:

timer = new DispatcherTimer();
           timer.Interval = TimeSpan.FromMilliseconds(1000);
           timer.Tick += timer_Tick;
           timer.Start();

and...

<telerikInput:RadListPicker x:Name="listPicker1">
                <telerikInput:RadListPicker.ItemTemplate>
                    <DataTemplate>
                        <telerikPrimitives:RadTransitionControl Content="{Binding ContentControl}" NewContentTransitionEnded="RadTransitionControl_OnNewContentTransitionEnded" Loaded="RadTransitionControl_Loaded">
                        </telerikPrimitives:RadTransitionControl>
                    </DataTemplate>
                </telerikInput:RadListPicker.ItemTemplate>
            </telerikInput:RadListPicker>

thanks in advance,
Vladimir

[Kiril Stanoev]

Hi Vladimir,

Thank you for the clarification. Indeed there appears to be some inconsistency while using TransitionControl and ListPicker. The easiest way to workaround the issue would be to set clipping to the ListPicker:

<telerikInput:RadListPicker x:Name="listPicker1" Loaded="ListPicker1_Loaded">
    <telerikInput:RadListPicker.ItemTemplate>
        <DataTemplate>
            <telerikPrimitives:RadTransitionControl Content="{Binding ContentControl}"
                    NewContentTransitionEnded="RadTransitionControl_OnNewContentTransitionEnded"
                    Loaded="RadTransitionControl_Loaded" />
        </DataTemplate>
    </telerikInput:RadListPicker.ItemTemplate>
</telerikInput:RadListPicker>

 

private void ListPicker1_Loaded(object sender, RoutedEventArgs e)
{
    this.listPicker1.Clip = new RectangleGeometry()
    {
        Rect = new Rect(0, 7, this.listPicker1.ActualWidth, this.listPicker1.ActualHeight - 7)
    };
}

Give it a try and let me know if it works for you. Meanwhile, we'll see what can be improved in the situation. 

Kind regards,
Kiril Stanoev
the Telerik team

[Vladimir]

Hi Kiril,

Thanks for the update.
Yes, it better now.

do I have to create a support ticket for the Issue?

best regards,
Vladimir.

[Kiril Stanoev]

Hello Vladimir,

No need. I've already added it to our backlog.  

Kind regards,
Kiril Stanoev
the Telerik team