Develop Reference

Listview Selected Item as Image Source

I have a listview in my WPF app. Each item in the listview is a path of an image file. I'd like to show a thumbnail or preview of selected image on the listview.
MainWindow.xaml
<Image Source="{Binding SelectedImage}" />
<ListView x:Name="MyListView" AllowDrop="True" Drop="MyListView_Drop" />
MainWindow.xaml.cs
namespace MyWPFApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MyDataContext();
}
}
private void MyListView_Drop(object sender, DragEventArgs e)
{
string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
List<string> fileList = new List<string>(files);
foreach (string file in fileList)
{
if ((file.ToLower().EndsWith(".jpg") || file.ToLower().EndsWith(".jpeg") && !MyListView.Items.Contains(file))
{
MyListView.Items.Add(file);
}
}
}
public class MyDataContext : INotifyPropertyChanged
{
public string SelectedImage
{
get { return ((KeyValuePair<string, object>?)((MainWindow)Application.Current.MainWindow).MyListView.SelectedItem)?.Value?.ToString(); }
set
{
((MainWindow)Application.Current.MainWindow).MyListView.SelectedItem = value;
OnPropertyChanged(nameof(SelectedImage));
}
}
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
Currently, selecting an image on the listview does not do anything. Any help will be greatly appreciated.

Your ListView does not bind to the SelectedImage property.
Besides that, you should consider having an actual view model with an ObservableCollection property for the image files list in addition to the SelectedImage property.
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<string> Images { get; }
= new ObservableCollection<string>();
private string selectedImage;
public string SelectedImage
{
get { return selectedImage; }
set
{
selectedImage = value;
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(nameof(SelectedImage)));
}
}
}
You would bind to it in XAML like shown below (perhaps with a ListBox instead of a ListView, because it is simpler):
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding Images}"
SelectedItem="{Binding SelectedImage}"
AllowDrop="True" Drop="ListView_Drop"/>
<Image Grid.Column="1" Source="{Binding SelectedImage}" />
</Grid>
The code behind of the window:
public partial class MainWindow : Window
{
private readonly ViewModel viewModel = new ViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = viewModel;
}
private void ListView_Drop(object sender, DragEventArgs e)
{
var files = (string[])e.Data.GetData(DataFormats.FileDrop);
foreach (var file in files.Where(
f => (f.ToLower().EndsWith(".jpg") || f.ToLower().EndsWith(".jpeg"))
&& !viewModel.Images.Contains(f)))
{
viewModel.Images.Add(file);
}
}
}

Tree View Hierarchical DataTemplate Binding - MVVM

Here I'm trying to bind 'Solution' List to TreeView. Each 'Solution' has 'File' List and 'Solution Name'. I want to use Hierarchical DataTemplate to do this. In Debug mode I checked that 'Solution' List and 'File' list are successfully set. But in my view there is nothing shown.
In addition, in my view class when I try to set Data Type of the Hierarchical DataTemplate, it says "SolutionExplorerModel" does not exist int the namespace even though it does.
ViewModel
public class SolutionExplorerViewModel : INotifyPropertyChanged
{
private List<SolutionExplorerModel> _solutions = new List<SolutionExplorerModel>();
public List<SolutionExplorerModel> Solutions
{
get { return _solutions; }
set
{
_solutions = value;
RaisePropertyChanged("Solutions");
}
}
public SolutionExplorerViewModel()
{
Messenger.Default.Register<OpenFileDialog>(this, OnItemReceived);
}
private void OnItemReceived(OpenFileDialog openFile)
{
var solutionName = openFile.SafeFileName.Replace(".psim", "");
var files = new List<FileModel>();
var solutionPath = openFile.FileName.Replace(openFile.SafeFileName, "");
foreach(var file in Directory.EnumerateFiles(solutionPath, "*.xml"))
{
files.Add(new FileModel(file));
}
var newSolution = new SolutionExplorerModel
{
SolutionName = solutionName,
Files = files
};
_solutions.Add(newSolution);
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyThatChanged)
{
//checking if event is not null than raise event and pass
//in propperty name that has changed
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyThatChanged));
}
}
SolutionExplorerModel
public class SolutionExplorerModel : INotifyPropertyChanged
{
private string _solutionName;
public string SolutionName
{
get { return _solutionName; }
set
{
_solutionName = value;
RaisePropertyChanged("SolutionName");
}
}
private List<FileModel> _files;
public List<FileModel> Files
{
get { return _files; }
set
{
_files = value;
RaisePropertyChanged("Files");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyThatChanged)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyThatChanged));
}
}
FileModel
public class FileModel : INotifyPropertyChanged
{
private string _safeName;
public string SafeName
{
get { return _safeName; }
set
{
_safeName = value;
RaisePropertyChanged("SafeName");
}
}
private string _path;
public string Path
{
get { return _path; }
set
{
_path = value;
RaisePropertyChanged("Path");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyThatChanged)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyThatChanged));
}
public FileModel(string path)
{
this.Path = path;
this.SafeName = path.Split('\\').LastOrDefault();
}
}
View
<TreeView ItemsSource="{Binding Solutions}" DataContext="{Binding Source={StaticResource mainViewModelLocater}, Path=SolutionExplorerViewModel}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type model:SolutionExplorerModel}" ItemsSource="{Binding Files}">
<TextBlock Text="{Binding SolutionName}"></TextBlock>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>

