サイトアイコン braveam

データバインディング方法一覧

データバインディングの基本ルール

XAML

BindingContextでバインド

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SliderTest" x:Class="SliderTest.MainPage">
	<StackLayout>
		<Slider x:Name="uiSlider"
				Maximum="360"
				VerticalOptions="CenterAndExpand"/>
		<Label x:Name="uiLabel"
			Text="Welcome to Xamarin.Forms!"
			   HorizontalOptions="Center"
			   VerticalOptions="CenterAndExpand"
			   BindingContext="{x:Reference Name=uiSlider}"
			   Rotation="{Binding Path=Value}" />
	</StackLayout>
</ContentPage>

x:Referenceは他の場所で宣言されているインスタンスを参照します。

Sourceでバインド

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SliderTest" x:Class="SliderTest.MainPage">
	<StackLayout>
		<Slider x:Name="uiSlider"
				Maximum="360"
				VerticalOptions="CenterAndExpand"/>
		<Label x:Name="uiLabel"
			Text="Welcome to Xamarin.Forms!"
			   HorizontalOptions="Center"
			   VerticalOptions="CenterAndExpand"
			   Rotation="{Binding Path=Value,Source={x:Reference uiSlider}}" />
	</StackLayout>
</ContentPage>

 

オブジェクト要素指定

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SliderTest" x:Class="SliderTest.MainPage">
	<StackLayout>
		<Slider x:Name="uiSlider"
				Maximum="360"
				VerticalOptions="CenterAndExpand"/>
		<Label x:Name="uiLabel"
			Text="Welcome to Xamarin.Forms!"
			HorizontalOptions="Center"
			VerticalOptions="CenterAndExpand">
			<Label.Rotation>
				<Binding Path="Value">
					<Binding.Source>
						<x:Reference Name="uiSlider" />
					</Binding.Source>
				</Binding>
			</Label.Rotation>
		</Label>
	</StackLayout>
</ContentPage>

 

マークアップ拡張

x:Reference

他の場所で宣言されているインスタンスを参照する。

x:Static

以下を参照する。

StaticResource

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SliderTest" x:Class="SliderTest.MainPage">
	<ContentPage.Resources>
           <ResourceDictionary>
		<x:Double x:Key="rot_value">100</x:Double> 
           <ResourceDictionary>
	</ContentPage.Resources>
	<StackLayout>
		<Label x:Name="uiLabel"
			Text="Welcome to Xamarin.Forms!"
			   HorizontalOptions="Center"
			   VerticalOptions="CenterAndExpand"
			   Rotation="{StaticResource rot_value}" />
	</StackLayout>
</ContentPage>

BindingContextの継承を利用したバインディング

親要素(StaticLayout)のBindingContextにuiSliderを設定することで、子要素(LabelとBoxView)にuiSliderのValueを適用しています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:SliderTest"
			 x:Class="SliderTest.MainPage">
	<StackLayout>
		<Slider x:Name="uiSlider" Maximum="360" />
		<StackLayout BindingContext="{x:Reference uiSlider}">
			<Label x:Name="uiLabel"
				   Text="Welcome to Xamarin.Forms!"
				   HorizontalOptions="Center" VerticalOptions="EndAndExpand"
				   Rotation="{Binding Value}" />
			<BoxView Color="#800000FF"
					 WidthRequest="180"
					 HeightRequest="40"
					 HorizontalOptions="Center"
					 VerticalOptions="StartAndExpand"
					 Rotation="{Binding Value}" />
		</StackLayout>
	</StackLayout>
</ContentPage>

 

モバイルバージョンを終了