How to change GridView button content on click?

Question

In my app, there is an option where the user can add an item to their favorite list.

The button contains a love symbol. I want to change the color when the item is already on the favorite list.

I've tried this method, but it doesn't work, because the button is a GridView item.

private void OrdersButton_Click(object sender, EventArgs e)
{
    if (OrdersButton.Text == "Turn Orders On")
    {
        OrdersButton.Text = "Turn Orders Off";
    }
    else if (OrdersButton.Text == "Turn Orders Off")
    {
        OrdersButton.Text = "Turn Orders On";
    }
}

[Answer from this post - Change button text after click, then change it back after clicking again]

Here is my button code-

<Button Style="{StaticResource TextBlockButtonStyle}"
        Margin="2,0"
        Content="&#xEB51;" 
        FontFamily="Segoe MDL2 Assets"
        x:Name="addToFevBtn"
        Click="AddToFevBtn_Click"/>

So my question is how I can do that?

Answer 1

For your requirement, The better way is that bind button's Foreground property with Boolean value then use IValueConverter to convert it into SolidColorBrush. You could change the symbol's color by modifying IsFav value in the button click method .

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    public List<Item> Items { get; set; }
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        Items = new List<Item>();
        Items.Add(new Item { Name = "Nice Day", IsFav = true });
        Items.Add(new Item { Name = "Nice Day", IsFav = false });
        Items.Add(new Item { Name = "Nice Day", IsFav = false });
    }

    private void AddToFevBtn_Click(object sender, RoutedEventArgs e)
    {
        var btn = sender as Button;
        var item = btn.DataContext as Item;
        item.IsFav = !item.IsFav;
    }
}
public class Item : INotifyPropertyChanged
{
    public bool IsFav
    {
        get
        {
            return isFav;

        }
        set
        {
            isFav = value;
            OnPropertyChanged();
        }
    }
    private bool isFav;

    public string Name { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        if (PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

    }
}

public class ColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (Boolean.Parse(value.ToString()))
        {
            return new SolidColorBrush(Colors.Red);
        }
        else
        {
            return new SolidColorBrush(Colors.Black);
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Xaml

<Page.Resources>
    <local:ColorConverter x:Key="Converter"/>
</Page.Resources>
<Grid>
    <GridView ItemsSource="{x:Bind Items}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" Width="100" >
                    <TextBlock Text="{Binding Name}"
                              TextAlignment="Center" 
                              HorizontalAlignment="Center" 
                              Margin="0,10,0,0"/>
                    <Button Style="{StaticResource TextBlockButtonStyle}" 
                    HorizontalAlignment="Center"
                    Margin="0,30,0,0"
                    Content="&#xEB51;" 
                    FontSize="25"
                    FontFamily="Segoe MDL2 Assets"     
                    Foreground="{Binding IsFav,Converter={StaticResource Converter}}"
                           Click="AddToFevBtn_Click"
                    x:Name="addToFevBtn"
                  />
                </StackPanel>

            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>