Wino-Mail/Wino.Mail.WinUI/Controls/Calendar/CalendarPeriodControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="Wino.Calendar.Controls.CalendarPeriodControl"
    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:helpers="using:Wino.Helpers"
    xmlns:local="using:Wino.Calendar.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:skia="using:SkiaSharp.Views.Windows"
    xmlns:viewModels="using:Wino.Calendar.ViewModels.Data"
    x:Name="Root"
    SizeChanged="ControlSizeChanged"
    mc:Ignorable="d">

    <UserControl.Resources>


        <DataTemplate x:Key="CalendarEventTemplate" x:DataType="viewModels:CalendarItemViewModel">
            <local:CalendarItemControl CalendarItem="{x:Bind}" />
        </DataTemplate>

        <DataTemplate x:Key="MonthEventTemplate" x:DataType="viewModels:CalendarItemViewModel">
            <local:CalendarItemControl CalendarItem="{x:Bind}" IsCustomEventArea="True" />
        </DataTemplate>

        <DataTemplate x:Key="TimedHeaderTemplate" x:DataType="local:HeaderTextLayout">
            <TextBlock
                Width="{x:Bind Width}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontWeight="SemiBold"
                Text="{x:Bind Text}"
                TextAlignment="Center" />
        </DataTemplate>

        <DataTemplate x:Key="MonthHeaderTemplate" x:DataType="local:HeaderTextLayout">
            <TextBlock
                Width="{x:Bind Width}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontWeight="SemiBold"
                Text="{x:Bind Text}"
                TextAlignment="Center" />
        </DataTemplate>

        <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid x:Name="TimedRoot" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Border
                x:Name="TimedHourHeaderHost"
                Grid.Row="0"
                Grid.Column="0"
                Height="44"
                Background="{ThemeResource LayerFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="0,0,1,1" />

            <Grid
                x:Name="TimedHeaderHost"
                Grid.Row="0"
                Grid.ColumnSpan="2"
                Height="44"
                Margin="64,0,0,0"
                Background="{ThemeResource LayerFillColorDefaultBrush}">
                <skia:SKXamlCanvas x:Name="TimedHeaderCanvas" PaintSurface="TimedHeaderCanvasPaintSurface" />
                <ItemsControl
                    x:Name="TimedHeadersItemsControl"
                    HorizontalContentAlignment="Stretch"
                    ItemTemplate="{StaticResource TimedHeaderTemplate}"
                    ItemsSource="{x:Bind TimedHeaderTexts, Mode=OneWay}">
                    <ItemsControl.ItemsPanel>
                        <StaticResource ResourceKey="HorizontalItemsPanel" />
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Grid>

            <Grid
                Grid.Row="1"
                Grid.ColumnSpan="2"
                Background="Transparent">
                <ScrollViewer
                    x:Name="TimedScrollViewer"
                    Background="Transparent"
                    HorizontalScrollBarVisibility="Disabled"
                    VerticalScrollBarVisibility="Auto"
                    VerticalScrollMode="Enabled">
                    <Grid x:Name="TimedScrollContentGrid" Height="{x:Bind TimelineHeight, Mode=OneWay}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="64" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Canvas
                            x:Name="HourLabelsCanvas"
                            Width="64"
                            IsHitTestVisible="False" />

                        <Grid
                            x:Name="TimedViewport"
                            Grid.Column="1"
                            Height="{x:Bind TimelineHeight, Mode=OneWay}">
                            <skia:SKXamlCanvas x:Name="TimedStructureCanvas" PaintSurface="TimedStructureCanvasPaintSurface" />
                            <Border
                                x:Name="TimedInteractionLayer"
                                Background="Transparent"
                                Tapped="TimedInteractionLayerTapped" />
                            <Canvas x:Name="TimedItemsCanvas" />
                        </Grid>
                    </Grid>
                </ScrollViewer>
            </Grid>

        </Grid>

        <Grid x:Name="MonthRoot" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid Height="36">
                <ItemsControl
                    x:Name="MonthHeadersItemsControl"
                    VerticalAlignment="Center"
                    ItemTemplate="{StaticResource MonthHeaderTemplate}"
                    ItemsSource="{x:Bind MonthHeaderTexts, Mode=OneWay}">
                    <ItemsControl.ItemsPanel>
                        <StaticResource ResourceKey="HorizontalItemsPanel" />
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Grid>

            <Grid
                x:Name="MonthViewport"
                Grid.Row="1"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch">
                <skia:SKXamlCanvas x:Name="MonthStructureCanvas" PaintSurface="MonthStructureCanvasPaintSurface" />
                <Border
                    x:Name="MonthInteractionLayer"
                    Background="Transparent"
                    Tapped="MonthInteractionLayerTapped" />
                <Canvas x:Name="MonthCellLabelsCanvas" IsHitTestVisible="False" />
                <Canvas x:Name="MonthItemsCanvas">
                    <Canvas.Transitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition />
                        </TransitionCollection>
                    </Canvas.Transitions>
                </Canvas>
            </Grid>
        </Grid>
    </Grid>
</UserControl>