以增量方式加载透视项.模仿 wp8 日历中的月份视图

本文关键字:日历 视图 wp8 模仿 方式 加载 透视 | 更新日期: 2023-09-27 18:34:10

我想像原生 wp8 日历一样构建月视图。但是,当到达初始加载的数据透视项的末尾时,我坚持增量加载更多透视项。

我有点困惑,如何做到这一点。

这是我到目前为止的 xaml:

<phone:Pivot x:Name="MonthViewPivot" ItemsSource="{Binding Months}" Margin="0"        Loaded="Pivot_Loaded"  SelectionChanged="Pivot_SelectionChanged">
       <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Padding="0,0,0,0" Text="{Binding Name}" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <CompositeTransform TranslateX="0" TranslateY="24"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </Grid>
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>
        <phone:Pivot.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="MonthViewGrid" Height="480" Loaded="MonthViewGrid_Loaded" VerticalAlignment="Top" Margin="-10,70">
                    <StackPanel Orientation="Horizontal" Height="30"  VerticalAlignment="Top" Margin="0,-30" >
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mo</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Di</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mi</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Do</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fr</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sa</TextBlock>
                        <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">So</TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </phone:Pivot.ItemTemplate>
</phone:Pivot>

以增量方式加载透视项.模仿 wp8 日历中的月份视图

所以这是我到目前为止的解决方案。我仍然需要增加 PivotItems 的数量,但对于快速 UX 来说,12 个似乎很高。我认为 5 个就可以了。

用户控件:

<UserControl x:Class="Pocal.MonthViewUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
    <Grid x:Name="MonthViewGrid" Margin="0,60,0,0">     
      <StackPanel Orientation="Horizontal" Height="30"  VerticalAlignment="Top" Margin="0,-30" >
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mon</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Tue</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Wed</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Thu</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fri</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sat</TextBlock>
            <TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sun</TextBlock>
        </StackPanel>
    </Grid>
</Grid>

用户控件代码隐藏:

public partial class MonthViewUserControl : UserControl
{
    public MonthViewUserControl()
    {
        InitializeComponent();
    }
    public void loadGridSetup(DateTime dt)
    {
        TextBlock txt = new TextBlock();
        txt.Text = dt.ToShortDateString();
        txt.Tap += dayTap;
        (MonthViewGrid as Grid).Children.Add(txt);
    }
    void dayTap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        DateTime dt = (DateTime)((FrameworkElement)sender).DataContext;
        MonthView.CurrentPage.navigateBackToDay(dt);
    }
}

MonthView XAML:

<phone:PhoneApplicationPage
x:Class="Pocal.MonthView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:Pocal"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <TextBlock Style="{StaticResource PhoneTextTitle3Style}" VerticalAlignment="Top" Margin="24,24" FontWeight="SemiBold">2014</TextBlock>
    <phone:Pivot x:Name="MonthsPivot" Margin="0,36,0,0" SelectionChanged="Pivot_SelectionChanged">
    </phone:Pivot>
</Grid>

月视图 科德 背后:

public partial class MonthView : PhoneApplicationPage
{
    public static  MonthView CurrentPage;
    PivotItem pivotItem;
    MonthViewUserControl monthViewUserControl;
    public MonthView()
    {
        InitializeComponent();
        CurrentPage = this;
        addFirstThreePivots();
    }

    private void addFirstThreePivots()
    {
        DateTime dt = DateTime.Now.Date;
        DateTime dt2 = dt.AddMonths(1);
        DateTime dt3 = dt.AddMonths(-1);

        addPivotItem(dt);
        addPivotItem(dt2);
        addPivotItem(dt3);

    }
    private void addPivotItem(DateTime dt)
    {
        monthViewUserControl = new MonthViewUserControl();
        monthViewUserControl.loadGridSetup(dt);
        pivotItem = new PivotItem();
        pivotItem.Content = monthViewUserControl;
        pivotItem.DataContext = dt;
        pivotItem.Margin = new Thickness(0, 0, 0, 0);
        pivotItem.Header = dt.ToString("MMMM");
        MonthsPivot.Items.Add(pivotItem);
    }

    private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        DependencyObject selectedPivotItem = ((Pivot)sender).ItemContainerGenerator.ContainerFromIndex(((Pivot)sender).SelectedIndex);
        if (selectedPivotItem == null)
            return;

        DateTime removedDateTime =  (DateTime)(e.RemovedItems[0] as PivotItem).DataContext;
        DateTime addedDateTime =  (DateTime)(e.AddedItems[0] as PivotItem).DataContext;
        if (removedDateTime < addedDateTime)
        {
            forwardPan(addedDateTime);
        }
        else
            backwardPan(addedDateTime);
    }
    private void forwardPan(DateTime addedDateTime)
    {
        PivotItem nextPivotItem = (PivotItem)getNextPivotItem();
        DateTime newDateTime = addedDateTime.AddMonths(1);
        MonthViewUserControl monthViewItem = new MonthViewUserControl();
        monthViewItem.loadGridSetup(newDateTime);
        nextPivotItem.DataContext = newDateTime;
        nextPivotItem.Content = monthViewItem;
        nextPivotItem.Header = newDateTime.ToString("MMMM");
    }
    private DependencyObject getNextPivotItem()
    {
        int index = ((Pivot)MonthsPivot).SelectedIndex;
        int nextIndex;
        if (index == 2)
        {
            nextIndex = 0;
        }
        else
            nextIndex = index + 1;
        DependencyObject nextPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(nextIndex);
        return nextPivotItem;
    }

    private void backwardPan(DateTime addedDateTime)
    {
        PivotItem previousPivotItem = (PivotItem)getPreviousPivotItem();
        DateTime newDateTime = addedDateTime.AddMonths(-1);
        MonthViewUserControl monthViewItem = new MonthViewUserControl();
        monthViewItem.loadGridSetup(newDateTime);
        previousPivotItem.DataContext = newDateTime;
        previousPivotItem.Content = monthViewItem;
        previousPivotItem.Header = newDateTime.ToString("MMMM");
    }
    private DependencyObject getPreviousPivotItem()
    {
        int index = ((Pivot)MonthsPivot).SelectedIndex;
        int previousIndex;
        if (index == 0)
        {
            previousIndex = 2;
        }
        else
            previousIndex = index - 1;
        DependencyObject previousPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(previousIndex);
        return previousPivotItem;
    }

    public void navigateBackToDay(DateTime dt)
    {
        App.ViewModel.GoToDate(dt);
        NavigationService.Navigate(new Uri("/Mainpage.xaml?GoToDate=", UriKind.Relative), dt);
    }

}