开发者

Endless Pivot Control

开发者 https://www.devze.com 2023-02-14 03:52 出处:网络
I\'m trying to use a Pivot control for a calendar type app, where each Pivot view shows some infos about the current day. When the user swipes forward, the next day is shown. I implemented this by add

I'm trying to use a Pivot control for a calendar type app, where each Pivot view shows some infos about the current day. When the user swipes forward, the next day is shown. I implemented this by adding items to the end of the Pivot Item collection, which works fine.

My problem occurs when the user tries to go backward to the previous day. In this case a new item is added at the beginning of the Pivot item collection. Although the adding works, the shown Pivot item is always the wrong one (ie. the newly added item). Setting SelectedItem on the Pivot control doesn't help.

I think Pivot might not be the right control for my task, so any help about what view to use or how fix my aforementioned problem with Pivot are highly appreciated.

code for my Viewmodel that implements going forward/backward one day. Pages is bound to the Pivot ItemSource.

public class TrackDayViewModel : HubViewModelBase
{
    private DateTime _CurrentDay;
    public DateTime CurrentDay
    {
        get { return _CurrentDay; }
        set
        {
            if (value.CompareTo (_CurrentDay) != 0)
            {
                _CurrentDay = value;
                OnPropertyChanged("CurrentDay");
            }
        }
    }

    public TrackDayViewModel ()
    {
        var day = DateTime.Now;

        CurrentDay = day.Midnight();

        Pages.Add(new DayViewModel(CurrentDay.AddDays(-1)));
        Pages.Add(new DayViewModel(CurrentDay));
        Pages.Add(new DayViewModel(CurrentDay.AddDays(1)));

        SelectedItem = Pages[1];

        this.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == "SelectedItem")
            {
                var si = SelectedItem as DayViewModel;

                if (si != null)
开发者_运维百科                {
                    var idx = Pages.IndexOf(SelectedItem);
                    if (idx==0)
                    {
                        Pages.Insert(0, new DayViewModel(si.Day.AddDays(-1)));
                        SelectedItem = Pages[1];
                    }
                    else if (idx == (Pages.Count - 1))
                    {
                        Pages.Add(new DayViewModel(si.Day.AddDays(1)));
                    }
                }
            }
        };
    }
}

EDIT: Change that solved my problem:

        this.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == "SelectedItem")
            {
                var si = SelectedItem as DayViewModel;

                if (si != null)
                {
                    var idx = Pages.IndexOf(SelectedItem);

                    int nextIdx = (idx + 1) % 3;
                    int prevIdx = ((idx - 1)<0)  ? 2 : (idx-1);

                    Pages[nextIdx] = new DayViewModel(si.Day.AddDays(1));
                    Pages[prevIdx] = new DayViewModel(si.Day.AddDays(-1));
                }
            }
        };


For this, I'd use a Pivot control with 4 pages.

At any one time, the previous, current and next pages will contain correct data - and you will always have one (empty) page

You can then respond to the events when your current page is changing and has changed - use these events to set up the current (empty) page to the correct new content and to then clear the new (empty) page.


The guidelines for Pivot control state that it should be avoided if you have more than 6 pages.

Using it for unlimited pages in out of question.

What I would recommend is using TransitioningContentControl with help of touch gestures for flipping forward and backward. TransitioningContentControl allows you to use animation while its content is being changed.

0

精彩评论

暂无评论...
验证码 换一张
取 消