Forum Xamarin.Forms

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

PacodosoPacodoso FRUniversity ✭✭✭

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

Best Answer

  • PacodosoPacodoso FRUniversity ✭✭✭
    Accepted Answer

    @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).

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited October 2020

    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>
    
  • PacodosoPacodoso FRUniversity ✭✭✭
    Accepted Answer

    @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).

  • YelinzhYelinzh Member, Xamarin Team Xamurai

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

Sign In or Register to comment.