I have a Page with a repository dependency, and a Combobox in the page I want to bind to a certain method of the dependency
public class MyPage : Page
{
private Dependency dep {get; set;} //method: GetAll() - returns IEnumerable<Foo>
...
}
I would like to bind the combobox in the xaml rather than in the code behind.
It seems I have to point the DataContext property of the page to the page itself
DataContext="{Binding RelativeSource={RelativeSource Self}}"
But after that I have no idea on how to continue.
Obviously in the codebehind it would be
mycombobox.ItemsSource = dep.GetAll();
mycombobox.DisplayValuePath = "FooName";
mycombobox.SelectedValuePath = "FooId";
No idea what class Dependency is, but how about just adding another property, that you can bind to:
public class MyPage : Page
{
public Dependency Dep { get; set; }
public IEnumerable<Foo> AllDeps
{
get { return Dep.GetAll(); }
}
}
Now you could bind a ComboBox like
<ComboBox ItemsSource="{Binding Path=AllDeps}" />
As an alternative, you may declare AllDeps as ObservableCollection, and add elements when needed:
public class MyPage : Page
{
public Dependency Dep { get; set; }
public ObservableCollection<Foo> AllDeps { get; set; }
public MyPage()
{
AllDeps = new ObservableCollection<Foo>();
InitializeComponent();
// initialize Dep
foreach (var d in Dep.GetAll())
{
AllDeps.Add(d);
}
}
}
Related
I've been trying to do the following thing in WPF:
A window with a login-page and a home-page.
Upon successfully authenticating a user, the window should display the home-page.
It should work by using the native WPF dependency injection framework.
But also...
There might be a page 3, 4, 5 and each of these pages should be able to call one another.
And maybe each of these pages could have pages inside them that can also call each other.
So the solution should be able to work with nested pages and navigations if possible.
What I have:
So, after looking for solutions in the stack forum I ended up with this composition approach.
Starting by the App.xaml, all services and viewmodels are initialized and the main window receives its viewmodel by injection:
private void ConfigureServices(ServiceCollection services)
{
services.AddSingleton<MainWindow>();
//ViewModels
services.AddSingleton<MainViewModel>();
services.AddSingleton<AuthViewModel>();
services.AddSingleton<HomeViewModel>();
}
private void OnStartup(object sender, StartupEventArgs e)
{
var mainWindow = serviceProvider.GetService<MainWindow>();
mainWindow.DataContext = serviceProvider.GetService<MainViewModel>();
mainWindow.Show();
}
Then, the mainViewModel receives by injection every other viewmodel and stores them in a property.
public class MainViewModel
{
public IPageViewModel SelectedPage {get; set; } //PropertyChanged() removed for brevity.
public ObservableCollection<IPageViewModel> Pages {get; set;}
public MainViewModel(AuthViewModel authViewModel, HomeViewModel homeViewModel)
{
this.Pages = new ObservableCollection<IPageViewModel>() { authViewModel, homeViewModel};
this.SelectedPage = this.Pages.First();
}
}
All page viewmodels inherit from this interface so they can be retrieved from the collection by name and then added as the SelectedPage when needed.
public interface IPageViewModel : INotifyPropertyChanged
{
public string PageTitle { get; set; }
}
The window has a content control with a property content bound to the SelectedPage so it's updated.
<Window>
<ContentControl Content="{Binding SelectedPage}" />
</Window>
And it knows which view to use for each viewmodel by these data templates.
<Application.Resources>
<DataTemplate DataType="{x:Type vm:AuthViewModel}">
<views:AuthView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:HomeViewModel}">
<views:HomeView />
</DataTemplate>
</Application.Resources>
But then... I noticed that this won't work, I can only call changes on the SelectedPage from within the mainViewModel.
public class AuthViewModel : BaseViewModel
{
public AuthViewModel() { }
public void AttemptLogin() {
// how
SelectedPage = Pages[1];
}
}
Issues
I could perhaps inject the mainviewmodel in all child models, but that would not look good and in fact from the start a lot of things are kind of a mess.
For example, I have to:
Add a service viewmodel for every viewmodel I create to the app.xaml.
Add each one of them as a parameter of the mainwindow viewmodel which looks ugly.
I'm probably doing this very wrong, I need help.
There are many possible solutions. A simple one is to introduce an event.
I also recommend to move and restrict the responsibility to select view models to the MainViewModel. Other page models should not be aware of the flow like who selects who. Otherwise this would add a too tight coupling, which is avoidable at this point.
public class MainViewModel
{
public IPageViewModel SelectedPage { get; set; }
private Dictionary<string, IPageViewModel> Pages { get; }
public MainViewModel(AuthViewModel authViewModel, HomeViewModel homeViewModel)
{
authViewModel.AuthenticationPassed += OnAuthenticationSuccessfull;
this.Pages = new Dictionary<string, IPageViewModel>()
{
{ nameof(AuthViewModel), authViewModel },
{ nameof(HomeViewModel), homeViewModel }
};
this.SelectedPage = this.Pages[nameof(AuthViewModel)];
}
public OnAuthenticationSuccessfull(object sender, EventArgs e)
{
(sender as AuthViewModel).AuthenticationPassed -= OnAuthenticationSuccessfull;
this.SelectedPage = this.Pages[nameof(HomeViewModel)];
}
}
class AuthViewModel
{
public event EventHandler AuthenticationPassed { get; }
...
}
I am using a Gong Framework in my project.
I've created the following DropHandler.
Xaml:
<ListBox ItemsSource="{Binding Collection}" dd:DragDrop.IsDropTarget="True" dd:DragDrop.DropHandler="{Binding}"/>
ViewModel:
class MyViewModel : IDropTarget
{
ObservableCollection<SomeType> Collection;
public void DragOver(IDropInfo dropInfo)
{
// ...
}
public void Drop(IDropInfo dropInfo)
{
// ...
}
}
Problem. I want to and another DropHandler for another ListBox in this window. But I don't know, how can I do it. How can I implement interface IDropTarget again?
You can't implement the interface "again" in the same class but you could bind the DropHandler property to an IDropTarget property of the view model:
dd:DragDrop.DropHandler="{Binding FirstDropTarget}"
You would then create a new class to handle the dropping. If you need a reference to the view model, you could inject it into the IDropTarget implementation, e.g.:
class MyViewModel
{
ObservableCollection<SomeType> Collection;
public MyViewModel()
{
FirstDropTarget = new YourHandler(this);
SecondDropTarget = new YourOtherHandler(this);
}
public IDropTarget FirstDropTarget { get; }
public IDropTarget SecondDropTarget { get; }
}
I'm trying to make a listview in xamarin show data from a restapi but have the option to filter the list or sort it based upon last name.
I've set the bindingcontext equal to the apiviewmodel which works. But I want to set the itemssource to a list which can be manipulated later instead of the binding context.
Here is the code that works:
Xaml:
<ListView x:Name="DirectoryListView" ItemsSource="{Binding ContactsList}" IsPullToRefreshEnabled="True">
Xaml.cs:
LocalAPIViewModel = new APIViewModel();
BindingContext = LocalAPIViewModel;
APIViewModel.cs:
private List<MainContacts> _ContactsList { get; set; }
public List<MainContacts> ContactsList
{
get
{
return _ContactsList;
}
set
{
if(value != _ContactsList)
{
_ContactsList = value;
NotifyPropertyChanged();
}
}
}
public class MainContacts
{
public int ID { get; set; }
public string FirstName { get; set; }
}
This all works fine. It's only when I add the following lines that it stops displaying the data in the listview:
xaml.cs:
LocalList = LocalAPIViewModel.ContactsList;
DirectoryListView.ItemsSource = LocalList;
I think I need to add these lines so that I can manipulate the list that's being displayed. Why is the list not being displayed? Is this not how it should be done?
According to your description and code, you use MVVM to bind ListView firstly, it works fine, now you want to use Viewmodel to bind ListView itemsource in xaml.cs directly, am I right?
If yes,I do one sample according to your code, that you can take a look, the data can display successfully.
public partial class Page4 : ContentPage
{
public APIViewModel LocalAPIViewModel { get; set; }
public Page4 ()
{
InitializeComponent ();
LocalAPIViewModel = new APIViewModel();
listview1.ItemsSource = LocalAPIViewModel.ContactsList;
}
}
public class APIViewModel
{
public ObservableCollection<MainContacts> ContactsList { get; set; }
public APIViewModel()
{
loadddata();
}
public void loadddata()
{
ContactsList = new ObservableCollection<MainContacts>();
for(int i=0;i<20;i++)
{
MainContacts p = new MainContacts();
p.ID = i;
p.FirstName = "cherry"+i;
ContactsList.Add(p);
}
}
}
public class MainContacts
{
public int ID { get; set; }
public string FirstName { get; set; }
}
so I suggest you can check ContactsList if has data.
Update:
I want to be able to search the list with a search bar and also order it by first or last names. I also want to be able to click on one of the contacts and open up a separate page about that contact
I do one sample that can meet your requirement, you can take a look:
https://github.com/851265601/xf-listview
So, to answer all your questions...
First, the binding.
Once you set the ItemsSource="{Binding ContactsList}" this means that anytime you signal that you have changed your ContactsList by calling OnPropertyChanged(), that is going to be reflected on the ItemsSource property (so, update the UI - that is why we put the OnPropertyChanged() into the setter). Thus, you do not need to manually set the ItemsSource every time you change it. (Especially from the View, as the View should have no knowledge of how the ContactsList is defined in the ViewModel.)
So you can completely remove those lines from the View's code-behind.
Next, the ordering and searching.
What OnPropertyChanged() does, is that it re-requests the bound property from the ViewModel, and updates the View according to that. So, just after OnPropertyChanged() is called, the getter of the bound property (ContactsList) is called by the View.
So, a good idea is to put the sorting mechanism into the getter of the public property. (Or the setter, when resetting the property.) Something like this:
public class ViewModel {
private ObserveableCollection<MainContacts> contactList { get; set; }
public ObserveableCollection<MainContacts> ContactList {
get {
return new ObservableCollection<MainContacts>(contactList
.Where(yourFilteringFunc)
.OrderBy(yourOrderingFunc));
}
set {
contactsList = value;
OnPropertyChanged();
}
}
//...
}
So, whenever your public property is called, it will sort the private property and return the collection that way.
Change public List<MainContacts> ContactsList to public ObservableCollection<MainContacts> ContactsList
in xaml.cs
instead of LocalList = LocalAPIViewModel.ContactsList;, put
ContactsList = new ObservableCollection(LocalAPIViewModel.ContactsList);
I think this will work, instead of setting ListView's Itemsource to 'LocalList'
I've a question on VM communication.
Here's my code in C#/WPF app.On my MainWindow.xam,I've a button.
On click of this button,
I need to access and modify the ProductList collection from within another ViewModel.
How do I achieve this please?
public List<ProductInfo> ProductList { get; private set; }
private MainWindow m_mvWindow = null;
public MainWindowViewModel(MainWindow window)
{
this.m_mvWindow = window;
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel(this);
}
}
Thanks.
The simplest solution would be to expose your other VM as a property of MainWindowViewModel, pass the child VM a reference to the ProductList collection and have an ICommand on the child VM which is bound to the button in your XAML and which handles the collection modifications.
Something like this:
Main VM
public class MainViewModel
{
<!-- Your stuff ->
public ChildViewModel ChildViewModel
{
if(_childViewModel == null)
{
_childViewModel = new ChildViewModel(ProductList)
}
return _childViewModel;
}
}
Child VM
public class ChildViewModel
{
private List<ProductInfo> _products;
public DelegateCommand ClearCollection {get; set;}
public ChildViewModel(List<ProductInfo> products)
{
_products = products;
ClearCollection = new DelegateCommand(OnClearCollection);
}
private void OnClearCollection()
{
_products.Clear();
}
}
And in the xaml...
<Button Command={Binding ChildViewModel.ClearCommand} Content="..." />
You can use either of these ways:
Create an event in the other view model and handle it in the main view model. That would be the preferred way, since it does avoid coupling your child VM to the main VM, which is poor design.
Pass the collection to the child VM in a constructor. Try to avoid passing the full main VM, again to avoid coupling.
I'm struggling to find a solution to the problem of having to maintain two lists.
I'm using MVVM, but don't want my model to use ObservableCollection. I feel this is best to encapsulate and allows me to use different views/patterns (a console for example). Instead of setting up my structure like this:
public class MainWindow {
// handled in XAML file, no code in the .cs file
}
public abstract class ViewModelBase : INotifyPropertyChanged {
// handles typical functions of a viewmodel base class
}
public class MainWindowViewModel : ViewModelBaseClass {
public ObservableCollection<Account> accounts { get; private set; }
}
public class Administrator {
public List<Account> accounts { get; set; }
public void AddAccount(string username, string password) {
// blah blah
}
}
I would like to avoid having two different collections/lists in the case above. I want only the model to handle the data, and the ViewModel to responsible for the logic of how its rendered.
what you could do is to use a ICollectionView in your Viewmodel to show your Model Data.
public class MainWindowViewModel : ViewModelBaseClass {
public ICollectionView accounts { get; private set; }
private Administrator _admin;
//ctor
public MainWindowViewModel()
{
_admin = new Administrator();
this.accounts = CollectionViewSource.GetDefaultView(this._admin.accounts);
}
//subscribe to your model changes and call Refresh
this.accounts.Refresh();
xaml
<ListBox ItemsSource="{Binding accounts}" />