Xamarin Forms SVG Image (FFImageLoading) goes missing after adding LayoutOptions

Question

In my Xamarin Forms Project I have several SVG Images that should be displayed.
Therefore I use the Xamarin.Forms.FFImageLoading.Svg.Forms NuGet Package. The XAML looks like this:

<Grid
    Margin="0"
    ColumnSpacing="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="90*"/>
        <ColumnDefinition Width="10*"/>
    </Grid.ColumnDefinitions>

    <local:LetterSpacingLabel
        FontSize="14"
        TextColor="#1F1F1F"
        FontFamily="{StaticResource Bliss2-Regular}"
        LetterSpacing="0.1"
        VerticalTextAlignment="Center"
        Grid.Column="0"
        Text="{Binding Name}"/>
        <ffimageloadingsvg:SvgCachedImage
        Grid.Column="1"
        Source="{Binding StateIconPath}"/>

</Grid>

And the Image is displayed as it should.

However I want it to be smaller, so I add LayoutOptions like this:

After that, the Image it not displayed anymore.

Any solutions to this problem?

Thanks in advance.

[EDIT]

Here is a .svg-File that i am using:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#CE2D46;}
</style>
<path id="Pfad_73" class="st0" d="M11,0C4.9,0,0,4.9,0,11s4.9,11,11,11c6.1,0,11-4.9,11-11c0,0,0,0,0,0C22,4.9,17.1,0,11,0z
     M12.4,18.6c0,0.7-0.6,1.3-1.3,1.3h-0.2c-0.7,0-1.3-0.6-1.3-1.3v-0.2c0-0.7,0.6-1.3,1.3-1.3h0.2c0.7,0,1.3,0.6,1.3,1.3V18.6z
     M12.4,14.2c0,0.8-0.7,1.3-1.4,1.3c-0.7,0-1.2-0.6-1.3-1.3V4.9c0-0.8,0.7-1.3,1.4-1.3c0.7,0,1.2,0.6,1.3,1.3V14.2z"/>
</svg>

Umm, I do not think LayoutOptions make the image smaller!! Why not put it in a Grid with Auto Row/Column!? — FreakyAli, Jul 04 '19 at 09:12
@G.hakim could you explain that in detail? I have another solution where LayoutOptions did the trick, but I cannot get it to work here. — Robert Haslinger, Jul 04 '19 at 09:27
If you read the Xamarin Docs for [LayoutOptions](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options) then you will understand the fact that LayoutOptions can only take more space when it is available and that you need to use the Expand version of it for that, But LayoutOptions, in general, is more about alignment and not expansion... Also, it might be not working for multiple reasons, it could be a bug or it could be that the image itself has some kind of alignment in itself which is making it look like that if what I say makes sense. — FreakyAli, Jul 04 '19 at 09:31
@G.hakim Thank you, from now on I will try to use LayoutOptions correctly. However I am still confused, why would the exact same code work in one solution, but not in another? — Robert Haslinger, Jul 04 '19 at 09:48
@G.hakim I have edited my question to provide the additional information. — Robert Haslinger, Jul 04 '19 at 11:19
No since this Application should be available on Android and iOS. — Robert Haslinger, Jul 04 '19 at 12:10
@G.hakim I am just curious why the svg is visible if I cut out atleast one of the LayoutOptions. — Robert Haslinger, Jul 04 '19 at 12:11
I am not very used with svg. I did not know that there are platform specific svg until now. — Robert Haslinger, Jul 04 '19 at 12:12
And there could be multiple reasons why the image is not shown — FreakyAli, Jul 04 '19 at 12:13
Could be the configuration of the SVG or there could be something missing in it, What I would suggest is try using 2-3 different SVG's and see if this works fine with them and if it does there is obviously something wrong with the image — FreakyAli, Jul 04 '19 at 12:14
Well, as mentioned earlier, when removing either HorizontalOptions or VerticalOptions from the xaml, then the svg is displayed. It is only NOT displayed, when both of these options are used. That is what makes me confused. — Robert Haslinger, Jul 04 '19 at 12:17
Does this happen when you use any and every SVG or this specific one is what I am asking — FreakyAli, Jul 04 '19 at 12:18
Happens with every svg, BUT in another project i use the exact same svg Images and they are displayed there, even with both LayoutOptions. Hope this answers your question. — Robert Haslinger, Jul 04 '19 at 12:28

score 0 · Answer 1 · answered Jul 04 '19 at 10:08

0

for your columns width set 9* and 1*

for the image add height and width :

answered Jul 04 '19 at 10:08

El andaloussi Ishrak

32
1
5

well, 90* and 10* results in the same as 9* and 1*. Sure I could use height and width, but then I could also just use a .png.. I want my Application to be responsive. – Robert Haslinger Jul 04 '19 at 11:06

score 0 · Answer 2 · answered Jul 04 '19 at 13:27

0

@RobertHaslinger

In this case you can add a padding or margin so the size of your image will be reduced and still responsive

<ffimageloadingsvg:SvgCachedImage Margin ="8" .....>

answered Jul 04 '19 at 13:27

El andaloussi Ishrak

32
1
5

Xamarin Forms SVG Image (FFImageLoading) goes missing after adding LayoutOptions

2 Answers2