{"id":413442,"date":"2024-06-29T23:07:39","date_gmt":"2024-06-29T23:07:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=413442"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=413442","title":{"rendered":"XAML Aesthetics: Value Converters<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

This article presents generalized approaches for using value converters<\/code> into writing of XAML<\/code> code.<\/p>\n

>> Read in Russian<\/a><\/p>\n

<\/figcaption><\/figure>\n
\n

IValueConverter<\/code> Data Binding<\/code> XAML<\/code> WPF<\/code> UWP<\/code> Xamarin Forms<\/code> UI<\/code> SwitchConverter<\/code> KeyToValueConverter<\/code> InlineConverter<\/code> AggregateConverter<\/code> ResourceDictionary<\/code><\/p>\n<\/blockquote>\n

Value converters<\/code> together with a data binding mechanism are essential components into XAML-based development of user interfaces. Value converters imply the presence of logic placed in a separated class that implements the IValueConverter<\/code> interface. Typically, the class name reflects the functional purpose, and the instances are declared in the markup.<\/p>\n

Switch Converter & Key To Value Converter<\/strong><\/p>\n

At practice many value converters have trivial logic similar by structure with ternary operator (? :)<\/code> or if-else<\/code>, switch-case-default<\/code> constructions. However, there are generalized patterns KeyToValueConverter<\/code> and SwitchConverter<\/code>, which allow to avoid adding to the project of similar by structure classes via declaring logical values and branches directly into markup.<\/p>\n

Conception<\/em><\/strong><\/p>\n

<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><\/code><\/pre>\n
Usage<\/em><\/strong> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
<KeyToValueConverter x:Key=\"TrueToVisibleConverter\" Key=\"True\" Value=\"Visible\" ByDefault=\"Collapsed\" \/>  <ProgressBar Visibility=\"{Binding IsBusy, Converter={StaticResource TrueToVisibleConverter}}\" \/><\/code><\/pre>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
<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}}\" \/><\/code><\/pre>\n
KeyToValueConverter<\/code> — checks the input value for compliance with the value from the Key<\/code> property, if the match is met, then the value from the Value<\/code> property is taken as the output, otherwise from the ByDefault<\/code> property.<\/p>\n
SwitchConverter<\/code> — searches for the first matching Case<\/code> from the list by its key from the Key<\/code> property, if the corresponding Case<\/code> is found, then the value specified in it from the Value<\/code> property is taken, otherwise from the ByDefault<\/code> property, specified in the converter itself.<\/p>\n
If the property Value<\/code> orByDefault<\/code> is not explicitly set, but the corresponding condition is satisfied, then in this case, an ordinary forwarding of the input value as an output occurs.<\/p>\n
Also, it is sometimes useful for KeyToValueConverter<\/code> to set a key in ConverterParameter<\/code> via the KeySource<\/code> property<\/p>\n
<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}}\" \/><\/code><\/pre>\n
There are four work modes of KeySource<\/code> for special cases:\u00a0<\/p>\n
Manual<\/code> (by default<\/code>) —\u00a0\u00a0the value from the Key<\/code> property is always used as a key during matching, or the value is forwarded when it is not set<\/p>\n
ConverterParameter<\/code> —\u00a0\u00a0the value from the binding’s property ConverterParameter<\/code> is always used as the key during matching, or the value is passed through when it is not set<\/p>\n
PreferManual<\/code> — if manual Key<\/code> is explicitly set, it takes precedence over ConverterParameter<\/code><\/p>\n
PreferConverterParameter<\/code> — if ConverterParameter<\/code> is explicitly set, then it takes precedence over manual Key<\/code><\/p>\n
Note that SwitchConverter<\/code>, in addition to the usual Case<\/code>, also has TypedCase<\/code>, the main difference of which is matching by value type<\/p>\n
<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><\/code><\/pre>\n
Sometimes it becomes necessary to debug the value converter. For this purpose, SwitchConverter<\/code> has a DiagnosticKey<\/code> property, if it is been set, then when the data binding is been triggered, diagnostic messages of the following format will be displayed in Trace<\/code><\/p>\n
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);<\/code><\/pre>\n
<SwitchConverter DiagnosticKey=\"UniqDiagnosticKey\" x:Key=\"CodeToBackgroundConverter\" ByDefault=\"White\"> ... <\/SwitchConverter><\/code><\/pre>\n
Dependency Value Converter<\/strong><\/p>\n
It is also useful to declare Key<\/code>, Value<\/code> and ByDefault<\/code> properties as Dependency Properties<\/code>, that means inheritance of converters and Case<\/code>s from the DependencyObject<\/code> class. Although value converters are usually not elements of the visual tree, which partly limits the work of the data binding mechanism, nevertheless, it remains possible to bind to static resources or descendants of the Binding<\/code> class, for example<\/p>\n
<KeyToValueConverter Key=\"AnyKey\" Value=\"{Binding MatchedValue, Source={StaticResource AnyResource}}\" ByDefault=\"{Binding DefaultValue, Source={StaticResource AnyResource}}\" \/>  <KeyToValueConverter Key=\"AnyKey\" Value=\"{Localizing MatchedTitle}\" ByDefault=\"{Localizing DefaultTitle}\" \/><\/code><\/pre>\n
Inline Converter<\/strong><\/p>\n
Inline Converter<\/code> allow to transfer the values conversion logic \u200b\u200bfrom a separate class that implements the IValueConverter<\/code> interface into the code-behind<\/code> class of a concrete view based on the event model.<\/p>\n
This allows to access the view and its individual visual elements from the conversion logic during implementation of complex scenarios that are difficult to implement with the classical approach.<\/p>\n
To do this, you need to add the converter declaration to the markup, and into the code-behind<\/code> class define handlers for the corresponding Converting<\/code> and ConvertingBack<\/code> events<\/p>\n
<Grid> <Grid.Resources> <InlineConverter x:Key=\"ComplexInlineConverter\" Converting=\"InlineConverter_OnConverting\" ConvertingBack=\"InlineConverter_OnConverting\" \/> <\/Grid.Resources>  <TextBlock Text=\"{Binding Number, Converter={StaticResource InlineConverter}}\" \/> <\/Grid><\/code><\/pre>\n
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) { \/\/ ... }<\/code><\/pre>\n
Aggregate Converter<\/strong><\/p>\n
Aggregate converter intends for combining converters into chains, while the value is converted sequentially in the order in which nested converters are declared.<\/p>\n
<AggregateConverter> <StepAConverter \/> <StepBConverter \/> <StepCConverter \/> <\/AggregateConverter><\/code><\/pre>\n
App.xaml<\/strong><\/p>\n
It is useful to locate generic value converters in a separate Resource Dictionary and then merge them as global resources into the App.xaml file. This allows to reuse value converters in different views without re-declaring them.<\/p>\n
<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><\/code><\/pre>\n
Ace Framework<\/strong><\/p>\n
Examples of implementation of the presented converters can be found into the Ace Framework<\/code> library gitlab<\/a> bitbucket<\/a><\/p>\n
With gratitude for your attention and interest!<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/526480\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
This article presents generalized approaches for using value converters<\/code> into writing of XAML<\/code> code.<\/p>\n
>> Read in Russian<\/a><\/p>\n
<\/figcaption><\/figure>\n
\n
IValueConverter<\/code> Data Binding<\/code> XAML<\/code> WPF<\/code> UWP<\/code> Xamarin Forms<\/code> UI<\/code> SwitchConverter<\/code> KeyToValueConverter<\/code> InlineConverter<\/code> AggregateConverter<\/code> ResourceDictionary<\/code><\/p>\n<\/blockquote>\n
Value converters<\/code> together with a data binding mechanism are essential components into XAML-based development of user interfaces. Value converters imply the presence of logic placed in a separated class that implements the IValueConverter<\/code> interface. Typically, the class name reflects the functional purpose, and the instances are declared in the markup.<\/p>\n
Switch Converter & Key To Value Converter<\/strong><\/p>\n
At practice many value converters have trivial logic similar by structure with ternary operator (? :)<\/code> or if-else<\/code>, switch-case-default<\/code> constructions. However, there are generalized patterns KeyToValueConverter<\/code> and SwitchConverter<\/code>, which allow to avoid adding to the project of similar by structure classes via declaring logical values and branches directly into markup.<\/p>\n
Conception<\/em><\/strong><\/p>\n
<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><\/code><\/pre>\n
Usage<\/em><\/strong> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
<KeyToValueConverter x:Key=\"TrueToVisibleConverter\" Key=\"True\" Value=\"Visible\" ByDefault=\"Collapsed\" \/>  <ProgressBar Visibility=\"{Binding IsBusy, Converter={StaticResource TrueToVisibleConverter}}\" \/><\/code><\/pre>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
<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}}\" \/><\/code><\/pre>\n
KeyToValueConverter<\/code> — checks the input value for compliance with the value from the Key<\/code> property, if the match is met, then the value from the Value<\/code> property is taken as the output, otherwise from the ByDefault<\/code> property.<\/p>\n
SwitchConverter<\/code> — searches for the first matching Case<\/code> from the list by its key from the Key<\/code> property, if the corresponding Case<\/code> is found, then the value specified in it from the Value<\/code> property is taken, otherwise from the ByDefault<\/code> property, specified in the converter itself.<\/p>\n
If the property Value<\/code> orByDefault<\/code> is not explicitly set, but the corresponding condition is satisfied, then in this case, an ordinary forwarding of the input value as an output occurs.<\/p>\n
Also, it is sometimes useful for KeyToValueConverter<\/code> to set a key in ConverterParameter<\/code> via the KeySource<\/code> property<\/p>\n
<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}}\" \/><\/code><\/pre>\n
There are four work modes of KeySource<\/code> for special cases:\u00a0<\/p>\n
Manual<\/code> (by default<\/code>) —\u00a0\u00a0the value from the Key<\/code> property is always used as a key during matching, or the value is forwarded when it is not set<\/p>\n
ConverterParameter<\/code> —\u00a0\u00a0the value from the binding’s property ConverterParameter<\/code> is always used as the key during matching, or the value is passed through when it is not set<\/p>\n
PreferManual<\/code> — if manual Key<\/code> is explicitly set, it takes precedence over ConverterParameter<\/code><\/p>\n
PreferConverterParameter<\/code> — if ConverterParameter<\/code> is explicitly set, then it takes precedence over manual Key<\/code><\/p>\n
Note that SwitchConverter<\/code>, in addition to the usual Case<\/code>, also has TypedCase<\/code>, the main difference of which is matching by value type<\/p>\n
<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><\/code><\/pre>\n
Sometimes it becomes necessary to debug the value converter. For this purpose, SwitchConverter<\/code> has a DiagnosticKey<\/code> property, if it is been set, then when the data binding is been triggered, diagnostic messages of the following format will be displayed in Trace<\/code><\/p>\n
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);<\/code><\/pre>\n
<SwitchConverter DiagnosticKey=\"UniqDiagnosticKey\" x:Key=\"CodeToBackgroundConverter\" ByDefault=\"White\"> ... <\/SwitchConverter><\/code><\/pre>\n
Dependency Value Converter<\/strong><\/p>\n
It is also useful to declare Key<\/code>, Value<\/code> and ByDefault<\/code> properties as Dependency Properties<\/code>, that means inheritance of converters and Case<\/code>s from the DependencyObject<\/code> class. Although value converters are usually not elements of the visual tree, which partly limits the work of the data binding mechanism, nevertheless, it remains possible to bind to static resources or descendants of the Binding<\/code> class, for example<\/p>\n
<KeyToValueConverter Key=\"AnyKey\" Value=\"{Binding MatchedValue, Source={StaticResource AnyResource}}\" ByDefault=\"{Binding DefaultValue, Source={StaticResource AnyResource}}\" \/>  <KeyToValueConverter Key=\"AnyKey\" Value=\"{Localizing MatchedTitle}\" ByDefault=\"{Localizing DefaultTitle}\" \/><\/code><\/pre>\n
Inline Converter<\/strong><\/p>\n
Inline Converter<\/code> allow to transfer the values conversion logic \u200b\u200bfrom a separate class that implements the IValueConverter<\/code> interface into the code-behind<\/code> class of a concrete view based on the event model.<\/p>\n
This allows to access the view and its individual visual elements from the conversion logic during implementation of complex scenarios that are difficult to implement with the classical approach.<\/p>\n
To do this, you need to add the converter declaration to the markup, and into the code-behind<\/code> class define handlers for the corresponding Converting<\/code> and ConvertingBack<\/code> events<\/p>\n
<Grid> <Grid.Resources> <InlineConverter x:Key=\"ComplexInlineConverter\" Converting=\"InlineConverter_OnConverting\" ConvertingBack=\"InlineConverter_OnConverting\" \/> <\/Grid.Resources>  <TextBlock Text=\"{Binding Number, Converter={StaticResource InlineConverter}}\" \/> <\/Grid><\/code><\/pre>\n
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) { \/\/ ... }<\/code><\/pre>\n
Aggregate Converter<\/strong><\/p>\n
Aggregate converter intends for combining converters into chains, while the value is converted sequentially in the order in which nested converters are declared.<\/p>\n
<AggregateConverter> <StepAConverter \/> <StepBConverter \/> <StepCConverter \/> <\/AggregateConverter><\/code><\/pre>\n
App.xaml<\/strong><\/p>\n
It is useful to locate generic value converters in a separate Resource Dictionary and then merge them as global resources into the App.xaml file. This allows to reuse value converters in different views without re-declaring them.<\/p>\n
<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><\/code><\/pre>\n
Ace Framework<\/strong><\/p>\n
Examples of implementation of the presented converters can be found into the Ace Framework<\/code> library gitlab<\/a> bitbucket<\/a><\/p>\n
With gratitude for your attention and interest!<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/526480\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-413442","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=413442"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413442\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}