Question

我想建立一个像本机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>

Answer 1

所以这是我迄今为止的解决方案。我仍然需要增加PivotItems的数量，但对于快速用户体验来说，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>

UserControl代码背后：

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>

MonthView COde背后：

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);
    }


}

逐步加载数据透视表。在wp8日历中模仿月份视图

1 个答案: