425 lines
20 KiB
XML
425 lines
20 KiB
XML
<ResourceDictionary
|
|
x:Class="Wino.Calendar.Styles.WinoCalendarResources"
|
|
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"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:models="using:Wino.Core.Domain.Models.Calendar"
|
|
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
|
|
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}">
|
|
<TextBlock
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Top"
|
|
Text="{x:Bind DayHeader}" />
|
|
</Grid>
|
|
</DataTemplate>
|
|
|
|
<!-- Vertical panel that renders items on canvas. -->
|
|
<DataTemplate x:Key="DayCalendarItemVerticalRenderTemplate" x:DataType="models:CalendarDayModel">
|
|
<ItemsControl x:Name="RegularEventItemsControl" ItemsSource="{x:Bind EventsCollection.RegularEvents}">
|
|
<ItemsControl.ItemTemplate>
|
|
<!-- Default Calendar Item View Model Template -->
|
|
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
|
<controls:CalendarItemControl
|
|
CalendarItem="{x:Bind}"
|
|
DisplayingDate="{Binding ElementName=RegularEventItemsControl, Path=DataContext}"
|
|
IsCustomEventArea="False" />
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
<ItemsControl.ItemContainerTransitions>
|
|
<TransitionCollection>
|
|
<PaneThemeTransition Edge="Left" />
|
|
</TransitionCollection>
|
|
</ItemsControl.ItemContainerTransitions>
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<controls:WinoCalendarPanel HourHeight="{Binding Path=CalendarRenderOptions.CalendarSettings.HourHeight}" Period="{Binding Path=Period}" />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
</ItemsControl>
|
|
</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"
|
|
Background="Transparent"
|
|
ColumnSpacing="0"
|
|
RowSpacing="0">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" MinHeight="100" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<ItemsControl Margin="50,0,16,0" ItemsSource="{x:Bind CalendarDays}">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate x:DataType="models:CalendarDayModel">
|
|
<controls:DayColumnControl DayModel="{x:Bind}" />
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<toolkitControls:UniformGrid
|
|
Columns="{Binding CalendarRenderOptions.TotalDayCount}"
|
|
Orientation="Horizontal"
|
|
Rows="1" />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
</ItemsControl>
|
|
|
|
<ScrollViewer
|
|
Grid.Row="1"
|
|
Grid.ColumnSpan="2"
|
|
Margin="0"
|
|
Padding="0,0,16,0">
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="50" />
|
|
<ColumnDefinition Width="*" />
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- Rendering left hour headers. -->
|
|
<ItemsControl ItemTemplate="{StaticResource DayCalendarHourHeaderTemplate}" ItemsSource="{x:Bind DayHeaders}" />
|
|
|
|
<!-- Drawing canvas for timeline. -->
|
|
<controls:WinoDayTimelineCanvas
|
|
Grid.Column="1"
|
|
HalfHourSeperatorColor="{ThemeResource CalendarSeperatorBrush}"
|
|
PositionerUIElement="{Binding ElementName=RootGrid}"
|
|
RenderOptions="{x:Bind CalendarRenderOptions}"
|
|
SelectedCellBackgroundBrush="{ThemeResource CalendarFieldSelectedBackgroundBrush}"
|
|
SeperatorColor="{ThemeResource CalendarSeperatorBrush}"
|
|
WorkingHourCellBackgroundColor="{ThemeResource CalendarFieldWorkingHoursBackgroundBrush}" />
|
|
|
|
<!-- Each vertical day grids that renders events. -->
|
|
<ItemsControl
|
|
Grid.Column="1"
|
|
HorizontalContentAlignment="Stretch"
|
|
VerticalContentAlignment="Stretch"
|
|
ItemTemplate="{StaticResource DayCalendarItemVerticalRenderTemplate}"
|
|
ItemsSource="{x:Bind CalendarDays}">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<toolkitControls:UniformGrid
|
|
Columns="{Binding CalendarRenderOptions.TotalDayCount}"
|
|
Orientation="Horizontal"
|
|
Rows="1" />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
</ItemsControl>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</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">
|
|
<Grid>
|
|
<controls:WinoCalendarFlipView
|
|
x:Name="PART_WinoFlipView"
|
|
HorizontalContentAlignment="Stretch"
|
|
VerticalContentAlignment="Stretch"
|
|
ActiveCanvas="{x:Bind ActiveCanvas, Mode=TwoWay}"
|
|
ActiveVerticalScrollViewer="{x:Bind ActiveScrollViewer, Mode=TwoWay}"
|
|
Background="Transparent"
|
|
IsIdle="{x:Bind IsFlipIdle, Mode=TwoWay}"
|
|
IsTabStop="False"
|
|
ItemsSource="{TemplateBinding DayRanges}"
|
|
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
|
|
Width="50"
|
|
Height="50"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
IsActive="True" />
|
|
</Grid>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</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>
|
|
|
|
<!-- 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.ItemTemplate>
|
|
<DataTemplate x:DataType="data:CalendarItemViewModel">
|
|
<controls:CalendarItemControl
|
|
CalendarItem="{x:Bind}"
|
|
DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
|
|
IsCustomEventArea="True" />
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
<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" Value="{StaticResource DailyColumnControlTemplate}" />
|
|
</Style>
|
|
|
|
|
|
</ResourceDictionary>
|
|
|