madeinQuant
madeinQuant

Reputation: 1813

How to change font awesome icon with click event?

I have specified font awesome in a XAML file. The problem is that how to change font awesome icon when clicked the button, and change it back to original when clicked the button again.

FontAwesome in Xamarin Forms

    <ImageButton x:Name="stopWatch" BackgroundColor="Green" HeightRequest="60" WidthRequest="60"                   
                         VerticalOptions ="End" HorizontalOptions ="Center" Margin="10,25,10,10"
                         CornerRadius="30"
                         Padding="1" Opacity="0.5"
                             Clicked="Button_OnPressed" >
                    <ImageButton.Source>
                        <FontImageSource FontFamily="{x:StaticResource FontAwesomeRegular}" 
                             Glyph="{x:Static fontawesome:FontAwesomeIcons.ArrowAltCircleDown}"
                             Color="{AppThemeBinding Dark=Green,
                                                     Light=White}"/>
                    </ImageButton.Source>
                    <ImageButton.IsVisible>
                        <OnPlatform x:TypeArguments="x:Boolean">
                            <On Platform="iOS"
                    Value="true" />
                            <On Platform="Android"
                    Value="false" />
                        </OnPlatform>
                    </ImageButton.IsVisible>
                </ImageButton>

Clicked Event without font awesome (I cannot specify the icon with font awesome)

    private void Button_OnPressed(object sender, EventArgs e)
            {
                if (ButtonBackColor == true)
                    stopWatch.Source = "connection.png";
                else stopWatch.Source = "signal.png";
                ButtonBackColor = !ButtonBackColor;
            }

Update

Defined fontAwesome in App.xaml

<ResourceDictionary>
            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeBrands">
                <On Platform="Android"
                    Value="FontAwesome5Brands.otf#Regular" />
                <On Platform="iOS"
                    Value="FontAwesome5Brands-Regular" />
                <On Platform="UWP"
                    Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
            </OnPlatform>
            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeSolid">
                <On Platform="Android"
                    Value="FontAwesome5Solid.otf#Regular" />
                <On Platform="iOS"
                    Value="FontAwesome5Free-Solid" />
                <On Platform="UWP"
                    Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
            </OnPlatform>
            <OnPlatform x:TypeArguments="x:String"
                        x:Key="FontAwesomeRegular">
                <On Platform="Android"
                    Value="FontAwesome5Regular.otf#Regular" />
                <On Platform="iOS"
                    Value="FontAwesome5Free-Regular" />
                <On Platform="UWP"
                    Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
            </OnPlatform>
        </ResourceDictionary>

Upvotes: 0

Views: 970

Answers (1)

Cfun
Cfun

Reputation: 9671

For AppThemeBinding it seems not to be supported from the code till now Ability to set AppThemeBinding on Styles in code, you can test Application.Current.UserAppTheme one time but it won't be dynamic.

using System.Linq;
...

private void Button_OnPressed(object sender, EventArgs e)
{
  Application.Current.Resources.TryGetValue("FontAwesomeRegular", out object fontFamily);

   if (fontFamily == null)
      //this should not occurred, throw an exception

    string fontFamilyString = Device.RuntimePlatform switch
            {
                Device.Android => (fontFamily as OnPlatform<string>).Platforms.Where(x => x.Platform[0].Equals(Device.Android)).Select(x => (string)x.Value).FirstOrDefault(),
                Device.iOS => (fontFamily as OnPlatform<string>).Platforms.Where(x => x.Platform[0].Equals(Device.iOS)).Select(x => (string)x.Value).FirstOrDefault(),
                Device.UWP => (fontFamily as OnPlatform<string>).Platforms.Where(x => x.Platform[0].Equals(Device.UWP)).Select(x => (string)x.Value).FirstOrDefault(),
                _ => string.Empty
            };

 if (ButtonBackColor == true)
 {
     stopWatch.Source = new FontImageSource()
     { 
       FontFamily= fontFamilyString,
       Glyph = FontAwesomeIcons.ArrowAltCircleDown,
       Color = Application.Current.UserAppTheme == OSAppTheme.Dark
               ? Color.Green
               : Color.White;
     };
 }
 else
 {
     stopWatch.Source = new FontImageSource()
     { 
       FontFamily= fontFamilyString,
       Glyph = FontAwesomeIcons.ArrowAltCircleUp,
       Color = Application.Current.UserAppTheme == OSAppTheme.Dark
               ? Color.Green
               : Color.White;
     };
 }

 ButtonBackColor = !ButtonBackColor;
}

Upvotes: 1

Related Questions