2014-12-13 10 views
0

我想構建一個像本地wp8日曆一樣的月曆視圖。 但是,當我到達初始加載的數據透視圖的末尾時,我被卡住了更多數據透視圖的增量加載。遞增加載數據透視圖。在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> 
+0

我不相信,這將是你最好的辦法是誠實的。由於一年是圓形的,並且總是有12個月,所以我會懷疑「最簡單」的方法是有12個支點項目。根據當前日期設置初始數據透視表項,並根據左右滑動次數更新日曆視圖和年份。 – JayDev 2014-12-14 16:21:23

回答

0

因此,這裏是我的解決辦法爲止。 我仍然需要增加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> 

MonthView後面的代碼:

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


}