shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsで下のレイヤーのコントロールを操作できるようにする

どういうことかというと,画面の表面に透明なレイヤーを設けて,そこにメッセージを重ねるといった表現をしたい場合,上(表)のレイヤーがユーザーの操作を拾うため,下のレイヤーのコントロールを操作できません.

例えば以下のようにテキストボックスやボタンを配置したレイヤー(例えばGridなど)の上に,画像やテキストを重ねて表示させるためのレイヤーを配置した場合,上のレイヤーを透明にして下のレイヤーが見えるようにしても,下のレイヤーのボタンを押したりテキストボックスに入力したりすることができません.

f:id:shuhelohelo:20200321000052p:plain

このとき,ユーザーの操作が上のレイヤーを透過するようにする設定が,コントロールには設けられています.

それがInputTransparentです.

以下のように上のレイヤーとなるGridコントロールInputTransparent="True"を設定すると,ユーザーの操作は上のGridを透過して下のボタンやテキストボックスに届くようになります.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFInputTransparent.MainPage"
    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">

    <Grid>
        <StackLayout>
            <!--  Place new controls here  -->
            <Label
                HorizontalOptions="Center"
                Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" />
            <Entry Placeholder="入力できる" VerticalOptions="CenterAndExpand" />
            <Button Text="押せる" VerticalOptions="CenterAndExpand" />
        </StackLayout>
        <Grid
            BackgroundColor="Pink"
            InputTransparent="True"
            Opacity="0.5">
            <Label Text="これはオーバーレイしたGridに表示させているメッセージです" />
        </Grid>
    </Grid>
    
</ContentPage>

今回のコードはこちら.

github.com