Wino-Mail/Wino.Calendar/Styles/WinoCalendarResources.xaml

<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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:Wino.Calendar.ViewModels.Data"
    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:toolkitControls="using:CommunityToolkit.WinUI.Controls">

    <!--  Default Calendar Item View Model Template  -->
    <DataTemplate x:Key="CalendarItemViewModelItemTemplate" x:DataType="data:CalendarItemViewModel">
        <Grid Background="Red" CornerRadius="4">
            <TextBlock
                HorizontalAlignment="Center"
                Text="{x:Bind CalendarItem.Title}"
                TextWrapping="Wrap" />
        </Grid>
    </DataTemplate>

    <!--  All-Day Event template  -->
    <DataTemplate x:Key="AllDayEventItemTemplate" x:DataType="data:CalendarItemViewModel">
        <TextBlock Text="{x:Bind Title}" />
    </DataTemplate>

    <!--  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 ItemTemplate="{StaticResource CalendarItemViewModelItemTemplate}" ItemsSource="{x:Bind EventsCollection.RegularEvents}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <controls:WinoCalendarPanel HourHeight="{Binding Path=CalendarRenderOptions.CalendarSettings.HourHeight}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </DataTemplate>

    <!--  Equally distributed days of week representation in FlipView.  -->
    <DataTemplate x:Key="FlipTemplate" x:DataType="models:DayRangeRenderModel">
        <Grid
            x:Name="RootGrid"
            Background="Transparent"
            ColumnSpacing="0"
            RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <ItemsControl
                Grid.Column="1"
                Margin="50,0,16,0"
                ItemsSource="{x:Bind CalendarDays}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate x:DataType="models:CalendarDayModel">
                        <controls:DayColumnControl
                            MinHeight="100"
                            MaxHeight="200"
                            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>

    <!--  Default style for WinoCalendarControl  -->
    <Style TargetType="controls:WinoCalendarControl">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:WinoCalendarControl">
                        <controls:WinoCalendarFlipView
                            x:Name="PART_WinoFlipView"
                            HorizontalContentAlignment="Stretch"
                            VerticalContentAlignment="Stretch"
                            ActiveCanvas="{x:Bind ActiveCanvas, Mode=TwoWay}"
                            Background="Transparent"
                            IsTabStop="False"
                            ItemTemplate="{StaticResource FlipTemplate}"
                            ItemsSource="{TemplateBinding DayRanges}"
                            SelectedIndex="{Binding SelectedFlipViewIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

    <!--  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="*" />
                            </Grid.RowDefinitions>

                            <!--  Day number  -->
                            <TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />

                            <!--  Extras  -->
                            <StackPanel Grid.Column="1" HorizontalAlignment="Right" />

                            <!--  All-Day Events  -->
                            <controls:AllDayItemsControl
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                AllDayEventTemplate="{StaticResource AllDayEventItemTemplate}"
                                EventCollection="{Binding EventsCollection}"
                                RegularEventItemTemplate="{StaticResource CalendarItemViewModelItemTemplate}" />
                        </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>
    </Style>

    <!--  Teaching tip dialog sizing.  -->
    <x:Double x:Key="TeachingTipMinWidth">1000</x:Double>
    <x:Double x:Key="TeachingTipMaxWidth">1000</x:Double>

</ResourceDictionary>