Xamarin Forms how to apply SVG to a button data triggers?

Question

So my app needs SVGs now or I want to switch png to svg so it can scale well with difference screen sizes. I know I can draw svg using <Path> but <Path> doesn't have data triggers but they do have GestureRecognizers which is useful but without data triggers idk how else to achieve what I want.

This is my current xaml for a button to data trigger and switch its content depending on playing state of a MediaElement. I would like to switch the Text to a SVG of play pause images.

<Button x:Name="OnPlayPauseButtonClicked"
                    Grid.Row="1"
                    Text="&#x25B6;&#xFE0F; Play"
                    VerticalOptions="End"
                    Clicked="OnPlayPauseButton_Clicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static xct:MediaElementState.Playing}">
                        <Setter Property="Text"
                                Value="&#x23F8; Pause"/>
                    </DataTrigger>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static xct:MediaElementState.Buffering}">
                        <Setter Property="IsEnabled"
                                Value="False"/>
                    </DataTrigger>
                </Button.Triggers>
            </Button>

I have tried putting my play and pause svg files into drawable folder and apply the Value to property of ImageSource. That didn't work. I then tried converting the SVG to XML and use the instead and it didn't work.

Is there a way to do this without using any dependencies?

Thanks in advance.

Answer 1

You have a few options here:

1. Font Icons

There is a much better way to accomplish what you are trying to do using Font Icons, e.g. Material Design Icons. Here is a cheat sheet for the icons.

This is not strictly a dependency, if you add the fonts as a resource (which you need to do in either case using PNGs, SVGs or - in this case - an image font).

<Button x:Name="OnPlayPauseButtonClicked" Grid.Row="1" Text="&#xF040A;" VerticalOptions="End" Clicked="OnPlayPauseButton_Clicked"
        FontFamily="materialdesignicons">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Playing}">
            <!-- Pause Button Icon -->
            <Setter Property="Text" Value="&#xF03E4;"/>
        </DataTrigger>
                <DataTrigger TargetType="Button"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Paused}">
            <!-- Play Button Icon -->
            <Setter Property="Text" Value="&#xF040A;"/>
        </DataTrigger>
        <DataTrigger TargetType="Button"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Buffering}">
            <Setter Property="IsEnabled" Value="False"/>
        </DataTrigger>
    </Button.Triggers>
</Button>

James Montemagno also has a great blog post on this: https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/

2. ImageButton

You can add your images to your project's resources and load them into an ImageButton. How to use ImageButtons refer to this link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/imagebutton.

SVGs

There is a library that allows you to load SVGs, this will require the following nuget to be installed: https://github.com/luberda-molinet/FFImageLoading/

<ImageButton x:Name="OnPlayPauseButtonClicked" Grid.Row="1" VerticalOptions="End" Clicked="OnPlayPauseButton_Clicked">
    <ImageButton.Triggers>
        <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Playing}">
            <!-- Pause Button Icon -->
            <Setter Property="Source">
               <Setter.Value>
                   <ffimageloadingsvg:SvgCachedImage Source="resource://YourAppName.Resources.Pause.svg"/>
               </Setter.Value>
            </Setter>
        </DataTrigger>
                <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Paused}">
            <!-- Play Button Icon -->
            <Setter Property="Source">
               <Setter.Value>
                   <ffimageloadingsvg:SvgCachedImage Source="resource://YourAppName.Resources.Play.svg"/>
               </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Buffering}">
            <Setter Property="IsEnabled" Value="False"/>
        </DataTrigger>
    </ImageButton.Triggers>
</ImageButton>

PNGs

To see how to add images to your app, refer to this page: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#embedded-images

<ImageButton x:Name="OnPlayPauseButtonClicked" Grid.Row="1" VerticalOptions="End" Clicked="OnPlayPauseButton_Clicked">
    <ImageButton.Triggers>
        <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Playing}">
            <!-- Pause Button Icon -->
            <Setter Property="Source" Value="{local:ImageResource Pause.PNG}" />
        </DataTrigger>
                <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Paused}">
            <!-- Play Button Icon -->
            <Setter Property="Source" Value="{local:ImageResource Play.PNG}" />
        </DataTrigger>
        <DataTrigger TargetType="ImageButton"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Buffering}">
            <Setter Property="IsEnabled" Value="False"/>
        </DataTrigger>
    </ImageButton.Triggers>
</ImageButton>

[Update] 3: Use SvgCachedImage directly

You can also use SvgCachedImage directly instead of a Button and attach a TapGestureRecognizer to it:

<ffimageloadingsvg:SvgCachedImage x:Name="OnPlayPauseButtonClicked" Grid.Row="1" VerticalOptions="End">
    <ffimageloadingsvg:SvgCachedImage.Triggers>
        <DataTrigger TargetType="ffimageloadingsvg:SvgCachedImage"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Playing}">
            <!-- Pause Button Icon -->
            <Setter Property="Source"
                    Value="resource://YourAppName.Resources.Pause.svg"/>
        </DataTrigger>
        <DataTrigger TargetType="ffimageloadingsvg:SvgCachedImage"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Paused}">
            <!-- Play Button Icon -->
            <Setter Property="Source"
                    Value="resource://YourAppName.Resources.Play.svg"/>
        </DataTrigger>
        <DataTrigger TargetType="ffimageloadingsvg:SvgCachedImage"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static xct:MediaElementState.Buffering}">
            <Setter Property="IsEnabled" Value="False"/>
        </DataTrigger>
    </ffimageloadingsvg:SvgCachedImage.Triggers>
    <ffimageloadingsvg:SvgCachedImage.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnPlayPauseButton_Clicked"/>
    </ffimageloadingsvg:SvgCachedImage.GestureRecognizers>
</ffimageloadingsvg:SvgCachedImage>

Answer 2

You can use SkiaSharp to draw patterns, create custom controls to load it. For drawing patterns, refer to this document. The answer to this issue can also help you.