ナレッジベース

Xuni

Xamarin.Formsで画面レイアウトを定義する場合Xamarin.Fomrs用に定義されたXAMLを利用します。
XAMLには表示するコントロールを配置するためのレイアウト構文が用意されています。
StackLayoutやGridなどです。

この構文を利用して、カレンダーの日付部分（日付スロット）の中もLabelやImageを利用した独自レイアウトを構築できます。下図はその例です。標準では日付のみを表示する日付領域のレイアウトをカスタマイズし、上段中央に日付、下段に色付のBoxViewを表示しています。



この画面のXAMLは以下です。
サンプルコード
XAML（Xamarin.Forms）

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

    <!--  ページのレイアウト  -->
    <StackLayout BackgroundColor="#00B8A9"
                 Orientation="Vertical"
                 Padding="10,10,10,10">
        <!--  ページのレイアウトの上段に説明文書、下段にカレンダーを表示  -->
        <Label HorizontalTextAlignment="Center" Text="この背景色の領域がXAML上の最上位のStackLayout" />
        <Label HorizontalTextAlignment="Center" Text="日付領域は背景色の違いがレイアウト構文の違い" />
        <!--  カレンダーの定義  -->
        <xuni:XuniCalendar x:Name="calendar"
                           VerticalOptions="FillAndExpand"
                           BackgroundColor="#F8F3D4"
                           Padding="10">
            <!--  日付領域のカスタムレイアウト  -->
            <xuni:XuniCalendar.DaySlotTemplate>
                <DataTemplate>
                    <xuni:CalendarViewDaySlot>
                        <xuni:CalendarViewDaySlot.View>
                            <Grid HorizontalOptions="FillAndExpand"
                                  VerticalOptions="FillAndExpand"
                                  BackgroundColor="#F6416C"
                                  InputTransparent="true"
                                  Padding="5">
                                <!--  上段：日付を表示するLabel  下段：色を表示するBoxView  -->
                                <StackLayout VerticalOptions="StartAndExpand"
                                             BackgroundColor="#FFDE7D"
                                             InputTransparent="true"
                                             Orientation="Vertical"
                                             Padding="5"
                                             Spacing="0">
                                    <Label HorizontalOptions="FillAndExpand"
                                           VerticalOptions="StartAndExpand"
                                           HorizontalTextAlignment="Center"
                                           Text="{Binding Day}"
                                           VerticalTextAlignment="Start" />
                                    <!--  Red、Green、Blueのうちいずれかを表示  -->
                                    <StackLayout HorizontalOptions="CenterAndExpand"
                                                 VerticalOptions="End"
                                                 Orientation="Horizontal"
                                                 Spacing="0">
                                        <BoxView WidthRequest="20"
                                                 HeightRequest="20"
                                                 BackgroundColor="Red"
                                                 IsVisible="{Binding RedDotVisible}" />
                                        <BoxView WidthRequest="20"
                                                 HeightRequest="20"
                                                 BackgroundColor="Green"
                                                 IsVisible="{Binding GreenDotVisible}" />
                                        <BoxView WidthRequest="20"
                                                 HeightRequest="20"
                                                 BackgroundColor="Blue"
                                                 IsVisible="{Binding BlueDotVisible}" />
                                    </StackLayout>
                                </StackLayout>
                            </Grid>
                        </xuni:CalendarViewDaySlot.View>
                    </xuni:CalendarViewDaySlot>
                </DataTemplate>
            </xuni:XuniCalendar.DaySlotTemplate>
            <!--  日付領域のカスタムレイアウト ここまで  -->
        </xuni:XuniCalendar>
    </StackLayout>
</ContentPage>

このように、レイアウト構文が階層化された構造になるとAndroidのレイアウトシステムは、
画面をタップした動作を上位のビジュアル要素であるGridで取得してしまいます。

そうするとCalendar側がタップを認識できないため、日付選択が変更されてもそのイベントを処理することができません。
プラットフォームが異なるのでiOSアプリはそのままでも正しく処理されます。

この場合、Xamarin.Formsが提供する`InputTransparent`プロパティを設定することで、
レイアウトが透過状態になります。規定値はfalseです。
この透過状態が有効になると下位のコントロールがタップを認識してイベント処理を実行します。

Xamarin.com ＞ Xamarin.Forms.VisualElement.InputTransparent Property

これはVisibleやEnabledプロパティとは異なりますので、ビジュアル要素として有効な状態は変わりません。
設定した背景色もそのまま表示されます。iOSアプリに影響も与えることなく正しく動作します。

サンプルコード
XAML（Xamarin.Forms）

<StackLayout 
   BackgroundColor="#FFDE7D"
   VerticalOptions="FillAndExpand"
   Orientation="Vertical"
   
   InputTransparent="true"
   
   Padding="5"
   Spacing="0">
   :
   :
</StackLayout>

Xuni　＞ 技術情報　＞ ドキュメント ＞ Calendar－機能－日付コンテンツのカスタマイズ：