This should work provided that the SolutionExplorerViewModel property of your mainViewModelLocater actually returns a populated SolutionExplorerViewModel:
<TreeView ItemsSource="{Binding Solutions}" DataContext="{Binding Source={StaticResource mainViewModelLocater}, Path=SolutionExplorerViewModel}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type model:SolutionExplorerModel}" ItemsSource="{Binding Files}">
<TextBlock Text="{Binding SolutionName}"></TextBlock>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type model:FileModel}">
<TextBlock Text="{Binding SafeName}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
Try to set the DataContext explicitly and make sure that you populate the Solutions collection:
treeView.DataContext = new SolutionExplorerViewModel();

WPF Combobox SelectedItem binding doesn't update from code

I have this combobox:
<ComboBox Grid.Column="1" SelectedItem="{Binding SelectedItem}" ItemsSource="{Binding Items, Mode=OneWay}" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
and this is the code:
public class CustomComboBoxViewModel
{
private bool DiscardSelChanged { get; set; }
public ObservableCollection<string> Items { get; set; }
public string SelectedItem
{
get { return _selectedItem; }
set
{
if (!DiscardSelChanged)
_selectedItem = value;
bool old = DiscardSelChanged;
DiscardSelChanged = false;
if (!old)
SelectionChanged?.Invoke(_selectedItem);
}
}
public event Action<string> SelectionChanged;
public void AddItem(string item)
{
var v = Items.Where(x => x.Equals(item)).FirstOrDefault();
if (v != default(string))
{
SelectedItem = v;
}
else
{
DiscardSelChanged = true;
_selectedItem = item;
Items.Insert(0, item);
}
}
}
At startup I have only one item: Browse.... selecting it i can browse for a file and add its path to the ComboBox. AddItem method is called
If the selected file path doesn't exists in Items i add and select it (this is working).
If the selected file path exists in Items i want to automatically select it without adding it to the list again. this doesn't work and Browse... is the visualized item.
I already tried to use INotifyPropertyChanged.
I'm using .NET 4.6.2. Any ideas to get it working?
EDIT 4:barebone example
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Windows;
namespace WpfApp2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
Items = new ObservableCollection<string>();
Items.Add(ASD);
}
private string ASD = #"BROWSE";
private string _selectedItem;
public string SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
OnPropertyChanged(nameof(SelectedItem));
UploadFileSelection_SelectionChanged();
}
}
public ObservableCollection<string> Items { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName) =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
private void AddItem(string item)
{
var v = Items.Where(x => x.Equals(item)).FirstOrDefault();
if (v != default(string))
SelectedItem = v;
else
{
Items.Add(item);
SelectedItem = item;
}
}
private void UploadFileSelection_SelectionChanged()
{
if (SelectedItem == ASD)
{
Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog()
{
DefaultExt = ".*",
Filter = "* Files (*.*)|*.*"
};
bool? result = dlg.ShowDialog();
if (result == true)
AddItem(dlg.FileName);
}
}
}
}
comboBox:
<ComboBox SelectedItem="{Binding SelectedItem}" ItemsSource="{Binding Items}"/>
try to:
- select FILE_A.txt
- select FILE_B.txt
- select FILE_A.txt again

