XAMLの美学:価値のコンバーター

この記事では XAML-codeを作成するときに使用する一般的なアプローチを紹介します

>>英語で読む

IValueConverter Data Binding XAML WPF UWP Xamarin Forms UI SwitchConverter KeyToValueConverter InlineConverter AggregateConverter ResourceDictionary

 データバインディングエンジンとともに、に基づくユーザーインターフェイスの開発における重要なコンポーネント XAMLです。値コンバーターは、インターフェースを実装する別のクラスにロジックが存在することを意味します IValueConverter通常、クラス名は機能の目的を反映し、インスタンスはマークアップで宣言されます。

スイッチコンバーターとキーから値へのコンバーター

実際には、多くのコンバータは些細な論理と構造が類似した値持っている  (?:) かのデザインを if-else、  switch-case-defaultただし、一般化されたテンプレートが KeyToValueConverter あり SwitchConverter、マークアップで直接ブール値とブランチを宣言することで、構造内の同じタイプのクラスをプロジェクトに追加することを回避できます。

概念

<KeyToValueConverter
	Key="KeyForMatching"
	Value="ValueIfKeyMatched"
	ByDefault="ValueIfKeyNotMatched" />

<SwitchConverter
	ByDefault="ValueZ">
	<Case
		Key="KeyA"
		Value="ValueA" />
	<Case
		Key="KeyB"
		Value="ValueB" />
	<Case
		Key="KeyC"
		Value="ValueC" />
</SwitchConverter>

応用

<KeyToValueConverter
	x:Key="TrueToVisibleConverter"
	Key="True"
	Value="Visible"
	ByDefault="Collapsed" />
	
<ProgressBar
	Visibility="{Binding IsBusy, Converter={StaticResource TrueToVisibleConverter}}" />
<SwitchConverter
	x:Key="CodeToBackgroundConverter"
	ByDefault="White">
	<Case
		Key="R"
		Value="Red" />
	<Case
		Key="G"
		Value="Green" />
	<Case
		Key="B"
		Value="Blue" />
</SwitchConverter>
	
<Control
	Background="{Binding Code, Converter={StaticResource CodeToBackgroundConverter}}" />

KeyToValueConverter -  Key, ,  Value,  ByDefault.

SwitchConverter -  Case   Key,  Case ,  ¨C31C, ¨C90C¨C32C, .

 Value  ByDefault  , , .

 KeyToValueConverter   ConverterParameter   KeySource

<KeyToValueConverter
	x:Key="EqualsToHiddenConverter"
	KeySource="ConverterParameter"
	Value="Collapsed"
	ByDefault="Visible" />
	
<Control
	Visiblity="{Binding Items.Count, ConverterParameter=0, Converter={StaticResource EqualsToHiddenConverter}}" />

<TextBlock
	Visiblity="{Binding Text, ConverterParameter='Hide Me', Converter={StaticResource EqualsToHiddenConverter}}" />

 KeySource  :

Manual (by default) -  Key  ,

ConverterParameter -  ConverterParameter  ,

PreferManual -  manual Key  ,  ConverterParameter

PreferConverterParameter -  ConverterParameter  , manual Key

,  SwitchConverter   Case   TypedCase,

<SwitchConverter
	ByDefault="Undefined value">
	<TypedCase
		Key="system:String"
		Value="String value" />
	<Case
		Key="0"
		Value="Zero" />
	<Case
		Key="1"
		Value="One" />
	<TypedCase
		Key="system:Int32"
		Value="Int32 value" />
</SwitchConverter>

.  SwitchConverter   DiagnosticKey, ,  Trace 

var diagnosticMessage = matchedCase.Is()
	? $"{DiagnosticKey}: '{matchedValue}' matched by key '{matchedCase.Key}' for '{value}' and converted to '{convertedValue}'"
	: $"{DiagnosticKey}: The default value '{matchedValue}' matched for '{value}' and converted to '{convertedValue}'";

Trace.WriteLine(diagnosticMessage);
<SwitchConverter
	DiagnosticKey="UniqDiagnosticKey"
	x:Key="CodeToBackgroundConverter"
	ByDefault="White">
	...
</SwitchConverter>

Dependency Value Converter

Key, Value ByDefault (Dependency Properties), Cases DependencyObject. , , Binding,

<KeyToValueConverter
	Key="AnyKey"
	Value="{Binding MatchedValue, Source={StaticResource AnyResource}}"
	ByDefault="{Binding DefaultValue, Source={StaticResource AnyResource}}" />
		
<KeyToValueConverter
	Key="AnyKey"
	Value="{Localizing MatchedTitle}"
	ByDefault="{Localizing DefaultTitle}" />

Inline Converter

, IValueConverter, code-behind .

, .

, code-behind Converting ConvertingBack

<Grid>
	<Grid.Resources>
		<InlineConverter
			x:Key="ComplexInlineConverter"
			Converting="InlineConverter_OnConverting"
			ConvertingBack="InlineConverter_OnConverting" />
	</Grid.Resources>
	
	<TextBlock
		Text="{Binding Number, Converter={StaticResource InlineConverter}}"/>
</Grid>
private void InlineConverter_OnConverting(object sender, ConverterEventArgs e)
{
	// e.Value - access to input value
	// this.DataContext - access to Data Context or another properties of the view
	// access to child visual elements of this root view
	e.ConvertedValue = // set output value
		$"DataContext: {DataContext}, Converter Value: {e.Value}";
}

private void InlineConverter_OnConvertingBack(object sender, ConverterEventArgs e)
{
	// ...
}

Aggregate Converter

, .

<AggregateConverter>
	<StepAConverter />
	<StepBConverter />
	<StepCConverter />
</AggregateConverter>

App.xaml

汎用値コンバーターを別のリソースディクショナリに配置し、それらをApp.xamlファイルのグローバルリソースとしてマージすると便利です。これにより、値コンバーターを再宣言せずに、さまざまな表現で再利用できます。

<Application
	xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="Any.App">
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary
						Source="AppConverters.xaml" />
				...
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>
</Application>

エースフレームワーク

提示されたコンバーターの実装例は、Ace Framework gitlab ビットバケットライブラリにあります。

あなたの注意と関心に感謝します!




All Articles