web-dev-qa-db-ja.com

xamarinフォームで画像ソースを動的にバインドする

私の質問は、文字列画像を画像ソースにバインドできますか？複数の画像があり、画像はif条件で変更されます。そう：

Xamarinフォーム上のXaml：

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

分離コードc＃

   public String someImage;
    public String SomeImage
    {
        set
        {
            if (someImage != value)
            {
                someImage = value;                                        
            }
        }
        get
        {
            return someImage;
        }
    }

InitializeComponentパーツ：

if(true)
            {
                someImage = "backgroundListViewGren.png";
            }
            else
            {
                someImage = "backgroundListViewRed.png";
            }

画像はポータブルプロジェクトの「画像」フォルダにあります

しかし、これは機能しません。多分私は何かを書きますが、私は理解していません。解決策はありますか？

文字列ではなくImageSourceを試しましたが、うまくいきません。

c#imagexamarinbindingxamarin.forms
11
Mr. Developer

私が探していたものであり、他のほとんどの人がそうであると思うので、私はこの答えをここに投稿します（そしてGoogleは現在ここであなたを指示しますが、これは現在あまり役に立ちません）。

XAMLを使用して画像をバインドする方法：

XAML：

<Image>
    <Image.Source>
        <FileImageSource File="{Binding SomeImage}" />
    </Image.Source>
</Image>

次に、ViewModelで、C＃：

public string SomeImage
{
    get { return string.Format("prefix-{0}-suffix.png", OtherProperty); }
}

上記の代わりに使用できる、より優れた、しかし本質的に同等のc＃：

public string SomeImage => $"prefix-{OtherProperty}-suffix.png";

これは確かに設定する最も簡単な方法です、IMO :)。

編集：言うまでもなく、画像は明らかに各プラットフォームのプロジェクトのResourcesフォルダーにあるはずです。

13
Maverick

あなたが言った：

画像はポータブルプロジェクトの「画像」フォルダにあります

各プラットフォームには、リソースとイメージに対する異なるアプローチがあります。 Xamarinは、すべてのプラットフォームでXamarin.iOSにリソースが埋め込まれていることを処理しますが、Xamarin.Androidは画像にAndroidリソースを使用します。

Xamarin.Formsのすべてのプロジェクトに画像を配置して、各プラットフォームで画像を探す場所を確認する必要があります。

詳細については、 this をご覧ください。

3
Emad

PCLの画像を使用するには、 Xamarin documentation のこの部分を確認してください。

各画像のBuild actionがEmbedded Resourceに設定されていることを確認する必要があります。

次に、XAMLでそれらを使用する場合は、MarkupExtensionを指定します

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
  {
    if (Source == null)
    {
      return null;
    }
    // Do your translation lookup here, using whatever method you require
    var imageSource = ImageSource.FromResource(Source);

    return imageSource;
  }
}

これで、このように画像を使用できるようになります。

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.Microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WorkingWithImages;Assembly=WorkingWithImages"
    x:Class="WorkingWithImages.EmbeddedImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <!-- use a custom Markup Extension -->
    <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
  </StackLayout>
</ContentPage>

コメントで述べたように、これをそのまま使用したい場合は、それぞれのプラットフォームプロジェクトのResourcesフォルダーに配置します。このようにして、適切な自動サイズ設定メカニズムを活用することもできます。このメソッドの詳細については、この page を参照してください。

適切な名前付け規則で適切なフォルダーに追加することで、ファイル名を参照するだけで、Xamarin.Formsはそれをプラットフォームの適切な形式に変換します。

3
Gerald Versluis

私はそれをもう少し簡単にできると思います。これは私の作業中です。各プラットフォームの適切な場所に画像を置きます。 Androidのリソース/描画可能

Xamlで：

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

ビューモデルで：

private string _someImage = "icon_eye_hidden";
    public string someImage
    {

        get => this._someImage;
        set
        {

            if (this._someImage == value) return;

            this._someImage = value;
            this.RaisePropertyChanged(() => this.someImage);
        }
    }

次に、someImageに画像の名前（拡張子なし）を設定するだけで、更新されます。

0
George McKibbin