Xamarin.Forms ListView

Question

Я делаю словарное приложение и пытаюсь реализовать любимое слово в моем Xamarin.Forms Listview.

Пожалуйста, смотрите скриншоты ниже

теперь я использовать жесткий код вместо MVVM Вот моя модель

namespace Mamtil.Models 
{ 
    public class Word 
    { 
     public int Id { get; set; } 
     public string word { get; set; } 
     public string translation { get; set; } 
     public string audio { get; set; } 
     public bool favorite { get; set; } 
     public string groupBy => translation[0].ToString().ToUpper(); 
    } 
} 

XAML

... 
     <ViewCell> 

     <StackLayout Orientation="Horizontal"> 
      <Button x:Name="FavoriteButton" Image="gray_star.png" BackgroundColor="#F5F5F5" Clicked="Favorite" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding .}" /> 
      <Switch IsToggled="{Binding favorite}" WidthRequest="50"/> 
      <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Margin="5, 0, 0, 0"> 
      <Label Text="{Binding translation}"> 
       <Label.FontSize> 
       <OnPlatform x:TypeArguments="x:Double" iOS="11" Android="18" /> 
       </Label.FontSize> 
      </Label> 
      <Label Text="{Binding word}" TextColor="#1565C0"> 
       <Label.FontSize> 
       <OnPlatform x:TypeArguments="x:Double" iOS="11" Android="13" /> 
       </Label.FontSize> 
      </Label> 
      </StackLayout> 

      <Button x:Name="SpeechButton" Image="ic_mic_black_24dp.png" BackgroundColor="#F5F5F5" Clicked="GoToSpeach" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding Id}" /> 
     </StackLayout> 

     </ViewCell> 

Так вопрос заключается в том, когда я загружаю данные из базы данных аза как я инициализировать Изображение FavoriteButton как

<!-- Here switch is toggled or not depending on Binding value. I want to do something like this but with image of Button --> 
<Switch IsToggled="{Binding favorite}"> 

в коде выше она закодирована, но я хочу, чтобы изменить значение в зависимости Word.favorite. Во время выполнения я сумел изменить изображение, как этот

async void Favorite(object sender, EventArgs e) 
    { 
     var b = (Button)sender; 
     Word t = (Word)b.CommandParameter; 
     //update in database 
     await App.MamtilRepo.UpdateFavoriteAsync(t.Id); 

     if (t.favorite) 
      b.Image = "gray_star.png"; 
     else 
      b.Image = "yellow_star.png"; 

     t.favorite = !t.favorite; 
    } 

ради нелогич-:

... 
// Some thing like 
if(Word.favorite) 
    Image = yellow_star.png; 
else 
    Image = gray_star.png; 

я должен сделать это где- в коде или в XAML

Я надеюсь, что может четко описать свои вопрос. спасибо заранее

Answer 1

Вы можете Bind вашего изображения Source в файл, Ури или ресурс, который задает изображение для отображения.

• FromFile - требуется имя файла или путь к файлу, который может быть разрешен на каждой платформе.
• FromUri - Требуется объект Uri, например. новый Uri («http://server.com/image.jpg»).
• FromResource - Требуется идентификатор ресурса в файл образа встроенного в приложение или PCL, с сборки действий: EmbeddedResource.

XAML:

<Image Source="{Binding MyImage}" /> 

ViewModel:

public ImageSource MyImage {get; set; } 

Вы можете прочитать больше о работе с изображениями here.

Answer 2

Вам нужно будет использовать метод OnPropertyChanged(), чтобы он собирал новое значение для Url изображения, и вы также должны настроить контекст привязки.

private bool _imageUrl; 
public bool ImageUrl 
{ 
    get { return _imageUrl; } 
    set { _imageUrl = value; OnPropertyChanged(); } 
} 

И используйте в своем конструкторе BindingContext = this;.

Answer 3

старый пост, но вот еще один способ сделать это. Классически для этого используется конвертер. Так что ваша кнопка XAML теперь будет выглядеть примерно так:

<Button x:Name="FavoriteButton" Image="{Binding favorite, Converter={x:Static converter:FavoriteButton.Instance}}" BackgroundColor="#F5F5F5" Clicked="Favorite" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding .}" /> 

вы должны добавить ссылку на ваш конвертер, где живет в верхней части файла XAML, т.е.

xmlns:converter="clr-namespace:Mamtil.Converter;assembly=Interact.Client" 

с вашим конвертер ищет что-то вроде этого:

namespace Mamtil.Converter { 
public class FavoriteButton : IValueConverter { 
// this Instance property just means your converter only needs to get created once, I saw it in a Xamarin sample. 
    public static FavoriteButton Instance = new FavoriteButton(); 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { 
     if (value == null) { 
      // only doing this because I've had encounters where an ImageSource has taken Exception at having null returned. 
      return ImageSource.FromFile("gray_star.png"); 
     } 
     var fav = (bool)value; 
     if (fav == true) { // redundant ==, but it makes it quite explicit for any future reader glancing over your code what you intend here. 
      return ImageSource.FromFile("yellow_star.png"); 
     } 
     return ImageSource.FromFile("gray_star.png"); 
    } 

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

Если вы используете встроенные ресурсы, а не локальные файлы, то обратитесь к ссылке Рохит разместил в своем ответе от 24 августа '16, чтобы узнать, как использовать их в конвертере.

Answer 4

DataTrigger или конвертер - лучшее решение для вашей проблемы.

<Button Image="gray_star.png"> 
    <Button.Triggers> 
     <DataTrigger TargetType="Button" Binding="{Binding favorite}" Value="True"> 
      <Setter Property="Image" Value="yellow_star.png" /> 
     </DataTrigger> 
    </Button.Triggers> 
</Button>