Help us understand the problem. What is going on with this article?

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」を名前空間としてルート要素に定義が必要なので忘れずに追加しておく必要がある。

処理結果

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

sukkyxp
アラフィフ現役プログラマー。 仕事ではJavaとC#を主に使用。 現在は会社に所属。(以前は個人で受託開発) 趣味:プログラム、読書、中国語読書 現在読んでいる本は「穆斯林的葬礼」 一時期は金庸の武侠もの小説に嵌まっていました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした