CODEWITHSUNDEEP
wpfdata-bindingcombobox
Programmer
Programmer

Reputation: 381

Combobox with images items-WPF

I'm newbie on WPF and I would like to add images items to combobox which will read from hard disk according filter on it's name.

filter on images name should be binds to text property of different element.

Any advice?

Thanks!

Upvotes: 1

Views: 2258

Answers (2)

Anton Danylov
Anton Danylov

Reputation: 1491

It is a good example to show MVVM approach. Code below will do the job:

XAML

<Window x:Class="simplest.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:simplest"
                mc:Ignorable="d"
                Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBox x:Name="outputFolder" Height="30" Margin="5" Grid.Column="0" Text="{Binding Filter}"/>
        <ComboBox Height="30" Grid.Column="1" Margin="5" ItemsSource="{Binding Images}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image MaxWidth="64" MaxHeight="64" Source="{Binding}" />
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

C#

class MainWindowViewModel : INotifyPropertyChanged
{
    private string _filter;
    private ObservableCollection<string> _images = new ObservableCollection<string>();
    private readonly string _filesSearchPath = "d:\\";

    public MainWindowViewModel()
    {
        Filter = "*.jpg";
    }


    public string Filter
    {
        get
        {
            return _filter;
        }

        set
        {
            _filter = value;
            OnPropertyChanged();

            RefreshImagesCollection();
        }
    }

    public ObservableCollection<string> Images
    {
        get
        {
            return _images;
        }
    }

    private void RefreshImagesCollection()
    {
        _images.Clear();
        foreach (var fileName in Directory.GetFiles(_filesSearchPath, _filter))
        {
            _images.Add(fileName);
        }
    }

    private void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Upvotes: 3

Betson Roy
Betson Roy

Reputation: 141

ItemTemplate and ItemSource are the properties you need to set. ItemTemplate should point to Datatemplate and ItemSource to Collection of strings(path to images). This link will help you.

Upvotes: 1

Related Questions