ListPicker and RadTransitionControl in DataTemplate

6 posts, 0 answers
  1. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Dec 2012

    Posted 18 Jan 2013 Link to this post

    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.
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 24 Jan 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Dec 2012

    Posted 24 Jan 2013 Link to this post

    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
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 25 Jan 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Dec 2012

    Posted 25 Jan 2013 Link to this post

    Hi Kiril,

    Thanks for the update.
    Yes, it better now.

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

    best regards,
    Vladimir.
  7. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 28 Jan 2013 Link to this post

    Hello Vladimir,

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

    Kind regards,
    Kiril Stanoev
    the Telerik team
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner