In this step, you'll create a UWP application in Visual Studio using Calendar for UWP.
Complete the following steps:
To write the markup in XAML:
Markup Copy Code <Page.Resources> <!-- return custom DataTemplates for calendar days --> <local:DaySlotTemplateSelector x:Key="DaySlotTemplateSelector"> <Calendar:DaySlotTemplateSelector.Resources> <ResourceDictionary> <DataTemplate x:Key="BoldedDay"> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- show appointments information saved in the DaySlot.Tag property --> <Border Background="LightGreen" Grid.Row="0" VerticalAlignment="Top" > <TextBlock Text="{Binding Tag}" Margin="5" TextWrapping="Wrap" Foreground="Black" /> </Border> <TextBlock Text="{Binding}" Grid.Row="1" Foreground="OrangeRed" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontWeight="SemiBold" Margin="6,0,0,4"/> </Grid> </DataTemplate> <DataTemplate x:Key="UnboldedDay"> <TextBlock Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="6,22,0,4"/> </DataTemplate> </ResourceDictionary> </Calendar:DaySlotTemplateSelector.Resources> </local:DaySlotTemplateSelector> <local:SmallDaySlotTemplateSelector x:Key="SmallDaySlotTemplateSelector"> <Calendar:DaySlotTemplateSelector.Resources> <ResourceDictionary> <DataTemplate x:Key="BoldedDay"> <TextBlock Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontWeight="ExtraBlack" Margin="10,8,5,8"/> </DataTemplate> <DataTemplate x:Key="UnboldedDay"> <TextBlock Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="6,12,5,4"/> </DataTemplate> </ResourceDictionary> </Calendar:DaySlotTemplateSelector.Resources> </local:SmallDaySlotTemplateSelector> </Page.Resources>
Markup Copy Code<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Calendar:C1Calendar/> </Grid>
Markup |
Copy Code
|
---|---|
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Calendar:C1Calendar x:Name="Calendar" Margin="20" Grid.Row="0" SelectedDateChanged="Calendar_SelectedDateChanged" DayOfWeekFormat="dddd" MaxSelectionCount="21" ShowWeekNumbers="true" WeekendBrush="Red"/> </Grid> |
This gives the control a name and customizes the formatting and appearance of the calendar. Note that you'll add code for the referenced event handler in a later step.
To write the markup in XAML:
Markup Copy Code <!--App Orientation States--> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OrientationStates"> <VisualState x:Name="Full"/> <VisualState x:Name="Fill"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Thickness>15</Thickness> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(C1Calendar.DayOfWeekFormat)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0" Value="ddd"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Portrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Thickness>15</Thickness> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(C1Calendar.DayOfWeekFormat)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0" Value="ddd"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(C1Calendar.ShowWeekNumbers)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0" Value="false"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="SelectedDayInfo"> <DiscreteObjectKeyFrame KeyTime="0" > <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Thickness>5</Thickness> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(C1Calendar.ShowWeekNumbers)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0" Value="false"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(C1Calendar.DayOfWeekFormat)" Storyboard.TargetName="Calendar"> <DiscreteObjectKeyFrame KeyTime="0" Value="d"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="SelectedDayInfo"> <DiscreteObjectKeyFrame KeyTime="0" > <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>
To write the markup in XAML:
Markup Copy Code <Grid x:Name="SelectedDayInfo" Grid.Row="1" Height="120" Visibility="Collapsed" > <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Margin="10" Grid.Row="0"> <TextBlock Text="SelectedDate: "/> <TextBlock Text="{Binding SelectedDate, ElementName=Calendar}"/> </StackPanel> <TextBlock x:Name="dayInfo" Margin="10" Grid.Row="1" Foreground="Red"/> </Grid>
What You've Accomplished
You've successfully created a UWP style application containing a C1Calendar control. In the next step, Step 2 of 3: Adding Data to the Calendar, you will add the data for C1Calendar.