如何在Xamarin表单中使用填充颜色选项创建自定义形状按钮

Question

当用户单击“收藏夹”按钮时，该按钮将填充颜色。按钮形状将是心形。请向我建议您实现此目标的宝贵建议。我已经附上了按钮的屏幕截图，请参考

Answer 1

根据您的问题，您需要两张喜欢的图像已填充和未填充。首先，我认为'isFavorite'属性应该为false。在您的ViewModel内部按钮操作触发器

private void ButtonActionForFavouriteTriggered(object seletecedButtonItem)
    {
        System.Diagnostics.Debug.WriteLine("favourite button clickked");
        var selectedList = (Result)seletecedButtonItem;

        if (selectedList.isFavorite == "Fav.png")
        {
            // update api or local DB whatever on here
            selectedList.isUserFavorite = false;
            selectedList.isFavorite = "unFav.png"; // this will update in UI - changes from favorite image into unfavorite image
        }
        else
        {
            // update api or local DB whatever on here
            selectedList.isUserFavorite = true;
            selectedList.favourite = "Fav.png"; // this will update in UI
        }
    }

“结果”是我的模型，可以在模型中使用“ INotifyPropertyChanged”界面。

 public class Result: INotifyPropertyChanged
{
    public int id { get; set; }
    public string country { get; set; }
    public string name { get; set; }
    public bool isUserFavorite { get; set; }

    //Note: If you want to change any thing without reload cells, use this type and inherit 'INotifyPropertyChanged'
    // Example: Favourite and UnFavourite button action, tapping any event change any text from cell

    public string abbr {
        get { return _abbr; } 
        set { _abbr = value;  OnPropertyChanged("abbr"); }
    }
    public string area { get; set; }
    public string largest_city { get; set; }
    public string capital { get; set; }
    public string isFavourite 
    { 
        get { return _fav; }
        set { 
               _fav = value; OnPropertyChanged("isFavourite");
            }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public string _fav;
    public string _abbr;


    private void OnPropertyChanged(string v)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(v));
    }
}

以及xaml中的listview或其他视图中的内容；

 <Button Grid.Column="3" x:Name="buttonFavourite" BackgroundColor="Transparent" Image="{Binding isFavourite}" Command="{Binding Source={x:Reference MyCollectionPage}, Path=BindingContext.FavouriteButtonAction}" CommandParameter="{Binding .}"/>