Xamarin Forms如何将SVG应用于按钮数据触发器？

所以我的应用现在需要SVG，或者我想把png切换到svg，这样它就可以很好地适应不同的屏幕尺寸。我知道我可以用<Path>绘制svg，但是<Path>没有数据触发器，但是他们有GestureRecognizers，这很有用，但是没有数据触发器，我不知道还有什么方法来实现我想要的。
这是我当前的xaml，用于数据触发器的按钮，并根据MediaElement的播放状态切换其内容。我想将文本切换到播放暂停图像的SVG。

<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>

我试着把我的播放和暂停svg文件放到drawable文件夹中，并将值应用到ImageSource的属性。这不起作用。然后我试着将SVG转换为XML，并使用，但它不起作用。
有没有一种方法可以在不使用任何依赖项的情况下完成此操作？
先谢谢你。

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>

Xamarin Forms如何将SVG应用于按钮数据触发器？

2条答案

相关问题

热门标签

最新问答