xamarinxamarin.formsxamarin.androidxamarin.iosffimageloading

FFImageLoading, SVGCachedImage blurry when setting HeightRequest/WidthRequest from a binding


I'm using FFImageLoading to display svg icons in my Xamarin.Forms project. My understanding is that the Height and Width requests must be set explicitly in order for the SVG to be rendered properly. I'm getting a lot of pixilation whenever I try to bind the Height/Width requests to values on the ViewModel (I have this as a need because the desired size depends on data). If I set the size explicitly everything looks fine.

Does SvgCachedImage not redraw the SVG whenever the bindings for Height/Width request change?

If not, is there a way for me to explicitly force them to invalidate and redraw when the size changes?


Solution

  • The blur issue was resolved by setting Horizontal and Vertical options to fill instead of Center:

    <Grid>
                                    <ffimageloadingsvg:SvgCachedImage  BackgroundColor="Transparent"
                                                                  Margin="{Binding HarmonicIconMargin}"
                                                                  HorizontalOptions="Fill"
                                                                  VerticalOptions="Fill"
                                                                  WidthRequest="{Binding HarmonicIconWidth}"
                                                                  HeightRequest="{Binding HarmonicIconWidth}"
                                                                  Source="{Binding CurrentTestItem, Converter={StaticResource TestItemToHarmonicIconConverter}}" />
                                </Grid>
    

    At that point it seemed be ignoring the height/width requests. I could've experimented around with that more (perhaps the request was for too much space) but I found that binding the margin to a computed property effectively enabled me to control the size of the SVG Image while not causing it to become blurred.