luberda-molinet / FFImageLoading

Image loading, caching & transforming library for Xamarin and Windows
MIT License
1.42k stars 377 forks source link

SvgCachedImage issue with Triggers #1399

Open Denn1Ro opened 4 years ago

Denn1Ro commented 4 years ago

Hi, Firstly, thank you for this wonderful package. I use SvgCachedImage and i set the color of the images dynamically. But for some reason doesn't work with triggers. See the code below: `<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="DemoFFImageLoading.MainPage" xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms" xmlns:ffTransformation="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="20">
    <!-- Place new controls here -->
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Label Text="" FontAttributes="Bold" 
               HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand">
            <Label.Triggers>
                <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference btnSwitch},Path=IsToggled}" Value="True">
                    <Setter Property="Text" Value="The Switch is Toggled"/>
                </DataTrigger>
                <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference btnSwitch},Path=IsToggled}" Value="False">
                    <Setter Property="Text" Value="The Switch is NOT Toggled"/>
                </DataTrigger>
            </Label.Triggers>
        </Label>
        <ffSvg:SvgCachedImage x:Name="svgImage" Source="eye.svg" HeightRequest="100" WidthRequest="100">
            <ffSvg:SvgCachedImage.Transformations>
                <ffTransformation:TintTransformation HexColor="#03fc41" EnableSolidColor="True"/>
            </ffSvg:SvgCachedImage.Transformations>
            <ffSvg:SvgCachedImage.Triggers>
                <DataTrigger TargetType="ffSvg:SvgCachedImage" Binding="{Binding Source={x:Reference btnSwitch},Path=IsToggled}" Value="True">
                    <Setter Property="Transformations">
                        <Setter.Value>
                            <ffTransformation:TintTransformation HexColor="#00bef6" EnableSolidColor="True"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger TargetType="ffSvg:SvgCachedImage" Binding="{Binding Source={x:Reference btnSwitch},Path=IsToggled}" Value="False">
                    <Setter Property="Transformations">
                        <Setter.Value>
                            <ffTransformation:TintTransformation HexColor="#000000" EnableSolidColor="True"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </ffSvg:SvgCachedImage.Triggers>
        </ffSvg:SvgCachedImage>
        <Switch x:Name="btnSwitch" IsToggled="False" HorizontalOptions="Center"/>
    </StackLayout>
</StackLayout>

` If set the Transformation in code behind it works but with the use of Triggers doesn't. I would like to know if i miss something. Thanks

Mari2061 commented 4 years ago

Hi! Is this issue solved? I am having the same problem

Denn1Ro commented 4 years ago

I can't recall the workaround that I made but as you can see the issue is still open. So..

leo-mck commented 3 years ago

If SvgCachedImage works like CachedImage, you have to pass a List<ITransformation> for the Setter.Value. This works for me:

<ff:CachedImage Source="{Binding ImageUrl}" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="120" DownsampleToViewSize="True">

    <ff:CachedImage.Triggers>

        <DataTrigger Binding="{Binding IsEnabled}" Value="False" TargetType="ff:CachedImage">
            <Setter Property="Transformations">
                <Setter.Value>
                    <generic:List x:TypeArguments="work:ITransformation">
                        <transformations:GrayscaleTransformation />
                    </generic:List>
                </Setter.Value>
            </Setter>
        </DataTrigger>

    </ff:CachedImage.Triggers>

</ff:CachedImage>