カレンダーの日付領域に画像を表示する方法（Xamarin.Forms）

文書番号 : 81928 文書種別 : 使用方法登録日 : 2016/12/22 最終更新日 : 2016/12/27

対象製品

Xuni

詳細

Xuni Calendarの日付を表示する領域をDaySlotと呼びます。
DaySlotにはいくつか種類があり、その中のひとつであるCalendarImageDaySlotクラスを利用すると、画像を含む日付領域を作成できます。

Calendarが日付領域を作成する際のイベントであるDaySlotLoadingで、CalendarImageDaySlotクラスをインスタンス化したDaySlotオブジェクトに対して画像を設定すれば、日付領域に画像が設定できます。
日付や曜日で判断し、それぞれに対応した画像を設定することも可能です。

サンプルコード
画面表示用のXAMLはシンプルにXuni Calendarを表示するだけです。
XAML（Xamarin.Forms）

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:xuni="clr-namespace:Xuni.Forms.Calendar;assembly=Xuni.Forms.Calendar" 
        x:Class="Xuni_QuickStart.Calendar_Image">

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" Android="0" WinPhone="0" />
    </ContentPage.Padding>

    <ContentPage.Content>
        <Grid>
            <xuni:XuniCalendar x:Name="calendar" VerticalOptions="FillAndExpand">
            </xuni:XuniCalendar>
        </Grid>
    </ContentPage.Content>
</ContentPage>

必要な処理はコードビハインドに記述します。
C#（Xamarin.Forms）

public partial class Calendar_Image : ContentPage
{
    public Calendar_Image()
    {
        InitializeComponent();

        // カレンダーの開始曜日を月曜日に設定
        calendar.FirstDayOfWeek = DayOfWeek.Monday;
        // 日付領域を作成するイベント
        calendar.DaySlotLoading += (object sender, Xuni.Forms.Calendar.CalendarDaySlotLoadingEventArgs e) =>
        {
            // カレンダーの隣接日付(当月以外の前後月の日付)かどうかを判断して処理
            if (!e.IsAdjacentDay)
            {
                // イベント引数で渡された日付領域（Slot）を規定の日付領域として退避
                var defaultslot = e.DaySlot as CalendarDaySlot;
                // イベント引数で渡された日付領域（Slot）から、画像を表示する形式のCalendarImageDaySlotクラスを作成
                CalendarImageDaySlot imageSlot = new CalendarImageDaySlot(e.Date);
                imageSlot.ImageAspect = Aspect.AspectFit;

                // 曜日で処理を振り分け
                switch (e.Date.DayOfWeek)
                {
                    case DayOfWeek.Monday:     // 月曜日
                        // リソースからゴミ箱画像を読み込む
                        imageSlot.ImageSource = ImageSource.FromResource("Xuni_QuickStart.Images.trashcan.png");
                        // 作成した日付領域を設定
                        e.DaySlot = imageSlot;
                        break;
                    case DayOfWeek.Thursday:     // 木曜日
                        // リソースからゴミ箱画像を読み込む
                        imageSlot.ImageSource = ImageSource.FromResource("Xuni_QuickStart.Images.trashcan.png");
                        // 作成した日付領域を設定
                        e.DaySlot = imageSlot;
                        break;
                    case DayOfWeek.Sunday:     // 日曜日
                        // リソースからロゴ画像を読み込む
                        imageSlot.ImageSource = ImageSource.FromResource("Xuni_QuickStart.Images.xuni_icon.png");
                        // 作成した日付領域を設定
                        e.DaySlot = imageSlot;
                        break;
                    default:
                        // 対象以外の曜日は既定の日付領域を設定
                        e.DaySlot = defaultslot;
                        break;
                }
            }
            else
            {
                    // 隣接日は既定の日付領域を設定
                    e.DaySlot = new CalendarDaySlot(e.Date);
            }
        };
    }
}

日付領域のカスタマイズは製品ヘルプにも解説があります。　
Xuni　＞技術情報　＞ドキュメント　＞日付コンテンツのカスタマイズ

カレンダーの日付領域に画像を表示する方法（Xamarin.Forms）

対象製品

詳細

関連情報