I tried your example. I fixed the re-entrancy problem (double browse dialog) with a flag:
private bool _browsing = false;
private void UploadFileSelection_SelectionChanged()
{
if (_browsing)
{
return;
}
if (SelectedItem == ASD)
{
try
{
_browsing = true;
Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog()
{
DefaultExt = ".*",
Filter = "* Files (*.*)|*.*"
};
bool? result = dlg.ShowDialog();
if (result == true)
AddItem(dlg.FileName);
}
finally
{
_browsing = false;
}
}
}
It's caveman stuff but it works.
The real problem you have is that UploadFileSelection_SelectionChanged() is called, and updates SelectedItem before you exit the SelectedItem setter from the call that sets it to ASD.
So SelectedItem = v; in AddItem() has no effect on the combobox, because the combobox isn't responding to PropertyChanged right then.
This will fix that:
private void AddItem(string item)
{
var v = Items.FirstOrDefault(x => x.Equals(item));
if (v != default(string))
{
//SelectedItem = v;
Task.Run(() => SelectedItem = v);
}
else
{
Items.Add(item);
SelectedItem = item;
}
}
Now we're doing it later.
But note that the other branch does work, the one where item is newly added to the collection. You can also fake it out by removing item and adding it again:
private void AddItem(string item)
{
// Harmless, if it's not actually there.
Items.Remove(item);
Items.Add(item);
SelectedItem = item;
}
That looks weirder, but since it doesn't rely on thread timing, it's probably a better solution. On the other hand, this is "viewmodel" code whose details are driven by the peculiarities of the implementation of the ComboBox control. That's not a good idea.
This should be probably be done in the view (leaving aside that in this contrived example our view is our viewmodel).

