Xamarin.FormsのEntryを継承してフォーカスを獲得したら背景色が変わるカスタムコントロールをxamlの記述だけて実現

概要

Xamarin.FormsのEntryクラスを継承してカスタムコントロールを作成します。カスタムコントロールはxamlとコードビハインドの構成で作成する。
Entryが画面上でフォーカスを取得したときに、背景色が青色になるようする。通常時は白色とする。

環境

環境についてはこちらのページを参照してください。

コントロールの追加方法

共通プロジェクトのControlsフォルダーを右クリックして「追加」「新しい項目...」をクリックして表示されるダイアログでコンテンツビューを選択して名前に「MyEntry.xaml」を入力して「追加」をクリックする。

Controlsフォルダーに「MyEntry.xaml」ファイルとコードビハインドに「MyEntry.xaml.cs」ファイルが作成される。
まずは、MyEntry.xamlを次のように修正する。

MyEntry.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Entry xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="CustomeControlTest.Controls.MyEntry">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="NormalState">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="White" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Focused">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor"
                                        Value="Blue" />
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>

ポイントは、ルート要素をContentViewに変更。
VisualStateGroups要素内にステータス毎のスタイルを定義。
この場合は、VisualState=NormarlとVisualState=Focusedの2個のVIsualStateGroupを設定する。

コードビハインドの修正

コードビハインドには手を入れないのだが、継承元の親クラスをContentViewからEntryに変更する。
変更後のコードは下記の通り。

MyEntry.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace CustomeControlTest.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MyEntry : Entry
    {
        public MyEntry()
        {
            InitializeComponent();
        }

    }
}

利用例

MainPage.xamlで下記のようにMyEntryを利用する。

MainPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<controls:TemplatePage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CustomeControlTest.Controls"
             x:Class="CustomeControlTest.MainPage"
             Title="Access template element demo"
             NavigationPage.HasNavigationBar="False"
             HeaderText="Main"
             FooterText="My Footer"
             ControlTemplate="{StaticResource MyTemplate}"
             >

    <StackLayout Margin="20, 20, 20, 20" Padding="5,5,5,5"  BackgroundColor="LightBlue">
        <StackLayout Orientation="Horizontal">
            <controls:MyLabelControl Text="入力1" />
            <Entry Text="" WidthRequest="200" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <controls:MyLabelControl Text="入力2" />
            <Entry Text="" WidthRequest="200" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <controls:MyLabelControl Text="入力3" BackgroundColor="Red"/>
            <controls:MyEntry WidthRequest="200" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <controls:MyLabelControl Text="入力4" />
            <controls:MyEntry WidthRequest="200" />
        </StackLayout>

    </StackLayout>

</controls:TemplatePage>

今回はテンプレートページを使っている(TemplatePage)が、その部分は今回の処理には不要だ。
「controls:MyEntry」要素を並べるだけで完了する。
なお、「controls」を名前空間としてルート要素に定義が必要なので忘れずに追加しておく必要がある。

処理結果

入力３から入力４にEntryをタブ移動して入力４のEntryがフォーカスを取得すると背景色がVisualState=Focusedで定義した青色に変わる。