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> 

ので、質問は私がdatabからデータをロードするときです私はそれ上記のコードで

<!-- 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}"> 

ようFavoriteButtonの画像を初期化しないか、ASEハードコードされたが、私はWord.favorite値に依存変更したいです。実行時には、私はexamleのために、この

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

画像の表示を設定するファイル、Uriまたはリソースに画像のSourceをバインドすることができます。

• FromFile - 各プラットフォームで解決できるファイル名またはファイルパスが必要です。
• FromUri - Uriオブジェクトが必要です（例：新しいUri（ "http://server.com/image.jpg"）。
• FromResource - ビルドアクション：EmbeddedResourceを使用して、アプリケーションまたはPCLに埋め込まれたイメージファイルへのリソース識別子が必要です。

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は今、このようなものになります。つまり、と

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

を

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

は、あなたのコンバータは、あなたのXAMLファイルの先頭に住んでいる場所のための参照を追加する必要があると思いますが、あなたの

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(); 
    } 
} 
} 

あなたが埋め込まれたリソースではなく、ローカルファイルを使用している場合、その後のRohitは、8月24日に彼の答えに投稿されたリンクを参照してください。このようなコンバータ探して何か代わりにコンバーターでそれらをどのように使用するかに関するガイダンスについては、'16を参照してください。

Answer 4

DataTriggerまたはConverterは、問題の解決に最適です。

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