You are setting _selectedItem without calling OnPropertyChanged() afterwards. That's why it is not working. If you want a clear code solution consider implementing the property with OnPropertyChanged() like this:
int _example;
public int Example
{
get
{
return _example;
}
set
{
_example = value;
OnPropertyChanged(nameof(Example);
}
}
Your code will be less error prone.
Do it as easy as possible:
public class ViewModel : INotifyPropertyChanged
{
public ObservableCollection<string> Strings { get; set; }
public ICommand AddAnotherStringCommand { get; set; }
string _selectedItem;
public string SelectedItem
{
get
{
return _selectedItem;
}
set
{
_selectedItem = value;
OnPropertyChanged(nameof(this.SelectedItem));
}
}
public int counter { get; set; } = 1;
public ViewModel()
{
// RelayCommand from: https://stackoverflow.com/questions/22285866/why-relaycommand
this.AddAnotherStringCommand = new RelayCommand<object>(AddAnotherString);
this.Strings = new ObservableCollection<string>();
this.Strings.Add("First item");
}
private void AddAnotherString(object notUsed = null)
{
this.Strings.Add(counter.ToString());
counter++;
this.SelectedItem = counter.ToString();
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Main Window:
<Window x:Class="Test.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:Test"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:ViewModel x:Name="ViewModel" />
</Window.DataContext>
<StackPanel>
<ComboBox ItemsSource="{Binding Strings}" SelectedItem="{Binding SelectedItem}"/>
<Button Content="Add another item" Command="{Binding AddAnotherStringCommand}" />
</StackPanel>
</Window>
In my case the value is changed every time, but you should be able to modify the code to fit your needs.
Make sure that you have a clear code structure and do not overcomplicate things.
If you want a more specific answer you should consider to present you whole code.

WPF: Update/refresh/rebind ItemSource?

I begin with some example code to illustrate my problem. But i'm new at this so it could be i'm missing some basic things. But the example is pretty close to what i would like to do.
XAML (main window):
<StackPanel>
<Button Click="ButtonRemove_Click">Remove</Button>
<Button Click="ButtonAdd_Click">Add</Button>
<TabControl Name="TabFilter" ItemsSource="{Binding Tabs}">
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Path=TextList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</StackPanel>
C# code:
public class TestText : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public string Text
{
get
{
return _Text;
}
set
{
_Text = value;
NotifyPropertyChanged();
}
}
private string _Text;
public TestText(string text)
{
Text = text;
}
}
public class Tabs : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public ObservableCollection<TestText> TextList { get; set; }
public Tabs(ObservableCollection<TestText> list)
{
this.TextList = list;
if (TextList.Count == 0)
TextList.Add(new TestText("Testing"));
}
}
public partial class MainWindow : Window
{
public ObservableCollection<TestText> TextList { get; set; }
public ObservableCollection<Tabs> Tabs { get; set; }
public MainWindow()
{
TextList = new ObservableCollection<TestText>();
Tabs = new ObservableCollection<Tabs>();
Tabs.Add(new Tabs(TextList));
InitializeComponent();
}
private void ButtonAdd_Click(object sender, RoutedEventArgs e)
{
Tabs.Add(new Tabs(TextList));
}
private void ButtonRemove_Click(object sender, RoutedEventArgs e)
{
Tabs.RemoveAt(0);
}
}
When i start the program i get one tab containing "Testing". I then click Remove to delete the tab. When i click Add a new tab is created.
And here is my problem. Since the collection is unchanged i expect, or would like to, that the newly created tab reflects the content in the collection. It should be a tab with the content "Testing", but the tab is empty.
What am i doing wrong?

It should be a tab with the content "Testing", but the tab is empty.
What you are seeing is not that the tab is empty, but instead no tab is selected. Since you removed all existing tabs, no remaining tab can keep the selection. So when the underlying collection is changed again to add another tab, that tab does not get selected automatically. If you click on the tab though to select it, the content is still there. You can actually see this by the way the tab header looks when it’s not selected.
Further note, that all your Tabs instances share the single TestText list you created in your MainWindow. So when you change the content in any tab, you are automatically changing the content in all tabs that exist, or will exist in the future, since all instances always get the same ObservableList instance passed.

Can't able to perform button click and combo box selection changed in WinRT MVVM

UPDATE 1 : You can download the sample project from here.
Can you please help me to find the error in my code. I can't able to assign item source to combo box as well as button click event in WinRT app. I am using MVVM and MetroEventToCommand. I am new to MVVM concept, so please answer my silly question.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Click Here">
<mvvm:EventToCommandManager.Collection>
<mvvm:EventToCommand Command="{Binding ButtonClickCommand}" Event="Click"/>
</mvvm:EventToCommandManager.Collection>
</Button>
<ComboBox x:Name="FontsCombo" Height="50" Width="150" SelectedItem="{Binding SelectedFont}" ItemsSource="{Binding fonts}" />
<TextBlock FontSize="30" Text="{Binding SelectedFont}"/>
</Grid>
public MainPage()
{
this.InitializeComponent();
this.DataContext = new VM();
}
public class VM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public RelayCommand ButtonClickCommand { get; set; }
private ObservableCollection<string> _fonts = new ObservableCollection<string>();
public ObservableCollection<string> fonts
{
get { return _fonts; }
set
{
_fonts = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("fonts"));
}
}
}
private string _SelectedFont = "";
public string SelectedFont
{
get { return _SelectedFont; }
set
{
// Some logic here
_SelectedFont = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("SelectedFont"));
}
}
}
public VM()
{
fonts.Add("Arial");
fonts.Add("Courier New");
fonts.Add("Times New Roman");
ButtonClickCommand = new RelayCommand(Click);
}
private void Click()
{
new Action(async () => await new Windows.UI.Popups.MessageDialog("Testing dialog").ShowAsync()).Invoke();
}
}

For the SelectedItem, you didn't specify the Mode=TwoWay :
<ComboBox x:Name="FontsCombo" Height="50" Width="150" SelectedItem="{Binding SelectedFont, Mode=TwoWay}" ItemsSource="{Binding fonts}" />
EDIT
I found the solution :
public class VM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public RelayCommand ButtonClickCommand { get; set; }
private ObservableCollection<string> _fonts;
public ObservableCollection<string> fonts
{
get { return _fonts; }
set
{
_fonts = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("fonts"));
}
}
}
private string _SelectedFont;
public string SelectedFont
{
get { return _SelectedFont; }
set
{
// Some logic here
_SelectedFont = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("SelectedFont"));
}
}
}
public VM()
{
this.fonts = new ObservableCollection<string>();
fonts.Add("Arial");
fonts.Add("Courier New");
fonts.Add("Times New Roman");
ButtonClickCommand = new RelayCommand(Click);
}
private void Click()
{
new Action(async () => await new Windows.UI.Popups.MessageDialog("Testing dialog").ShowAsync()).Invoke();
}
}
If I instance fonts in the constructor, the UX is not freezing anymore.