Xamarin.Formsで下のレイヤーのコントロールを操作できるようにする
どういうことかというと,画面の表面に透明なレイヤーを設けて,そこにメッセージを重ねるといった表現をしたい場合,上(表)のレイヤーがユーザーの操作を拾うため,下のレイヤーのコントロールを操作できません.
例えば以下のようにテキストボックスやボタンを配置したレイヤー(例えばGridなど)の上に,画像やテキストを重ねて表示させるためのレイヤーを配置した場合,上のレイヤーを透明にして下のレイヤーが見えるようにしても,下のレイヤーのボタンを押したりテキストボックスに入力したりすることができません.
このとき,ユーザーの操作が上のレイヤーを透過するようにする設定が,コントロールには設けられています.
それが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>
今回のコードはこちら.