以增量方式加载透视项.模仿 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>
所以这是我到目前为止的解决方案。我仍然需要增加 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);
}
}