Skip to content

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`
...
```
Clone this wiki locally