I have read loads of posts about this topic, but I cannot for the life of me figure this out, so your help is appreciated as I am losing the will to live!
I am trying to bind a list to a combobox in WPF, here is my code:
ViewModel:
public class ViewModelAddRegion
{
public List<DataAccessLayer.Model.CountryList> CountryList { get; set; }
public object GetCountryList()
{
List<DataAccessLayer.Model.CountryList> CountryList = new List<DataAccessLayer.Model.CountryList>();
CountryList = Data.DatabaseGets.GetAllCountries();
return CountryList;
}
}
So that gets my list. In the backing to my window, the code is:
public AddRegion()
{
var vm = new WineDatabase.ViewModel.ViewModelAddRegion();
var CountryAllList = vm.GetCountryList();
DataContext = CountryAllList;
InitializeComponent();
}
And finally, in my window:
<ComboBox Name="CountryList"
Margin="159,0,-160,0"
Grid.Row="1"
Grid.RowSpan="2"
ItemsSource="{Binding CountryAllList}"
DisplayMemberPath="CountryName"/>
Debugging, my list is populated as expected, but the combobox is forever empty.
Thanks for any assistance at all!
CountryAllList is just a local variable that you can't bind to. See the Data Binding Overview article on MSDN for details.
You should assign the ViewModel instance to the DataContext
var vm = new WineDatabase.ViewModel.ViewModelAddRegion();
vm.CountryList = vm.GetCountryList();
DataContext = vm;
and bind to its CountryList property
<ComboBox ItemsSource="{Binding CountryList}" ... />
Finally, in your GetCountryList method, it doesn't make much sense to assign the return value of Data.DatabaseGets.GetAllCountries() to a local variable. You could instead directly return it from the method.
public List<DataAccessLayer.Model.CountryList> GetCountryList()
{
return Data.DatabaseGets.GetAllCountries();
}
The GetCountryList() method may as well directly assign to the CountryList property
public void GetCountryList()
{
CountryList = Data.DatabaseGets.GetAllCountries();
}
and you could write the initialization code like this:
var vm = new WineDatabase.ViewModel.ViewModelAddRegion();
vm.GetCountryList();
DataContext = vm;
Change AddRegion method to:
public AddRegion()
{
var vm = new WineDatabase.ViewModel.ViewModelAddRegion();
vm.CountryList = vm.GetCountryList();
DataContext = vm;
InitializeComponent();
}
And in ComboBox set ItemsSource="{Binding CountryList}"
Related
This's my first question here, so hi everybody.
I'm working on the mobile app in Xamarin.Forms with Prism. I've created ListView where shown data from the database.
When the user clicks in the selected row app should navigate to a new view and pass the selected item from ListView.
<ListView x:Name="DefectsBase"
RowHeight="65"
ItemsSource="{Binding Defects}"
ItemSelected="ShowDetailsEvent"
IsPullToRefreshEnabled="true"
RefreshCommand="{Binding Refresh}"
IsRefreshing="{Binding IsRefreshing}">
Code backend:
async void ShowDetailsEvent(object sender, EventArgs e)
{
var myListView = (ListView)sender;
var myItem = myListView.SelectedItem;
var p = new NavigationParameters();
p.Add("selectedDefect", myItem);
await _navigationService.NavigateAsync("DefectDetailsView", p);
}
Unfortunately, the app doesn't respond to pressing the selected row in ListView.
As I can see you are already using Prism and you have a List page with Items and you want to navigate to some details page based on the selected/taped/chosen item which the user taps in the ListView.
The idea is to move as much code and logic as we can to the view model and keep our code-behind. This is pretty easy to solve using Prism and EventToCommand behaviour.
In the example and answer below, I will show you how to solve this with few lines of code, with a nice code approach.
First of all, I recommend you use EventToCommand behaviour, you can include it with prism xmlns, like this: xmlns:prism="http://prismlibrary.com", later on, you can use it with ListView.
Remove ItemSelected event from your ListView and move the markup about it to the <ListView.Behaviors> part. Here is my code sample for the ListView which binds to some ObserverableCollection of the Car models:
<ListView ItemsSource="{Binding Cars}">
<ListView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<prism:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding SelectedCarCommand}"
EventArgsParameterPath="Item" />
</ListView.Behaviors>
The main part here is <ListView.Behaviors>, where you can see that I am binding to the SelectedCarCommand which will be invoked when the user taps on some of the items from the list. I am using the ItemTapped event for this and passing the current "taped" item from the list as a parameter.
In order to follow this XAML part in my view model of this page, I have declared the DelegateCommand and method which will be called when the command is invoked. The view model part looks like this:
This is my CarListPageViewModel, take a look at DelegateCommand and SelectedCar method.
public class CarListPageViewModel
{
private readonly INavigationService _navigationService;
public ObservableCollection<Car> Cars { get; set; }
public DelegateCommand<Car> SelectedCarCommand { get; private set; }
public CarListPageViewModel(INavigationService navigationService, IDataProvider dataProvider)
{
_navigationService = navigationService;
// Insert test data into collection of Cars
Cars = new ObservableCollection<Car>(dataProvider.GetData());
SelectedCarCommand = new DelegateCommand<Car>(SelectedCar);
}
private async void SelectedCar(Car selectedCar)
{
NavigationParameters navigationParameters = new NavigationParameters
{
{ "selectedCar", selectedCar }
};
await _navigationService.NavigateAsync(nameof(CarDetailsPage), navigationParameters);
}
}
As you can see we have DelegateCommand defined with the type of parameter which will be passed, in my case, this is the Car class, the same class as our items in the ListView.
In the constructor, I did my initialization and defined the method which will be called, that method has a parameter of the type Car.
When the user taps on one of the items in the ListView, SelectedCar (method) will be called and we can pass the data to the next view using NavigationParameters and NavigationService.
In order to retrieve the passed data we can use INavigationAware in the details view model and with the OnNavigatedTo method, access the data which is being passed.
This is my CarDetailsPageViewModel, take a look at OnNavigatedTo method.
public class CarDetailsPageViewModel : BindableBase, INavigationAware
{
private string carTitle;
public string CarTitle
{
get { return carTitle; }
set { SetProperty(ref carTitle, value); }
}
private string photoUrl;
public string PhotoUrl
{
get { return photoUrl; }
set { SetProperty(ref photoUrl, value); }
}
public CarDetailsPageViewModel() { }
public void OnNavigatedTo(INavigationParameters parameters)
{
if (parameters.ContainsKey("selectedCar"))
{
Car car = parameters.GetValue<Car>("selectedCar");
if (car != null)
{
CarTitle = $"{car.Make} {car.Model}";
PhotoUrl = car.PhotoUrl;
}
}
}
public void OnNavigatedFrom(INavigationParameters parameters) { }
}
From this answer and example, you can see:
How to, use EventToCommand behaviour with ListView
Define and use DelegateCommand with passing parameter
How to navigate to another view and pass navigation parameter and
... finally how to access the passed data.
Code and this sample you can find on my GitHub profile here.
Hope this answer was helpful for you!
Wishing you lots of luck with coding! 👋
Here is the class of ChildViewModel:
public class ChildViewModel : Screen
{
private string imie = string.Empty;
private string nazwisko = string.Empty;
private string wiek = string.Empty;
private Person person;
private ObservableCollection<Person> personColl;
private MainViewModel mainView = new MainViewModel();
public ChildViewModel(Person person, ObservableCollection<Person> personColl)
{
this.person = person;
this.personColl = personColl;
this.Wyswietl();
}
public string ImieTxt
{
get => this.imie;
set
{
this.imie = value;
this.NotifyOfPropertyChange(() => this.ImieTxt);
}
}
public string NazwiskoTxt
{
get => this.nazwisko;
set
{
this.nazwisko = value;
this.NotifyOfPropertyChange(() => this.NazwiskoTxt);
}
}
public string WiekTxt
{
get => this.wiek;
set
{
this.wiek = value;
this.NotifyOfPropertyChange(() => this.WiekTxt);
}
}
public void Zmien()
{
this.personColl[mainView.DataGridIndex].Imie = this.ImieTxt;
this.personColl[mainView.DataGridIndex].Nazwisko = this.NazwiskoTxt;
this.personColl[mainView.DataGridIndex].Wiek = this.WiekTxt;
this.TryClose();
}
private void Wyswietl()
{
this.ImieTxt = this.person.Imie;
this.NazwiskoTxt = this.person.Nazwisko;
this.WiekTxt = this.person.Wiek;
}
}
I have no idea how to upload new data from ChildView to dataGrid in MainView, after clicking button "Zmien". In MainView I have dataGrid, where from MainViewModel I'm loading data from the list. After clicking button "Zmien", new data doesn't load in dataGrid.
Maybe you have any idea how to do it?
From my article on Codeproject Guide to WPF DataGrid Formatting Using Bindings:
Connecting a DataGrid with Business Data
Even connecting a DataGrid with the business data is not trivial. Basically, a CollectionViewSource is used to connect the DataGrid with the business data:
The CollectionViewSource does the actual data navigation, sorting, filtering, etc.
<Window.Resources>
<CollectionViewSource x:Key="ItemCollectionViewSource" CollectionViewType="ListCollectionView"/>
</Window.Resources>
<DataGrid
DataContext="{StaticResource ItemCollectionViewSource}"
ItemsSource="{Binding}"
AutoGenerateColumns="False"
CanUserAddRows="False">
//create business data
var itemList = new List<stockitem>();
itemList.Add(new StockItem {Name= "Many items", Quantity=100, IsObsolete=false});
itemList.Add(new StockItem {Name= "Enough items", Quantity=10, IsObsolete=false});
...
//link business data to CollectionViewSource
CollectionViewSource itemCollectionViewSource;
itemCollectionViewSource = (CollectionViewSource)(FindResource("ItemCollectionViewSource"));
itemCollectionViewSource.Source = itemList;
Define a CollectionViewSource in Windows.Resource
The gotcha here is that you must set the CollectionViewType. If you
don't, the GridView will use BindingListCollectionView, which does
not support sorting. Of course, MSDN does not explain this anywhere.
Set the DataContext of the DataGrid to the CollectionViewSource.
In the code behind, find the CollectionViewSource and assign your business data to the Source property
In this article, data gets only read. If the user should be able to edit the data, use an ObservableCollection. However, it is often better to leave the DataGrid readonly, because editing in the DataGrid behaves differently from what one is used from spreadsheet programs. It might be better if the user has to doubleclick on the row he wants to change and open another window just for editing that entity or adding a new one.
I need your help! Following is basically what I have in my main XAML view :
<Button x:Name="button1" Content= "{Binding Customer1, Mode=TwoWay}" Margin="271,52,103,106" Click="button1_Click" />
The code-behind of the main XAML (Code-behind, since it's not a 100% pure MVVM, and a rather hybrid one) goes like this :
public MainWindow()
{
InitializeComponent();
this.DataContext = new MyViewModel();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
DXDialog d = new DXDialog("Information", DialogButtons.OkCancel,true);
d.Content = new PropertyGrid();
d.SizeToContent = System.Windows.SizeToContent.WidthAndHeight;
d.Owner = this;
d.WindowStartupLocation = System.Windows.WindowStartupLocation.CenterOwner;
var result = d.ShowDialog();
if (result == true)
{
}
}
As you can see, I have a Button whose content is bound to a String property in the ViewModel Class. Upon Clicking the button, I'm opening a DXDialog which contains a PropertyGrid with the Properties of the ViewModel class. Let me show you my ViewModel Class below :
public class MyViewModel : ViewModelBase, INotifyPropertyChanged
{
Customer currentCustomer;
protected string _customer1;
public string Customer1 {
get { return this._customer1; }
set { this.SetProperty(ref this._customer1, value, "Customer1"); }
}
public MyViewModel()
{
//Customers = new ObservableCollection<Customer>();
//Customers.Add(new Customer() { Name = "Name1" });
Customer1 = "ABC";
}
}
In the Dialog I'm being able to edit the value of the property but don't yet know how I can save it in a way that it immediately reflects even on the button of the main View {Reflects everywhere it must be bound to, I mean}. I can see the execution coming to the following line in the main code behind
if (result == true)
{
}
But I don't know how to get the edited values and plug them into the right place.
Basically, My requirement is to have multiple controls (Buttons, in this case) bound to multiple instances of a ViewModel class, and then, upon clicking the buttons, I should be able to edit those specific ViewModel instances inside the PropertyGrid of the DXDialogue, and after clicking "Ok", the changes should reflect on the relevant buttons as well.
-Ron
To display ViewModel's properties in the PropertyGrid, assign the ViewModel to its SelectedObject property,and make sure that the ShowProperties option is set to All.
Changes will be reflected in buttons bound to the ViewModel only of you use one and the same ViewModel instance in the main and the dialog windows.
var grid = new PropertyGrid();
grid.SelectedObject = this.DataContext;
grid.ShowProperties = ShowPropertiesMode.All;
d.Content = grid;
I populate my listview like this from my sqlite database
private async void getBowlers()
{
SQLiteAsyncConnection conn = new SQLiteAsyncConnection(BOWLERS_DATABASE);
var query = conn.Table<Bowler>();
var result = await query.ToListAsync();
List<String> names = new List<String>();
foreach (var item in result)
{
names.Add(item.Name);
}
itemListView.ItemsSource = names;
}
when I click on one of the items in the list, how can I get the data associated with the clicked item?
since I am just populating the list with a list of strings I really dont see how I can associate any data with it so is there another way to populate my listview? Even just getting the ID would be fine then I could just query based on the ID
You can bind your ListView to an object, rather than just a string. If you do so, when an item is clicked, you will get back the object. In your case, you can bind to the Bowler object, which I assume has an ID and Name field:
public class Bowler
{
public int Id { get; set; }
public string Name { get; set; }
}
In your XAML, you have to tell the ListView that you want to bind the Name field. Here is a simple ListView that just has a TextBlock for each item:
<ListView x:Name="itemListView" ItemsSource="{Binding}"
IsItemClickEnabled="True" ItemClick="itemListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the above, the TextBlock will display the Name field.
To load items into the list, you could change your above method to look something like:
// Unrelated, but generally you want to use "async Task"
// in the method signature. "async void" should only be used by
// event handlers, such as a click event.
private async Task getBowlers()
{
SQLiteAsyncConnection conn = new SQLiteAsyncConnection(BOWLERS_DATABASE);
var query = conn.Table<Bowler>();
var result = await query.ToListAsync();
// set page's data context to bowler collection
this.DataContext = result;
}
Now when an item is clicked, you will get back the related Bowler object:
private void itemListView_ItemClick(object sender, ItemClickEventArgs e)
{
Bowler bowler = (Bowler)e.ClickedItem;
// do something with bowler...
}
More info: Windows 8 Metro App ListView Binding and Editing
I've got DataGrid bound to an ObservableCollection<> in its ViewModel:
<DataGrid ItemsSource="{Binding Path=Data}" SelectedItem="{Binding Path=CurrentItem}" />
ViewModel:
public ObservableCollection<TestModel> Data { get; set; }
private TestModel _currentItem;
public TestModel CurrentItem
{
get { return _currentItem; }
set
{
_currentItem = value;
RaisePropertyChanged("CurrentItem");
}
}
Now what I want is, that the DataGrid will preselect the first Row right on Form-startup. So I put the following in my test-code inside the constructor:
Data = new ObservableCollection<TestModel>
{
new TestModel() { Property1 = Guid.NewGuid().ToString() },
new TestModel() { Property1 = Guid.NewGuid().ToString() },
new TestModel() { Property1 = Guid.NewGuid().ToString() }
};
CurrentItem = Data[0];
The data is displayed but the first row isn't selected by the grid. Even if I set the binding to TwoWay, it won't work.
If I remove the SelectedItem-binding in XAML and add the following in Code-behind, it works well:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
var m = this.DataContext as MainViewModel;
grid.SelectedItem = m.CurrentItem;
}
What's happening is that your VM is being assigned to the data context before the window is initialized and therefore never receives the message that the CurrentItem has changed because it was changed before it loaded.
What I do, is pass in the view model into View's constructor and set it after the InitializeComponent() function is called. Because I am using Prism I am using inversion of control (IOC) and Prism knows to input my VM into the constructor. If you are instantiating your view and view model yourself, you can just pass in the view model. I ran into the same issue and this works.
public MyView(IMyVM viewModel)
{
InitializeComponent();
this.DataContext = viewModel;
}
By the way, in working with MVVM, I see no reason not to pass in the ViewModel into the View because the view is dependent on it anyway. I know some people feel differently but it is either this or you will have to so some type of refresh of the datacontext in the Window_Loaded event.