Monthly calendar basics.
This commit is contained in:
Burak Kaan Köse
@@ -3,6 +3,7 @@
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Wino.Calendar.Controls"
|
||||
xmlns:controls1="using:Wino.Core.UWP.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:data="using:Wino.Calendar.ViewModels.Data"
|
||||
xmlns:helpers="using:Wino.Helpers"
|
||||
@@ -12,8 +13,6 @@
|
||||
xmlns:selectors="using:Wino.Calendar.Selectors"
|
||||
xmlns:toolkitControls="using:CommunityToolkit.WinUI.Controls">
|
||||
|
||||
|
||||
|
||||
<!-- 08:00 or 8 AM/PM on the left etc. -->
|
||||
<DataTemplate x:Key="DayCalendarHourHeaderTemplate" x:DataType="models:DayHeaderRenderModel">
|
||||
<Grid Height="{x:Bind HourHeight}">
|
||||
@@ -50,6 +49,8 @@
|
||||
</DataTemplate>
|
||||
|
||||
<!-- Equally distributed days of week representation in FlipView. -->
|
||||
<!-- Used for day-week-work week templates. -->
|
||||
<!-- Horizontal template -->
|
||||
<DataTemplate x:Key="FlipTemplate" x:DataType="models:DayRangeRenderModel">
|
||||
<Grid
|
||||
x:Name="RootGrid"
|
||||
@@ -57,14 +58,11 @@
|
||||
ColumnSpacing="0"
|
||||
RowSpacing="0">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" MinHeight="100" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ItemsControl
|
||||
Grid.Column="1"
|
||||
Margin="50,0,16,0"
|
||||
ItemsSource="{x:Bind CalendarDays}">
|
||||
<ItemsControl Margin="50,0,16,0" ItemsSource="{x:Bind CalendarDays}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="models:CalendarDayModel">
|
||||
<controls:DayColumnControl DayModel="{x:Bind}" />
|
||||
@@ -125,9 +123,58 @@
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
|
||||
<!-- Template that displays 35 days in total. -->
|
||||
<!-- Used for monthly view -->
|
||||
<!-- Vertical template -->
|
||||
<DataTemplate x:Key="MonthlyFlipTemplate" x:DataType="models:DayRangeRenderModel">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid Height="20">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
</Grid>
|
||||
<ItemsControl Grid.Row="1" ItemsSource="{x:Bind CalendarDays}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="models:CalendarDayModel">
|
||||
<controls:DayColumnControl DayModel="{x:Bind Mode=OneWay}" Template="{StaticResource MonthlyColumnControlTemplate}" />
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<controls1:EqualGridPanel Columns="7" Rows="5" />
|
||||
<!--<ItemsWrapGrid MaximumRowsOrColumns="7" Orientation="Horizontal" />-->
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
</ItemsControl>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
|
||||
<ItemsPanelTemplate x:Key="VerticalFlipViewItemsPanel">
|
||||
<VirtualizingStackPanel Orientation="Vertical" />
|
||||
</ItemsPanelTemplate>
|
||||
|
||||
<ItemsPanelTemplate x:Key="HorizontalFlipViewItemsPanel">
|
||||
<VirtualizingStackPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
|
||||
|
||||
|
||||
<!-- Default style for WinoCalendarControl -->
|
||||
<Style TargetType="controls:WinoCalendarControl">
|
||||
<Style.Setters>
|
||||
<Setter Property="HorizontalItemsPanelTemplate" Value="{StaticResource HorizontalFlipViewItemsPanel}" />
|
||||
<Setter Property="VerticalItemsPanelTemplate" Value="{StaticResource VerticalFlipViewItemsPanel}" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="controls:WinoCalendarControl">
|
||||
@@ -141,9 +188,15 @@
|
||||
Background="Transparent"
|
||||
IsIdle="{x:Bind IsFlipIdle, Mode=TwoWay}"
|
||||
IsTabStop="False"
|
||||
ItemTemplate="{StaticResource FlipTemplate}"
|
||||
ItemsSource="{TemplateBinding DayRanges}"
|
||||
SelectedIndex="{Binding SelectedFlipViewIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" />
|
||||
SelectedIndex="{Binding SelectedFlipViewIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
|
||||
<controls:WinoCalendarFlipView.ItemTemplateSelector>
|
||||
<selectors:WinoCalendarItemTemplateSelector
|
||||
DayWeekWorkWeekTemplate="{StaticResource FlipTemplate}"
|
||||
DisplayType="{x:Bind DisplayType, Mode=OneWay}"
|
||||
MonthlyTemplate="{StaticResource MonthlyFlipTemplate}" />
|
||||
</controls:WinoCalendarFlipView.ItemTemplateSelector>
|
||||
</controls:WinoCalendarFlipView>
|
||||
|
||||
<Grid x:Name="PART_IdleGrid" Visibility="Collapsed">
|
||||
<muxc:ProgressRing
|
||||
@@ -160,122 +213,227 @@
|
||||
</Style.Setters>
|
||||
</Style>
|
||||
|
||||
<!-- Top header control for days. -->
|
||||
<ControlTemplate x:Key="DailyColumnControlTemplate" TargetType="controls:DayColumnControl">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="25" />
|
||||
<RowDefinition Height="7" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Name of the day. Monday, Tuesday etc. at the top. -->
|
||||
<TextBlock
|
||||
x:Name="PART_ColumnHeaderText"
|
||||
Margin="8,0,0,0"
|
||||
FontSize="16"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
|
||||
<Grid
|
||||
Grid.Row="2"
|
||||
Grid.RowSpan="2"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}"
|
||||
BorderThickness="1,1,0,1" />
|
||||
|
||||
<!-- Border for today indication. -->
|
||||
<Border
|
||||
x:Name="PART_IsTodayBorder"
|
||||
Grid.Row="1"
|
||||
Height="5"
|
||||
Margin="2,0,2,0"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
Background="{ThemeResource SystemAccentColor}"
|
||||
CornerRadius="2"
|
||||
Visibility="Collapsed" />
|
||||
|
||||
<!-- Place where full day events go. -->
|
||||
<Grid
|
||||
x:Name="PART_DayDataAreaGrid"
|
||||
Grid.Row="2"
|
||||
Padding="6"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" MinHeight="35" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Day number -->
|
||||
<TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
|
||||
|
||||
<!-- Extras -->
|
||||
<StackPanel Grid.Column="1" HorizontalAlignment="Right" />
|
||||
|
||||
<!-- All-Multi Day Events -->
|
||||
<ItemsControl
|
||||
x:Name="PART_AllDayItemsControl"
|
||||
Grid.Row="1"
|
||||
Grid.ColumnSpan="2"
|
||||
Margin="0,6">
|
||||
<ItemsControl.ItemTemplateSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector>
|
||||
</ItemsControl.ItemTemplateSelector>
|
||||
<ItemsControl.ItemContainerTransitions>
|
||||
<TransitionCollection>
|
||||
<AddDeleteThemeTransition />
|
||||
</TransitionCollection>
|
||||
</ItemsControl.ItemContainerTransitions>
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Orientation="Vertical" Spacing="2" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
</ItemsControl>
|
||||
</Grid>
|
||||
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="TodayOrNotStates">
|
||||
<VisualState x:Name="NotTodayState" />
|
||||
<VisualState x:Name="TodayState">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
|
||||
<Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
|
||||
<Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
|
||||
<Setter Target="PART_ColumnHeaderText.FontWeight" Value="Semibold" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
|
||||
<!-- Monthly data control for months -->
|
||||
<ControlTemplate x:Key="MonthlyColumnControlTemplate" TargetType="controls:DayColumnControl">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="5" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Border for today indication. -->
|
||||
<Border
|
||||
x:Name="PART_IsTodayBorder"
|
||||
Grid.Row="0"
|
||||
Height="5"
|
||||
Margin="2,0,2,0"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
Background="{ThemeResource SystemAccentColor}"
|
||||
CornerRadius="2"
|
||||
Visibility="Collapsed" />
|
||||
|
||||
<!-- Border -->
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}"
|
||||
BorderThickness="1,1,0,1" />
|
||||
|
||||
<!-- Place where full day events go. -->
|
||||
<Grid
|
||||
x:Name="PART_DayDataAreaGrid"
|
||||
Grid.Row="1"
|
||||
Padding="6"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" MinHeight="35" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Day number -->
|
||||
<TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
|
||||
|
||||
<!-- Extras -->
|
||||
<StackPanel Grid.Column="1" HorizontalAlignment="Right" />
|
||||
|
||||
<!-- All events summary. -->
|
||||
<ScrollViewer
|
||||
Grid.Row="1"
|
||||
Grid.ColumnSpan="2"
|
||||
Margin="0,6"
|
||||
Padding="0,0,16,0">
|
||||
<ItemsControl x:Name="PART_AllDayItemsControl">
|
||||
<ItemsControl.ItemTemplateSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector>
|
||||
</ItemsControl.ItemTemplateSelector>
|
||||
<ItemsControl.ItemContainerTransitions>
|
||||
<TransitionCollection>
|
||||
<AddDeleteThemeTransition />
|
||||
</TransitionCollection>
|
||||
</ItemsControl.ItemContainerTransitions>
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Orientation="Vertical" Spacing="2" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
</ItemsControl>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="TodayOrNotStates">
|
||||
<VisualState x:Name="NotTodayState" />
|
||||
<VisualState x:Name="TodayState">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
|
||||
<Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
|
||||
<Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
|
||||
<!-- Default style for DayColumnControl -->
|
||||
<Style TargetType="controls:DayColumnControl">
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="controls:DayColumnControl">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="25" />
|
||||
<RowDefinition Height="7" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Name of the day. Monday, Tuesday etc. at the top. -->
|
||||
<TextBlock
|
||||
x:Name="PART_ColumnHeaderText"
|
||||
Margin="8,0,0,0"
|
||||
FontSize="16"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
|
||||
<Grid
|
||||
Grid.Row="2"
|
||||
Grid.RowSpan="2"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}"
|
||||
BorderThickness="1,1,0,1" />
|
||||
|
||||
<!-- Border for today indication. -->
|
||||
<Border
|
||||
x:Name="PART_IsTodayBorder"
|
||||
Grid.Row="1"
|
||||
Height="5"
|
||||
Margin="2,0,2,0"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
Background="{ThemeResource SystemAccentColor}"
|
||||
CornerRadius="2"
|
||||
Visibility="Collapsed" />
|
||||
|
||||
<!-- Place where full day events go. -->
|
||||
<Grid
|
||||
x:Name="PART_DayDataAreaGrid"
|
||||
Grid.Row="2"
|
||||
Padding="6"
|
||||
BorderBrush="{ThemeResource CalendarSeperatorBrush}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" MinHeight="35" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Day number -->
|
||||
<TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
|
||||
|
||||
<!-- Extras -->
|
||||
<StackPanel Grid.Column="1" HorizontalAlignment="Right" />
|
||||
|
||||
<!-- All-Multi Day Events -->
|
||||
<ItemsControl
|
||||
x:Name="PART_AllDayItemsControl"
|
||||
Grid.Row="1"
|
||||
Grid.ColumnSpan="2"
|
||||
Margin="0,6">
|
||||
<ItemsControl.ItemTemplateSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector>
|
||||
<selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
|
||||
<selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
||||
<controls:CalendarItemControl
|
||||
CalendarItem="{x:Bind}"
|
||||
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
||||
IsCustomEventArea="True" />
|
||||
</DataTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
|
||||
</selectors:CustomAreaCalendarItemSelector>
|
||||
</ItemsControl.ItemTemplateSelector>
|
||||
<ItemsControl.ItemContainerTransitions>
|
||||
<TransitionCollection>
|
||||
<AddDeleteThemeTransition />
|
||||
</TransitionCollection>
|
||||
</ItemsControl.ItemContainerTransitions>
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Orientation="Vertical" Spacing="2" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
</ItemsControl>
|
||||
</Grid>
|
||||
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="TodayOrNotStates">
|
||||
<VisualState x:Name="NotTodayState" />
|
||||
<VisualState x:Name="TodayState">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
|
||||
<Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
|
||||
<Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
|
||||
<Setter Target="PART_ColumnHeaderText.FontWeight" Value="Semibold" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<Setter Property="Template" Value="{StaticResource DailyColumnControlTemplate}" />
|
||||
</Style>
|
||||
|
||||
|
||||
</ResourceDictionary>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user