-
Notifications
You must be signed in to change notification settings - Fork 12
Converters
Håvard Moås edited this page Jul 2, 2020
·
24 revisions
# Converters
> :point_right: To get started, make sure you have followed the [getting started steps](Https://github.com/DIPSAS/DIPS.Xamarin.UI/wiki/Getting-Started)
Namespace: `DIPS.Xamarin.UI.Converters`
## InvertedBoolConverter
Namespace: `DIPS.Xamarin.UI.Converters.ValueConverters`
A converter that can be used with a `Binding` to a boolean value. The converter will return a inverted boolean value.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/InvertedBoolConverterPage.xaml).
### Example usage
```xml
<Label Text="Welcome to Xamarin"
IsVisible="{Binding SomeLogicalProperty, Converter={dxui:InvertedBoolConverter}}" />
```
## IsEmptyConverter
Namespace: `DIPS.Xamarin.UI.Converters.ValueConverters`
A converter that can be used with different input values. It will return a boolean value indicating whether or not the input value is empty. It also has the ability to be inverted.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/IsEmptyConverterPage.xaml).
### Example usage
```xml
<Label Text="Is visible if list is empty"
IsVisible="{Binding EmptyListOfStrings, Converter={dxui:IsEmptyConverter}}" />
```
## IsEmptyToObjectConverter
Namespace: `DIPS.Xamarin.UI.Converters.ValueConverters`
Converter that takes different input input types and returns a true/false object to indicate if it is empty or not. It also has the ability to be inverted.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/IsEmptyToObjectConverterPage.xaml)
### Example usage
```xml
<Label Opacity="{Binding MyText, Converter=IsEmptyToObjectConverter TrueObject=0, FalseObject=1}" />
```
## BoolToObjectConverter
Namespace: `DIPS.Xamarin.UI.Converters.ValueConverters`
Converters a boolean input value to its respective `TrueObject`/`FalseObject`. Can be used with any object and has the ability to be inverted.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/BoolToObjectConverterPage.xaml).
### Example usage
```xml
<Label Opacity="{Binding SomeLogicalProperty, Converter={dxui:BoolToObjectConverter TrueObject=0.5, FalseObject=1}}"
Text="My opacity changes" />
```
## DateConverter
Converts an `DateTime` object with a format and convert it to a readable time string
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/DateConverterPage.xaml)
### Formats
| Format | English | Norwegian | Remarks |
|--------|---------|-----------|---------|
Default / Short | 12th Dec 2019 | 12. des 2019 |
Text | Today | I dag | Will return different texts based on the date based on todays date
### Example usage
```xml
<Label Text="{Binding Date, Converter={dxui:DateConverter Format=Default}}"
```
## TimeConverter
Converts an DateTime or TimeSpan object with a format and convert it to a readable time string
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/TimeConverterPage.xaml)
### Formats
| Format | English | Norwegian | Remarks |
|--------|---------|-----------|---------|
Default | 12:00 PM | 12:00 | |
### Example Usage
```xml
<Label Text="{Binding Time, Converter={dxui:TimeConverter Format=Default}}" />
```
## DateAndTimeConverter
Converters a DateTime object with an format and convert it to a readable string
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/DateAndTimeConverterPage.xaml)
### Formats
| Format | English | Norwegian | Remarks |
|--------|---------|-----------|---------|
Default / Short | 12th Dec 1990 12:00 PM | 12. des 1990 12:00 | |
Text | Today 12:00 PM | I dag, kl 12:00 | Will return different date texts based on the date based on todays date |
### Example usage
```xml
<Label Text="{Binding Date, Converter={dxui:DateAndTimeConverter Format=Default}}" />
```
## MultiplicationConverter
Multiplies the input value with a provided factor.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/MultiplicationConverterPage.xaml)
### Example usage
```xml
<Label Text="{Binding Value, Converter={ValueConverters:MultiplicationConverter Factor=2}}" />
```
## AdditionConverter
Adds the provided value (a term) with a Addend to create a sum
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/AdditionConverterPage.xaml)
### Example usage
```xml
<Label Text="{Binding Value, Converter={dxui:AdditionConverter Addend=2}}" />
```
## StringCaseConverter
> Looking for a way to string case your localized strings? See [StringCase](https://github.com/DIPSAS/DIPS.Xamarin.UI/wiki/MarkupExtensions#stringcase) markup extension.
Converters a input string to a desired string case
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/StringCaseConverterPage.xaml)
### Example usage
```xml
<Label Text="{Binding MyString, Converter={dxui:StringCaseConverter StringCase=Upper}}"/>
```
## TypeToObjectConverter
Checks the type of the binding against a `Type` and returns a `True` / `False` object accordingly to the type check.
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/ValueConverters/TypeToObjectConverterPage.xaml)
### Example usage
```xml
<Frame BackgroundColor="{Binding CurrentTypeClass, Converter={dxui:TypeToObjectConverter Type={x:Type valueconverters:OneTypeClass}, TrueObject=Red, FalseObject=Green}}" />
```
## LogicalExpressionConverter
Converter that takes multiple boolean inputs, runs it through a `LogicalGate` and returns a `True`/`FalseObject`.
> 👉 If `True`/`FalseObject` is not set, it will return boolean `true` / `false`
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/MultiValueConverters/LogicalExpressionConverterPage.xaml)
### Example usage
```xml
<Label Text="MyText">
<Label.IsVisible>
<MultiBinding Converter="{dxui:LogicalExpressionConverter
LogicalGate=Or}">
<Binding Path="SomeBoolProperty" />
<Binding Path="SomeOtherBoolProperty" />
</MultiBinding>
</Label.IsVisible>
</Label>
```
### LogicalGate
These are the different options for logical gates:
#### And (default)
| A | B | Output |
|---|---|--------|
| 0 | 0 | 0 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 1 | 1 |
#### Nand
| A | B | Output |
|---|---|--------|
| 0 | 0 | 1 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 0 |
#### Or
| A | B | Output |
|---|---|--------|
| 0 | 0 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 1 |
#### Nor
| A | B | Output |
|---|---|--------|
| 0 | 0 | 1 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 1 | 0 |
#### Xor
| A | B | Output |
|---|---|--------|
| 0 | 0 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 0 |
#### Xand
| A | B | Output |
|---|---|--------|
| 0 | 0 | 1 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 1 | 1 |
## PositionInListConverter
A converter that takes a item and a list as bindings and compare the index of the item with a Position and return a `True`/`FalseObject`
Samples can be found [here](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/master/src/Samples/DIPS.Xamarin.UI.Samples/Converters/MultiValueConverters/PositionInListConverterPage.xaml)
> 👉 If `True`/`FalseObject` is not set, it will return boolean `true` / `false`
### Example usage
You are displaying a list of items and you want all of the items to have a bottom separator except the last item in the list.
This can be achieved by using this converter to set a separator for each item but not the last item by doing so:
```xml
<StackLayout x:Name="ItemsStackLayout"
BindableLayout.ItemsSource="{Binding Items}"
Orientation="Vertical">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="{x:Type x:String}">
<StackLayout Margin="15,0,0,0">
<Label Text="{Binding .}"/>
<BoxView HeightRequest="1"
Color="Black">
<BoxView.IsVisible>
<MultiBinding Converter="{dxui:PositionInListConverter Position=Last, Inverted=True}">
<Binding /> <!-- The item -->
<Binding Path="BindingContext.Items"
Source="{x:Reference ItemsStackLayout}"/> <!-- The list -->
</MultiBinding>
</BoxView.IsVisible>
</BoxView>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
```
> In this example we are using the `Inverted` property to make sure it returns `true` for all items except the `Last` item.
![image](https://user-images.githubusercontent.com/2527084/86327610-e2ac6100-bc43-11ea-8356-ae67580d54d4.png)
### Position
This is a string and it accepts both `First` / `Last` and indexes that are inside of the bounds of the list. This means that you can write `Position=1` to have it return `true` for the item at position = 1 and `false` for the rest.
If you do not set the `Position` property it will default to `Last`.
### ObservableCollection
When dealing with an `ObservableCollection` managing items with the `Add()` / `Remove()` method, you will have to force the layout to redraw all items to get the effect. This is because converters does not fire again magically by a `ObservableCollection.CollectionChanged`.
The workaround is to set the entire list with a new modified list and raise property changed to make the UI redraw:
#### Add ([example](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/66f30393cd0b2c52136b9eb12a59afd3a569e983/src/Samples/DIPS.Xamarin.UI.Samples/Converters/MultiValueConverters/PositionInListConverterPage.xaml.cs#L50))
```csharp
private void AddItem()
{
var newList = new ObservableCollection<string>(Items);
newList.Add(<item>);
Items = newList; //Raises property changed in the `Items.Set`
...
```
#### Remove ([example](https://github.com/DIPSAS/DIPS.Xamarin.UI/blob/66f30393cd0b2c52136b9eb12a59afd3a569e983/src/Samples/DIPS.Xamarin.UI.Samples/Converters/MultiValueConverters/PositionInListConverterPage.xaml.cs#L33))
```csharp
private void RemoveItem()
{
var newList = new ObservableCollection<string>(Items);
newList.Remove(<item>);
Items = newList; //Raises property changed in the `Items.Set`
...
```
- ContentControl
- DataTemplateSelectors
- Date- and TimePicker
- Modality
- Contextual Menus
- RadioButton
- TrendGraph
- Tag
- Toast