In the last part you set up the application. In this part, you will use code and XAML markup to create a calendar using the C1Book control. You will change each page that you added to your application from a <navigation: Page> page type to a <UserControl> page type both in the XAML markup and in the code.
1. Double-click on CalendarBookResources.xaml to open the page and switch to the XAML view. Replace the markup on the page with the following xaml markup to create your Resource Dictionary:
<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Spiral Styles -->
<Style x:Key="SpiralTop" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF9D9D9D" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush" Value="#FF434343" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
<Style x:Key="SpiralTopDark" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484848" Offset="1" />
<GradientStop Color="#FFC5C5C5" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF676767" Offset="0" />
<GradientStop Color="#FF1A1A1A" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
<Style x:Key="SpiralBottom" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF9D9D9D" Offset="1" />
<GradientStop Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="0,0,2,2" />
<Setter Property="BorderBrush" Value="#FF434343" />
<Setter Property="BorderThickness" Value="1,0,1,1" />
</Style>
<Style x:Key="SpiralHole" TargetType="Rectangle">
<Setter Property="Fill" Value="#FF1D2A33" />
<Setter Property="RadiusX" Value="2" />
<Setter Property="RadiusY" Value="2" />
</Style>
</ResourceDictionary>
2. Open your MainPage.xaml page by double-clicking on it. Replace the markup on the page with the following xaml markup to create the C1Book control and add some content to the control:
<UserControl x:Class="CalendarBook.MainPage"
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:c1="http://schemas.componentone.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CalendarBook"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="475" >
<UserControl.Resources>
<Style x:Key="SpiralTopDark" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484848" Offset="1" />
<GradientStop Color="#FFC5C5C5" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush" Value="#FF1A1A1A" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
<Style x:Key="C1BookItemStyle" TargetType="c1:C1BookItem">
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="c1:C1BookItem">
<Grid Background="{x:Null}">
<ContentControl x:Name="ContentControl">
<ContentControl.Template>
<ControlTemplate>
<ContentPresenter />
</ControlTemplate>
</ContentControl.Template>
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<local:CalendarTopSpiral VerticalAlignment="Center" />
<c1:C1Book x:Name="calendar2010" Orientation="Vertical" PageFoldAction="TurnPageOnClick" IsFirstPageOnTheRight="True" MinWidth="310" MaxWidth="500" MaxHeight="500" Grid.RowSpan="2" ItemContainerStyle="{StaticResource C1BookItemStyle}">
<local:CalendarBookCover d:IsHidden="True" />
</c1:C1Book>
</Grid>
</UserControl>
3. View MainPage.xaml.cs by right-clicking on the page and choosing View Code from the list. Add the following statements to the top of the page:
Imports System.Globalization
Imports System.Windows.Threading
•C#
using System.Globalization;
using System.Windows.Threading;
4. Add the following code directly after the InitializeComponent() method:
For Each month As var In MonthData.Months
Dim top As var = New CalendarBookTop
top.DataContext = month
AddHandler top.MonthRequested, AddressOf Me.top_MonthRequested
calendar2010.Items.Add(top)
Dim bottom As var = New CalendarBookBottom
bottom.DataContext = month
calendar2010.Items.Add(bottom)
Next
UnknownUnknownPublic Class MonthData
Public Sub New(ByVal index As Integer)
MyBase.New
Day = New DateTime(2010, index, 1)
Index = index
Dim text As var = Day.ToString("MMMM")
Name = (text(0).ToString.ToUpper + text.Substring(1).ToLower)
End Sub
Public Property Day As DateTime
End Property
Public Property Name As String
End Property
Public Property Index As Integer
End Property
Public Shared _months As List(Of MonthData) = New List(Of MonthData)
Public Shared ReadOnly Property Months As List(Of MonthData)
Get
If (_months.Count = 0) Then
Dim i As Integer = 1
Do While (i <= 12)
_months.Add(New MonthData(i))
i = (i + 1)
Loop
End If
Return _months
End Get
End Property
End Class
Unknown
Private Sub top_MonthRequested(ByVal sender As Object, ByVal e As MonthEventArgs)
Dim timer As var = New DispatcherTimer() {Interval=TimeSpan.FromSeconds(0.05Unknown}
timer.Tick = (timer.Tick + s)
e2
Dim index As var = (e.Month.Index * 2)
If ((calendar2010.CurrentPage = index) _
OrElse (calendar2010.CurrentPage _
= (index - 1))) Then
timer.Stop
Else
calendar2010.TurnPage((index > calendar2010.CurrentPage))
End If
timer.Start
End Sub
•C#
foreach (var month in MonthData.Months)
{
var top = new CalendarBookTop();
top.DataContext = month;
top.MonthRequested += new EventHandler<MonthEventArgs>(top_MonthRequested);
calendar2010.Items.Add(top);
var bottom = new CalendarBookBottom();
bottom.DataContext = month;
calendar2010.Items.Add(bottom);
}
}
void top_MonthRequested(object sender, MonthEventArgs e)
{
var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(0.05) };
timer.Tick += (s, e2) =>
{
var index = e.Month.Index * 2;
if (calendar2010.CurrentPage == index || calendar2010.CurrentPage == index - 1)
{
timer.Stop();
}
else
{
calendar2010.TurnPage(index > calendar2010.CurrentPage);
}
};
timer.Start();
}
}
public class MonthData
{
public MonthData(int index)
{
Day = new DateTime(2010, index, 1);
Index = index;
var text = Day.ToString("MMMM");
Name = text[0].ToString().ToUpper() + text.Substring(1).ToLower();
}
public DateTime Day { get; set; }
public string Name { get; set; }
public int Index { get; set; }
public static List<MonthData> _months = new List<MonthData>();
public static List<MonthData> Months
{
get
{
if (_months.Count == 0)
{
for (int i = 1; i <= 12; i++)
{
_months.Add(new MonthData(i));
}
}
return _months;
}
}
}
}
5. Double-click on CalendarBookTop.xaml to view the page. Add the following xaml markup to the page, replacing the existing markup:
<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="CalendarBook.CalendarBookTop" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CalendarBookResources.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="MonthButton" TargetType="Button">
<Setter Property="Background" Value="#FF0C2934" />
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="Foreground" Value="#ff10657a" />
<Setter Property="Padding" Value="1 2 1 1" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0" />
<GradientStop Color="#FF8399A9" Offset="0.375" />
<GradientStop Color="#FF718597" Offset="0.375" />
<GradientStop Color="#FF617584" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle x:Name="rectangle" Fill="White" Stroke="#FF8899A9" Grid.RowSpan="2" RadiusX="2" RadiusY="2" StrokeThickness="2" Visibility="Collapsed">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF00D0FF" BlurRadius="8" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="White" Stretch="Fill" Stroke="#FF8899A9" StrokeThickness="2" Grid.RowSpan="2" RadiusX="2" RadiusY="2" />
<Path Fill="#FFD5E3EA" Stretch="Fill" UseLayoutRounding="False" Data="M357,155.15535 L427.00003,155.15535 L427.00003,190.99835 L357,190.99835 z M286,155.15535 L355,155.15535 L355,190.99835 L286,190.99835 z M214.00002,155.15535 L284,155.15535 L284,190.99835 L214.00002,190.99835 z M143,155.15535 L212,155.15535 L212,190.99835 L143,190.99835 z M71,155.15535 L141,155.15535 L141,190.99835 L71,190.99835 z M0,155.15535 L69,155.15535 L69,164.99834 L69,182.99834 L69,184.99835 L69,185.99834 L69,190.99835 L64,190.99835 L62,190.99835 L5,190.99835 C2.2385864,190.99835 0,188.75977 0,185.99834 L0,184.99835 L0,182.99834 z M429,155.15535 L498,155.15535 L498,172.9982 L498,181.77263 C498,184.53406 488.1828,190.99835 488.1828,190.99835 L480.00003,190.99835 L429,190.99835 L429,183.99858 z M429,123.3285 L498,123.3285 L498,153.16634 L429,153.16634 z M357,123.3285 L427.00003,123.3285 L427.00003,153.16634 L357,153.16634 z M286,123.3285 L355,123.3285 L355,153.16634 L286,153.16634 z M214.00002,123.3285 L284,123.3285 L284,153.16634 L214.00002,153.16634 z M143,123.3285 L212,123.3285 L212,153.16634 L143,153.16634 z M71,123.3285 L141,123.3285 L141,153.16634 L71,153.16634 z M0,123.3285 L69,123.3285 L69,153.16634 L0,153.16634 z M429,92.496246 L498,92.496246 L498,121.33949 L429,121.33949 z M357,92.496246 L427.00003,92.496246 L427.00003,121.33949 L357,121.33949 z M286,92.496246 L355,92.496246 L355,121.33949 L286,121.33949 z M214.00002,92.496246 L284,92.496246 L284,121.33949 L214.00002,121.33949 z M143,92.496246 L212,92.496246 L212,121.33949 L143,121.33949 z M71,92.496246 L141,92.496246 L141,121.33949 L71,121.33949 z M0,92.496246 L69,92.496246 L69,121.33949 L0,121.33949 z M429,61.664253 L498,61.664253 L498,90.507492 L429,90.507492 z M357,61.664253 L427.00003,61.664253 L427.00003,90.507492 L357,90.507492 z M286,61.664253 L355,61.664253 L355,90.507492 L286,90.507492 z M214.00002,61.664253 L284,61.664253 L284,90.507492 L214.00002,90.507492 z M143,61.664253 L212,61.664253 L212,90.507492 L143,90.507492 z M71,61.664253 L141,61.664253 L141,90.507492 L71,90.507492 z M0,61.664253 L69,61.664253 L69,90.507492 L0,90.507492 z M429,30.832001 L498,30.832001 L498,59.675255 L429,59.675255 z M357,30.832001 L427.00003,30.832001 L427.00003,59.675255 L357,59.675255 z M286,30.832001 L355,30.832001 L355,59.675255 L286,59.675255 z M214.00002,30.832001 L284,30.832001 L284,59.675255 L214.00002,59.675255 z M143,30.832001 L212,30.832001 L212,59.675255 L143,59.675255 z M71,30.832001 L141,30.832001 L141,59.675255 L71,59.675255 z M0,30.832001 L69,30.832001 L69,59.675255 L0,59.675255 z M429,0 L498,0 L498,28.843246 L429,28.843246 z M357,0 L427.00003,0 L427.00003,28.843231 L357,28.843231 z M286,0 L355,0 L355,28.843231 L286,28.843231 z M214.00002,0 L284,0 L284,28.843231 L214.00002,28.843231 z M143,0 L212,0 L212,28.843231 L143,28.843231 z M71,0 L141,0 L141,28.843246 L71,28.843246 z M0,0 L69,0 L69,28.843246 L0,28.843246 z" Grid.Row="1" Margin="4,2,4,4" />
<Border BorderBrush="#FF8899A9" BorderThickness="2,2,2,1" CornerRadius="2" Background="#FFAAC3CB" />
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
<Path Fill="#FFFFFFFF" Stretch="Fill" Height="14" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="14" UseLayoutRounding="False" Grid.Row="1" Data="M0,3 C0,1.3431457 1.3431457,0 3,0 L17,0 C18.656855,0 20,1.3431457 20,3 C20,3 3,20 3,20 C1.3431457,20 0,18.656855 0,17 z" Stroke="#FF8899A9" StrokeThickness="2" />
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0" Grid.RowSpan="2" />
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Border Background="White" CornerRadius="10,10,5,5">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="75" />
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderThickness="2,2,2,3" CornerRadius="5,5,0,0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF425E76" Offset="0" />
<GradientStop Color="#FF788C9F" Offset="0.651" />
<GradientStop Color="#FF425E76" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF245A76" Offset="0" />
<GradientStop Color="#FF6B91AA" Offset="0.583" />
<GradientStop Color="#FF759AB5" Offset="0.665" />
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<TextBlock Text="20" TextWrapping="Wrap" FontSize="150" FontFamily="Times New Roman">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF134659" Offset="0.2" />
<GradientStop Color="#FF0C2934" Offset="0.3" />
<GradientStop Color="#FF13455A" Offset="0.404" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="10" TextWrapping="Wrap" FontSize="150" FontFamily="Times New Roman" Margin="-4,0,0,0">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C9CD" Offset="0.2" />
<GradientStop Color="DarkGray" Offset="0.3" />
<GradientStop Color="#FFFCFCFC" Offset="0.4" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
<TextBlock x:Name="month" Text="{Binding Name}" TextWrapping="Wrap" FontSize="32" FontFamily="Times New Roman" Foreground="White" Margin="20,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="2" ShadowDepth="2" Color="#FF2C4A64" />
</TextBlock.Effect>
</TextBlock>
<Path Stretch="Fill" UseLayoutRounding="False" Data="M0,0 L493.79904,0 C497.28104,1.4098798 499.49084,8.2246914 500,22.265001 L500,61.752743 L493.36795,60.268562 C456.3688,52.313362 416.7272,48.000004 375.5,48.000008 C191.56329,48.000004 39.188137,133.8588 12.234431,245.94026 L11.340348,250 L0,250 z">
<Path.Fill>
<LinearGradientBrush EndPoint="0.428,0.832" StartPoint="0.246,-0.03">
<GradientStop Color="#0CFFFFFF" Offset="0" />
<GradientStop Color="#4CFFFFFF" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
<ItemsControl x:Name="months" Grid.Row="1" Margin="8,8,8,31">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<c1:C1UniformGrid Rows="2" Columns="6" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Month.Name}" Style="{StaticResource MonthButton}" Margin="8" Click="Button_Click" IsEnabled="{Binding Current}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid x:Name="Spiral" Height="25" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="100*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="7" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="13" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="19" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="25" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="31" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="37" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="43" Grid.ColumnSpan="5" />
<Border Style="{StaticResource SpiralTop}" Grid.RowSpan="2" Grid.Column="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="8" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="10" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="14" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="16" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="20" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="22" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="26" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="28" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="32" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="34" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="38" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="40" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="44" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTop}" Grid.Column="46" Grid.RowSpan="2" Grid.Row="1" />
</Grid>
</Grid>
</Border>
</UserControl>
6. Right-click on the page and select View Code from the list to view the code. Use the following code to replace the code on the page, starting with the class. This will change the page to being a UserControl.
Public Class CalendarBookTop
Inherits UserControl
Public Sub New()
MyBase.New
InitializeComponent
Loaded = (Loaded + AddressOf Me.CalendarBookTop_Loaded)
End Sub
Private Sub CalendarBookTop_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
For Each month As var In MonthData.Months
months.Items.Add(New CalendarItem, {, Month=month, Current=!(DataContext==monthUnknown)
Next
End Sub
End Class
UnknownUnknownPublic Class MonthEventArgs
Inherits EventArgs
Public Property Month As MonthData
End Property
End Class
Public Class CalendarItem
Public Property Current As Boolean
End Property
Public Property Month As MonthData
End Property
End Class
Unknown
Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim btn As var = CType(sender,Button)
Dim item As var = CType(btn.DataContext,CalendarItem)
If (Not (MonthRequested) Is Nothing) Then
MonthRequested(Me, New MonthEventArgs, {, Month=item.Month)
End If
End Sub
Public Event MonthRequested As EventHandler(Of MonthEventArgs)
•C#
public partial class CalendarBookTop : UserControl
{
public CalendarBookTop()
{
InitializeComponent();
Loaded += new RoutedEventHandler(CalendarBookTop_Loaded);
}
void CalendarBookTop_Loaded(object sender, RoutedEventArgs e)
{
foreach (var month in MonthData.Months)
{
months.Items.Add(new CalendarItem()
{
Month = month,
Current = !(DataContext == month)
});
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var btn = (Button) sender;
var item = btn.DataContext as CalendarItem;
if (MonthRequested != null)
{
MonthRequested(this, new MonthEventArgs() { Month = item.Month });
}
}
public event EventHandler<MonthEventArgs> MonthRequested;
}
public class MonthEventArgs
: EventArgs
{
public MonthData Month { get; set; }
}
public class CalendarItem
{
public bool Current { get; set; }
public MonthData Month { get; set; }
}
}
7. Double-click on the CalendarBookBottom.xaml file to open it. Replace the markup on the page with the following XAML markup:
<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="CalendarBook.CalendarBookBottom" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CalendarBookResources.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="TitleDayBkgStyle" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF245A76" Offset="0" />
<GradientStop Color="#FF6B91AA" Offset="0.583" />
<GradientStop Color="#FF759AB5" Offset="0.665" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0,0,0,2" />
<Setter Property="BorderBrush" Value="#FF6587A7" />
</Style>
<!-- Month Styles -->
<Style x:Key="TitleDayStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<!--#FF0C2934-->
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Margin" Value="0 30 0 5" />
<Setter Property="FontFamily" Value="Times New Roman" />
</Style>
<Style x:Key="CalendarItemStyle" TargetType="System_Windows_Controls_Primitives:CalendarItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="System_Windows_Controls_Primitives:CalendarItem">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="DisabledBrush" Color="#8CFFFFFF" />
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border>
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="ContentBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="Content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,5,1,9" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentControl.Foreground>
<SolidColorBrush x:Name="ContentBrush" Color="#FF333333" />
</ContentControl.Foreground>
</ContentControl>
</Grid>
</ControlTemplate>
<DataTemplate x:Name="DayTitleTemplate">
<Border Style="{StaticResource TitleDayBkgStyle}" CornerRadius="5,5,0,0">
<TextBlock Text="{Binding}" Style="{StaticResource TitleDayStyle}" />
</Border>
</DataTemplate>
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Opacity" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1" />
<Grid>
<Path Stretch="Fill" Height="10" HorizontalAlignment="Left" Margin="14,-6,0,0" VerticalAlignment="Center" Width="6" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
<Path.Fill>
<SolidColorBrush x:Name="IconBrush" Color="#FF333333" />
</Path.Fill>
</Path>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Opacity" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Grid.Resources>
<!--<Button x:Name="PreviousButton" Height="20" HorizontalAlignment="Left" Width="28" Visibility="Collapsed" Template="{StaticResource PreviousButtonTemplate}"/>
<Button x:Name="HeaderButton" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10.5" FontWeight="Bold" Template="{StaticResource HeaderButtonTemplate}" Grid.Column="1"/>
<Button x:Name="NextButton" Height="20" HorizontalAlignment="Right" Width="28" Visibility="Collapsed" Template="{StaticResource NextButtonTemplate}" Grid.Column="2"/>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Style="{StaticResource TitleDayBkgStyle}" CornerRadius="5,5,0,0" Grid.ColumnSpan="7" />
<Path Fill="#FFD5E3EA" Stretch="Fill" UseLayoutRounding="False" Grid.ColumnSpan="7" Grid.RowSpan="6" Data="M357,155.15535 L427.00003,155.15535 L427.00003,190.99835 L357,190.99835 z M286,155.15535 L355,155.15535 L355,190.99835 L286,190.99835 z M214.00002,155.15535 L284,155.15535 L284,190.99835 L214.00002,190.99835 z M143,155.15535 L212,155.15535 L212,190.99835 L143,190.99835 z M71,155.15535 L141,155.15535 L141,190.99835 L71,190.99835 z M0,155.15535 L69,155.15535 L69,164.99834 L69,182.99834 L69,184.99835 L69,185.99834 L69,190.99835 L64,190.99835 L62,190.99835 L5,190.99835 C2.2385864,190.99835 0,188.75977 0,185.99834 L0,184.99835 L0,182.99834 z M429,155.15535 L498,155.15535 L498,172.9982 L498,185.99834 C498,188.75977 495.76144,190.99835 493,190.99835 L491,190.99835 L480.00003,190.99835 L429,190.99835 L429,183.99858 z M429,123.3285 L498,123.3285 L498,153.16634 L429,153.16634 z M357,123.3285 L427.00003,123.3285 L427.00003,153.16634 L357,153.16634 z M286,123.3285 L355,123.3285 L355,153.16634 L286,153.16634 z M214.00002,123.3285 L284,123.3285 L284,153.16634 L214.00002,153.16634 z M143,123.3285 L212,123.3285 L212,153.16634 L143,153.16634 z M71,123.3285 L141,123.3285 L141,153.16634 L71,153.16634 z M0,123.3285 L69,123.3285 L69,153.16634 L0,153.16634 z M429,92.496246 L498,92.496246 L498,121.33949 L429,121.33949 z M357,92.496246 L427.00003,92.496246 L427.00003,121.33949 L357,121.33949 z M286,92.496246 L355,92.496246 L355,121.33949 L286,121.33949 z M214.00002,92.496246 L284,92.496246 L284,121.33949 L214.00002,121.33949 z M143,92.496246 L212,92.496246 L212,121.33949 L143,121.33949 z M71,92.496246 L141,92.496246 L141,121.33949 L71,121.33949 z M0,92.496246 L69,92.496246 L69,121.33949 L0,121.33949 z M429,61.664253 L498,61.664253 L498,90.507492 L429,90.507492 z M357,61.664253 L427.00003,61.664253 L427.00003,90.507492 L357,90.507492 z M286,61.664253 L355,61.664253 L355,90.507492 L286,90.507492 z M214.00002,61.664253 L284,61.664253 L284,90.507492 L214.00002,90.507492 z M143,61.664253 L212,61.664253 L212,90.507492 L143,90.507492 z M71,61.664253 L141,61.664253 L141,90.507492 L71,90.507492 z M0,61.664253 L69,61.664253 L69,90.507492 L0,90.507492 z M429,30.832001 L498,30.832001 L498,59.675255 L429,59.675255 z M357,30.832001 L427.00003,30.832001 L427.00003,59.675255 L357,59.675255 z M286,30.832001 L355,30.832001 L355,59.675255 L286,59.675255 z M214.00002,30.832001 L284,30.832001 L284,59.675255 L214.00002,59.675255 z M143,30.832001 L212,30.832001 L212,59.675255 L143,59.675255 z M71,30.832001 L141,30.832001 L141,59.675255 L71,59.675255 z M0,30.832001 L69,30.832001 L69,59.675255 L0,59.675255 z M429,0 L498,0 L498,28.843246 L429,28.843246 z M357,0 L427.00003,0 L427.00003,28.843231 L357,28.843231 z M286,0 L355,0 L355,28.843231 L286,28.843231 z M214.00002,0 L284,0 L284,28.843231 L214.00002,28.843231 z M143,0 L212,0 L212,28.843231 L143,28.843231 z M71,0 L141,0 L141,28.843246 L71,28.843246 z M0,0 L69,0 L69,28.843246 L0,28.843246 z" Grid.Row="1" />
</Grid>
<Grid x:Name="MonthView">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="YearView" Margin="6,-3,7,6" Visibility="Collapsed" Grid.ColumnSpan="3" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Grid>
</Border>
<Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" Stretch="Fill" Stroke="{StaticResource DisabledBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="0,2,0,2" Opacity="0" Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MonthCalendarStyle" TargetType="controls:Calendar">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Calendar">
<Grid x:Name="Root">
<System_Windows_Controls_Primitives:CalendarItem x:Name="CalendarItem" Style="{StaticResource CalendarItemStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Border Background="White" CornerRadius="5">
<Grid x:Name="LayoutRoot">
<Grid>
<controls:Calendar x:Name="calendar" DisplayMode="Month" IsTodayHighlighted="True" Style="{StaticResource MonthCalendarStyle}" DisplayDate="{Binding Day}" />
<Path Stretch="Fill" UseLayoutRounding="False" Data="M4.7479415,0 L495.21542,0 C498.09106,0.33296099 499.69119,1.9419931 500,4.842844 L500,61.752743 L493.36795,60.268562 C456.3688,52.313362 416.7272,48.000004 375.5,48.000008 C191.56329,48.000004 39.188137,133.8588 12.234431,245.94026 L11.340348,250 L4.5437288,250 C1.9792502,249.50926 0.470622,247.99745 0,245.4818 L0,4.791791 C0.41878578,1.9642336 1.9324206,0.29401842 4.7479415,0 z" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="0" />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.428,0.832" StartPoint="0.246,-0.03">
<GradientStop Color="#0CFFFFFF" Offset="0.337" />
<GradientStop Color="#4CFFFFFF" Offset="0.435" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
<Grid x:Name="SpiralBottom" Height="25" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="0.56*" />
<RowDefinition Height="0.28*" />
<RowDefinition Height="0.16*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.432*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
</Grid.ColumnDefinitions>
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="1" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="7" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="13" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="19" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="25" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="31" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="37" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="43" Grid.Row="1" Grid.ColumnSpan="5" />
<Border Style="{StaticResource SpiralBottom}" Grid.RowSpan="2" Grid.Column="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="4" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="8" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="10" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="14" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="16" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="20" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="22" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="26" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="28" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="32" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="34" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="38" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="40" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="44" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="46" Grid.RowSpan="2" />
</Grid>
</Grid>
</Border>
</UserControl>
8. Right-click on the page and select View Code from the list. Find the class statement and change Page to UserControl.
9. Open CalendarBookCover.xaml and replace the existing XAML markup with the following:
<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="CalendarBook.CalendarBookCover" mc:Ignorable="d" 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">
<UserControl.Resources>
<Style x:Key="SpiralHole" TargetType="Rectangle">
<Setter Property="Fill" Value="#FF1D2A33" />
<Setter Property="RadiusX" Value="2" />
<Setter Property="RadiusY" Value="2" />
</Style>
<Style x:Key="SpiralTop" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF9D9D9D" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush" Value="#FF434343" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
<Style x:Key="SpiralBottom" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF9D9D9D" Offset="1" />
<GradientStop Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="0,0,2,2" />
<Setter Property="BorderBrush" Value="#FF434343" />
<Setter Property="BorderThickness" Value="1,0,1,1" />
</Style>
<Style x:Key="SpiralTopDark" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484848" Offset="1" />
<GradientStop Color="#FFC5C5C5" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF676767" Offset="0" />
<GradientStop Color="#FF1A1A1A" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
</UserControl.Resources>
<Border x:Name="cover" CornerRadius="6">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF245A76" Offset="0.009" />
<GradientStop Color="#FF6B91AA" Offset="0.583" />
<GradientStop Color="#FF759AB5" Offset="0.665" />
<GradientStop Color="#FFCFD9E0" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="5" CornerRadius="5">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#998FB4CC" Offset="0.63" />
<GradientStop Color="Transparent" />
<GradientStop Color="#664D5153" Offset="0.996" />
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.708*" />
<RowDefinition Height="0.292*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="296" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="0,0,0,-35" Width="296" Grid.Column="1">
<TextBlock Text="20" TextWrapping="Wrap" FontSize="150" FontFamily="Times New Roman" HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF134659" Offset="0.2" />
<GradientStop Color="#FF0C2934" Offset="0.3" />
<GradientStop Color="#FF13455A" Offset="0.404" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="10" TextWrapping="Wrap" FontSize="150" FontFamily="Times New Roman" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="-4,0,0,0">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C9CD" Offset="0.2" />
<GradientStop Color="DarkGray" Offset="0.3" />
<GradientStop Color="#FFFCFCFC" Offset="0.4" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Grid.Row="1" Width="296" Grid.Column="1">
<StackPanel.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="1" />
<GradientStop />
</LinearGradientBrush>
</StackPanel.OpacityMask>
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="0" />
<TranslateTransform />
</TransformGroup>
</StackPanel.RenderTransform>
<Path Stretch="Fill" Height="70.125" Width="141.43" RenderTransformOrigin="0.500000006743084,0.264705882352941" UseLayoutRounding="False" Data="M79.179497,0 L92.868904,0 L92.623459,1.9136314 C91.909348,8.3864136 91.552299,14.790527 91.552299,21.125973 C91.552299,34.797852 93.236862,45.955078 96.605988,54.597656 C99.389175,61.873047 103.53954,65.510742 109.0571,65.510742 C111.6938,65.510742 114.42816,64.32666 117.26019,61.958496 C120.0922,59.590332 122.24063,55.623047 123.70547,50.056641 C125.95155,41.658203 127.07459,29.817383 127.07459,14.534184 C127.07459,10.286133 126.9098,6.3024445 126.58021,2.5831146 L126.30667,0 L139.67915,0 L139.83356,0.68682861 C140.89784,5.8961792 141.42999,11.586182 141.42999,17.756832 C141.42999,29.280273 139.76984,39.070313 136.44954,47.126953 C133.12924,55.183594 128.89343,61.030762 123.74209,64.668457 C118.59074,68.306152 113.62251,70.125 108.83737,70.125 C99.364761,70.125 91.479057,64.53418 85.18026,53.352539 C79.858017,43.928711 77.196899,32.576172 77.196899,19.294922 C77.196899,13.630859 77.624146,8.3604736 78.478638,3.4837608 z M46.943062,0 L58.719505,0 L58.593468,0.61816788 C58.007538,3.1328125 57.128632,5.6474609 55.956764,8.1621094 C52.343506,16.072266 46.484154,24.446289 38.378723,33.28418 C26.220579,46.56543 18.627842,54.573242 15.600511,57.307617 L41.52813,57.307617 C46.801537,57.307617 50.500252,57.112305 52.62426,56.72168 C54.748276,56.331055 56.664772,55.537598 58.373741,54.341309 C60.082726,53.14502 61.571976,51.448242 62.841492,49.250977 L65.551445,49.250977 L58.593468,68.367188 L0,68.367188 L0,65.657227 C17.236248,49.93457 29.36998,37.092773 36.401192,27.131836 C42.992958,17.793457 46.494835,9.2060966 46.90683,1.3697548 z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF134659" Offset="0.2" />
<GradientStop Color="#FF0C2934" Offset="0.3" />
<GradientStop Color="#FF13455A" Offset="0.404" />
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path Stretch="Fill" Height="70.125" Margin="19,0,0,0" Width="125.317" RenderTransformOrigin="0.492986569617602,0.264705882352941" UseLayoutRounding="False" Data="M63.066498,0 L76.755951,0 L76.510506,1.9136314 C75.796394,8.3864136 75.439339,14.790527 75.439339,21.125973 C75.439339,34.797852 77.123909,45.955078 80.493042,54.597656 C83.276245,61.873047 87.426628,65.510742 92.944199,65.510742 C95.58091,65.510742 98.315285,64.32666 101.14731,61.958496 C103.97933,59.590332 106.12777,55.623047 107.59261,50.056641 C109.8387,41.658203 110.96175,29.817383 110.96175,14.534184 C110.96175,10.286133 110.79695,6.3024445 110.46736,2.5831146 L110.19383,0 L123.56635,0 L123.72074,0.68682861 C124.78504,5.8961792 125.31719,11.586182 125.31719,17.756832 C125.31719,29.280273 123.65704,39.070313 120.33673,47.126953 C117.01643,55.183594 112.78059,61.030762 107.62923,64.668457 C102.47787,68.306152 97.509621,70.125 92.724472,70.125 C83.251831,70.125 75.366096,64.53418 69.067284,53.352539 C63.745026,43.928711 61.083893,32.576172 61.083893,19.294922 C61.083893,13.630859 61.511139,8.3604736 62.365631,3.4837608 z M12.744122,0 L24.829065,0 L24.829065,50.862305 C24.829065,56.428711 25.060999,59.895508 25.524868,61.262695 C25.988731,62.629883 26.953085,63.679688 28.417925,64.412109 C29.882769,65.144531 32.861282,65.55957 37.353462,65.657227 L37.353462,68.367188 L0,68.367188 L0,65.657227 C4.6874952,65.55957 7.7148342,65.156738 9.0820198,64.44873 C10.449205,63.740723 11.401352,62.788574 11.938459,61.592285 C12.475569,60.395996 12.744123,56.819336 12.744122,50.862305 z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC4C9CD" Offset="0.2" />
<GradientStop Color="DarkGray" Offset="0.3" />
<GradientStop Color="#FFFCFCFC" Offset="0.4" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</StackPanel>
<Path Stretch="Fill" UseLayoutRounding="False" Data="M0,0 L500,0 L500,61.752743 L493.36795,60.268562 C456.3688,52.313362 416.7272,48.000004 375.5,48.000008 C191.56329,48.000004 39.188137,133.8588 12.234431,245.94026 L11.340348,250 L0,250 z" Margin="-4,-4,-4,0" Grid.RowSpan="2" Grid.ColumnSpan="3">
<Path.Fill>
<LinearGradientBrush EndPoint="0.428,0.832" StartPoint="0.246,-0.03">
<GradientStop Color="#0CFFFFFF" Offset="0" />
<GradientStop Color="#4CFFFFFF" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
<TextBlock Text="calendar" TextWrapping="Wrap" Foreground="#FF124256" Margin="0,0,8,8" FontSize="24" Grid.Row="1" VerticalAlignment="Bottom" d:LayoutOverrides="Width" Grid.ColumnSpan="3" HorizontalAlignment="Right">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" Color="White" />
</TextBlock.Effect>
</TextBlock>
<Grid x:Name="SpiralBottom" Height="25" VerticalAlignment="Top" Margin="-5,-5,-5,0" Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="0.56*" />
<RowDefinition Height="0.28*" />
<RowDefinition Height="0.16*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.432*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
</Grid.ColumnDefinitions>
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="1" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="7" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="13" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.ColumnSpan="5" Grid.RowSpan="2" Grid.Column="19" Grid.Row="1" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="25" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="31" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="37" Grid.Row="1" Grid.ColumnSpan="5" />
<Rectangle Style="{StaticResource SpiralHole}" Grid.RowSpan="2" Grid.Column="43" Grid.Row="1" Grid.ColumnSpan="5" />
<Border Style="{StaticResource SpiralBottom}" Grid.RowSpan="2" Grid.Column="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="4" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="8" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="10" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="14" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="16" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="20" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="22" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="26" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="28" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="32" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="34" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="38" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="40" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="44" Grid.RowSpan="2" />
<Border Style="{StaticResource SpiralBottom}" Grid.Column="46" Grid.RowSpan="2" />
</Grid>
</Grid>
</Border>
</Border>
</UserControl>
10. Right-click on the page and select View Code from the list. Find the class statement and change Page to UserControl.
11. Open CalendarTopSpiral.xaml and replace the XAML markup on the page with the following:
<?xml version="1.0" encoding="utf-8"?>
<UserControl mc:Ignorable="d" x:Class="CalendarBook.CalendarTopSpiral" d:DesignWidth="500" d:DesignHeight="25" 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">
<UserControl.Resources>
<Style x:Key="SpiralTopDark" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484848" Offset="1" />
<GradientStop Color="#FFC5C5C5" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="2,2,0,0" />
<Setter Property="BorderBrush" Value="#FF1A1A1A" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid x:Name="Spiral" Height="30" MaxWidth="500" MinWidth="310">
<Grid.RowDefinitions>
<RowDefinition Height="0.16*" />
<RowDefinition Height="0.28*" />
<RowDefinition Height="0.56*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.432*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.044*" />
<ColumnDefinition Width="0.006*" />
<ColumnDefinition Width="0.01*" />
<ColumnDefinition Width="0.002*" />
<ColumnDefinition Width="0.008*" />
<ColumnDefinition Width="0.004*" />
<ColumnDefinition Width="0.042*" />
</Grid.ColumnDefinitions>
<Border Style="{StaticResource SpiralTopDark}" Grid.RowSpan="2" Grid.Column="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="8" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="10" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="14" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="16" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="20" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="22" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="26" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="28" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="32" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="34" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="38" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="40" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="44" Grid.RowSpan="2" Grid.Row="1" />
<Border Style="{StaticResource SpiralTopDark}" Grid.Column="46" Grid.RowSpan="2" Grid.Row="1" />
</Grid>
</Grid>
</UserControl>
12. Right-click on the page and select View Code from the list. Find the class statement and change Page to UserControl.
In this part you created a C1Book control and the calendar that the control will display. In the next part, you will run the application.