Calendar for UWP
手順1：C1Calendar コントロールを含むアプリケーションの作成
クイックスタート > 手順1：C1Calendar コントロールを含むアプリケーションの作成
全て展開
すべて折りたたむ

この手順では、Visual Studio で、Calendar for UWP を使用して UWP アプリケーションを作成します。

次の手順に従います。

  1. Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
  2. ［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。
  3. MainPage.xaml で、次の <Page.Resources> マークアップを <Page> タグと <Grid> タグの間に追加して、コントロールをカスタマイズします。

    XAML でマークアップの書き方

    XAML マークアップ
    コードのコピー 
    <Page.Resources>
    <!-- カレンダー日のカスタムDataTemplatesを返します。-->
    <local:DaySlotTemplateSelector x:Key="DaySlotTemplateSelector">
        <Calendar:DaySlotTemplateSelector.Resources>
            <ResourceDictionary>
                <DataTemplate x:Key="BoldedDay">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!-- DaySlot.Tag プロパティに保存した予定情報を表示します。 -->
                        <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>
  4. ツールボックスに移動し、C1Calendar アイコンをダブルクリックして、コントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。XAML マークアップは次のようになります。
    XAML マークアップ
    コードのコピー 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Calendar:C1Calendar/>
</Grid>
  5. 次のマークアップを <Calendar:C1Calendar> タグに追加して、コントロールをカスタマイズします。
    XAML マークアップ
    コードのコピー 
    <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>

    これは、コントロールに名前を付け、カレンダーの書式設定と外観をカスタマイズします。後の手順で、参照されるイベントハンドラのコードを追加します。

  6. 次のマークアップを Calendar の上の <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> タグと <Calendar:C1Calendar> タグの間に追加します。

    XAML でマークアップの書き方

    XAML マークアップ
    コードのコピー 
    <!--アプリのオリエンテーション状態-->

            <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>
  7. 次のマークアップを Calendar の下の <Calendar:C1Calendar> タグと </Grid> タグの間に追加します。

    XAML でマークアップの書き方

    XAML マークアップ
    コードのコピー 
    <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>
ここまでの成果

これで、C1Calendar コントロールを含む UWP スタイルのアプリケーションを作成できました。次の「手順2：Calendar へのデータの追加」では、C1Calendar にデータを追加します。

関連トピック
手順2：Calendar へのデータの追加

 

 

Copyright © MESCIUS, Inc. All rights reserved.