c# - 画像付きの WPF ComboBox

Question

コンボに画像を入力しようとしています。次のように定義されています。

<ComboBox SelectedItem="{Binding SelectedLangComboItem}"
          ItemsSource="{Binding Languages}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" />
                <TextBlock Text="{Binding Label}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

項目は LanguageItem クラスです。

public class LanguageItem
{
  public System.Drawing.Bitmap Image { get; set; }
  public string Label { get; set; }
  public string Culture { get; set; }

  public LanguageItem(System.Drawing.Bitmap image, string label, string culture)
  {
    Image = image;
    Label = label;
    Culture = culture;
  }
}

今、私の ViewModel c'tor で次のことを行います。

  _Languages = new ObservableCollection<LanguageItem>();

  System.Reflection.Assembly app = System.Reflection.Assembly.GetExecutingAssembly();
  System.IO.Stream file;
  file = app.GetManifestResourceStream("MyNamespace.Images.FLAG1.gif");
  _Languages.Add(new LanguageItem(new Bitmap(file), "ITALIAN", "it-IT"));
  file = app.GetManifestResourceStream("MyNamespace.Images.FLAG2.gif");
  _Languages.Add(new LanguageItem(new Bitmap(file), "ENGLISH", "en-EN"));

  this.SelectedLangItem = _Languages[0];

画像は埋め込みリソースです。ここで 2 つの問題があります。

画像は表示されません。
Item は選択されていません。SelectedLangItem は次のとおりです。

public LanguageItem SelectedLangItem { get { return _SelectedLangItem; } セット { if (_SelectedLangItem == value) return;
```
    _SelectedLangItem = value;
    this.RaisePropertyChanged("SelectedLangItem");
  }
}
```

score 5 · Accepted Answer

使用する

new BitmapImage(new Uri("MyNamespace.Images.FLAG1.gif", UriKind.Relative));

ImageSource を実装する必要があるため

選択されていないことについて：タイプミスしていない場合、xaml SelectedLangComboItem ではプロパティ名は「SelectedLangItem」です。

コード：

this.RaisePropertyChanged("SelectedLangItem");

XAML:

<ComboBox SelectedItem="{Binding SelectedLangComboItem}"

score 5 · Accepted Answer

Imageあなたの問題は、タイプのImage.SourceプロパティにをバインドしようとしていることですImageSource。

最も簡単な解決策は、実際の画像ファイルをフォルダーに追加Imageし、クラスのプロパティを、画像へのファイルパスを次の形式で保持する文字列に変更することです。

/ApplicationName;component/ImageFolderName/ImageName.png

次に、この文字列 (フレームワークがオブジェクトに変換しImageSourceます) を .xml のImage.Sourceプロパティに正しくバインドできますDataTemplate。

score 2 · Accepted Answer

以下のxamlコードを試して、画像リストをコンボボックスにバインドしてください...

<Window.Resources>
        <DataTemplate x:Key="cmbTemplate">
            <WrapPanel Margin="0 5 0 5" Height="80">
                <Image Width="65" Height="65" Stretch="Fill" Source="{Binding Photo}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,15,0"/>
                <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
            </WrapPanel>
        </DataTemplate>
    </Window.Resources>

    <StackPanel HorizontalAlignment="Center">
        <Label Content="Dropdown list with Image" HorizontalAlignment="Center" FontSize="30" Margin="20"/>
        <ComboBox x:Name="lstwithimg" HorizontalAlignment="Center" VerticalAlignment="Top" ItemTemplate="{StaticResource cmbTemplate}" Height="80" Width="400"/>
    </StackPanel>

以下を確認してください...ライブの例をさらに理解するには...

http://www.codescratcher.com/wpf/wpf-combobox-with-image/

c# - 画像付きの WPF ComboBox

3 に答える 3

Related

Reference