ComponentOne Calendar for UWP
Step 1 of 3: Creating an Application with C1Calendar Control
Calendar for UWP Quick Start > Step 1 of 3: Creating an Application with C1Calendar Control

In this step, you'll create a UWP application in Visual Studio using Calendar for UWP.

Complete the following steps:

  1. In Visual Studio 2012 Select File | New | Project.
  2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.
  3. In MainPage.xaml, add the following <Page.Resources> markup between the <Page>and <Grid> tags to customize the control:

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>
  1. Navigate to the Toolbox and double-click the C1Calendar icon to add the control to the grid. This will add the reference and XAML namespace automatically. The XAML markup resembles the following:
Markup
Copy Code 
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Calendar:C1Calendar/>
</Grid>
  1. Add the markup in <Calendar:C1Calendar> tag to customize the control:
    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.

  1. Add the following markup above the Calendar and between the <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> and <Calendar:C1Calendar> tags:

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>
  1. Add the following markup below the Calendar and between the <Calendar:C1Calendar> and </Grid> tags:

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.

See Also
Step 2 of 3: Adding Data to the Calendar

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page