reusable error view with a ContentView, how to set the Image source?

Pacodoso

I'm trying to create a reusable error view control with a ContentView, to display the errors related to API calls like no network, timeout, server issue, ...

This view will contain: an image, a title and a small description. In my case, the image is based on a FontImageSource.

My ErrorControl view looks like this:

<ContentView.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackLayout BackgroundColor="Transparent"
                     Spacing="0"
                     VerticalOptions="Center">
            <Grid>
                <Image Style="{StaticResource ErrorImageIconPart1Style}">
                    <Image.Source>
                        <FontImageSource Glyph="{StaticResource FadsIconNoInternetPart1}"
                                         Color="{StaticResource BlondColor}"
                                         FontFamily="FontAwesomeDuotoneSolid"
                                         Size="90" />
                    </Image.Source>
                </Image>
            </Grid>
            <Label Text="{Binding Description, Source={x:Reference ErrorControl}}" />
        </StackLayout>
        <Button Grid.Row="1"
                Text="Retry" />
    </Grid>
</ContentView.Content>

The I use my control like this:

<ctrl:ErrorView Title="Title Test"
                Description="Description Test"/>

If I have a static image this works fine, but I need to change the Glyph used by FontImageSource, depending of the error kind.

What sould be the better approach to achieve this?
- I've thought to use Converters, but as I have at least 3 kinds of error, it doesn't seem to be a good approach as I would have to create 3 converters
- I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Pacodoso

@Jarvan said:

I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Try using ControlTemplate to customize different styles for the ContentView.

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="tempate_1">
            ...
        </ControlTemplate>
        ...
    </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout>
            <ContentView ControlTemplate="{StaticResource tempate_1}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

This doesn't seem interesting if I need to duplicate the control many times...> @Jarvan said:

I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Try using ControlTemplate to customize different styles for the ContentView.

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="tempate_1">
            ...
        </ControlTemplate>
        ...
    </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout>
            <ContentView ControlTemplate="{StaticResource tempate_1}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Hi @Jarvan , I finally used a Converter with a ConverterParameterand 3 Grid containing 3 different Images depending the case I meet (no internet access, timeout, other server issue).

Yelinzh

I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Try using ControlTemplate to customize different styles for the ContentView.

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="tempate_1">
            ...
        </ControlTemplate>
        ...
    </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout>
            <ContentView ControlTemplate="{StaticResource tempate_1}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Pacodoso

@Jarvan said:

I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Try using ControlTemplate to customize different styles for the ContentView.

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="tempate_1">
            ...
        </ControlTemplate>
        ...
    </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout>
            <ContentView ControlTemplate="{StaticResource tempate_1}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

This doesn't seem interesting if I need to duplicate the control many times...> @Jarvan said:

I've also thought to use DataTemplate, but my image is not contained in a Collection/List, so this doesn't seem to request to my needs

Try using ControlTemplate to customize different styles for the ContentView.

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="tempate_1">
            ...
        </ControlTemplate>
        ...
    </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout>
            <ContentView ControlTemplate="{StaticResource tempate_1}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Hi @Jarvan , I finally used a Converter with a ConverterParameterand 3 Grid containing 3 different Images depending the case I meet (no internet access, timeout, other server issue).

Yelinzh

Congrats! Please accept your solution as the answer, it'll help others who face the similar problem.