Loading

WPF ComboBox下拉列表显示图片Image

下拉列表对应的实体,ViewBase参考(https://www.cnblogs.com/Stay627/p/13965451.html)

    public class ImgCombobox : ViewBase
    {
        private BitmapImage photo;
        private string name;

        public BitmapImage Photo { get => photo; set => UpdateProper(ref photo, value); }
        public string Name { get => name; set => UpdateProper(ref name, value); }
    }

定义下拉列表内容模板,Photo、Name字段对应ImgCombobox实体中的Photo、Name属性

Page换成你对应的界面类型

<Page.Resources>
        <DataTemplate x:Key="cmbTemplate">
            <WrapPanel VerticalAlignment="Center">
                <Viewbox Height="16">
                    <Image Source="{Binding Photo}" RenderOptions.BitmapScalingMode="HighQuality" UseLayoutRounding="True" SnapsToDevicePixels="True" />
                </Viewbox>
                <TextBlock Text="{Binding Name}" Margin="10,0,0,0"/>
            </WrapPanel>
        </DataTemplate>
</Page.Resources>

 设置下拉列表的ItemTemplate静态资源,设置ItemsSource数据源与SelectedItem行对象

<ComboBox x:Name="uiCmbVer" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180" Height="30" 
    ItemTemplate
="{StaticResource cmbTemplate}" ItemsSource="{Binding CmbListDirection}" SelectedItem="{Binding CmbItemVertical}">
</
ComboBox>

 后台设置数据源

public ImgCmbDemo()
{
  InitalzeComponent();
  view = new ImgCmobobox();
  this.DataContext = view;
  view.CmbListDirection = new List<ImgCombobox>()
  {
    new ImgCombobox()
    {
      Name = "张三",
      Photo=new BitmapImage(new Uri(fileName+"photo1.png",UriKind.Absolute))
    },new ImgCombobox()
    {
      Name = "李四",
      Photo = new BitmapImage(new Uri(fileName+"photo2.png",UriKind.Absolute))
    }
  };
}
ImgCmobobox view;
static string fileName = "pack://application:,,,/Images/";

 

posted @ 2021-03-02 16:16  Stay627  阅读(787)  评论(0编辑  收藏  举报