WPF MVVM pattern - wpf

i am doing a simple project with mvvm pattern. its about one list that every row has one textbox and delete button and at
buttom we have one text box and add button like this:
name1 buttondelete
name2 buttondelete
name3 buttondelete
.
.
textbox buttonadd
with click the buttondelete the row should delete and with click bottonadd the text of textbox should insert in list as new
row.
i have three layer Sepand.WPFProject.Model , Sepand.WPFProject.ViewModel , Sepand.WPFProject.View;
in model i have context and repository and model (here my model is Category that have Name & ID property) class. repository is like this:
public class ModelRepository<T>
where T : class
{
ModelDbContext ctx = new ModelDbContext();
public IQueryable<T> GetAll()
{
IQueryable<T> query = ctx.Set<T>();
return query;
}
public void Add(T entity)
{
ctx.Set<T>().Add(entity);
ctx.SaveChanges();
}
public void Delete(T entity)
{
ctx.Set<T>().Remove(entity);
ctx.SaveChanges();
}
in viewModel i have categoryViewModel class like this:
public class CategoryViewModel
{
ModelRepository<Category> repository = new ModelRepository<Category>();
ObservableCollection<Category> categories = new ObservableCollection<Category>();
Category category = new Category();
public ObservableCollection<Category> GetAll()
{
IQueryable<Category> categoryRepository = repository.GetAll();
foreach (Category Category in categoryRepository)
categories.Add(Category);
return categories;
}
public ObservableCollection<Category> GetAllCategories
{
get { return GetAll(); }
}
public string TxtName
{
get { return category.Name; }
set { category.Name = value; }
}
in View in code behind i have
this.DataContext = new CategoryViewModel();
and in XAML i have
<Window.Resources>
<DataTemplate x:Key="CategoryTemplate">
<Border Width="400" Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4">
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Width="300" Margin="5" Text="{Binding Path=Name}"></TextBlock>
<Button Name="btnDeleteCategory" Width="50" Margin="5" Click="btnDeleteCategory_Click" >-</Button>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
.
.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0" Grid.Row="0" Name="lstCategory" ItemTemplate="{StaticResource CategoryTemplate}" ItemsSource="{Binding Path=GetAllCategories}"/>
<StackPanel Margin="5" Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
<Label Content="Name : "/>
<TextBox Name="TxtName" Text="{Binding Path=TxtName ,Mode=TwoWay}" Width="260"/>
<Label Width="50"/>
<Button Width="50" Content="+" Name="btnAddCategory" Click="AddCategory_Click" />
</StackPanel>
</Grid>
</Grid>
and now when i run app the listbox populated with data from database; but i could not write code for addbutton and
delete button;
could anyone tell me what should i do?
and why i could not bind the text of textbox in list to TxtName Property of CategoryViewModel class ?
i mean here
<TextBlock Width="300" Margin="5" Text="{Binding Path=Name}"></TextBlock>
when i write Binding Path=TxtName the list box would not show data but with Binding Path=Name
it shows data from database

Your question is a bit scattered. But I'll try address what I think are your issues.
You say in the code behind you have:
this.DataContext = new CategoryViewModel();
But nothing else.
First thing to do with checking why your button isn't working would be to see what action it is performing. Your XAML states it's using a click event:
btnDeleteCategory_Click
Where's that? Is it not in your code-behind too? It might be that you've not got anything and that's why your button isn't doing anything - you've not instructed it to do anything!
In MVVM you should be binding your button using Commands in your ViewModel, similarly to how you bind data to Properties in your ViewModel.
You need something like:
Command="{Binding Path=DeleteCommand}"
in your view, and:
public ICommand DeleteCommand
{
get { return new DelegateCommand<object>(FuncToCall, FuncToEvaluate); }
}
private void FuncToCall(object context)
{
//this is called when the button is clicked - Delete something
}
private bool FuncToEvaluate(object context)
{
//this is called to evaluate whether FuncToCall can be called
//for example you can return true or false based on some validation logic
return true;
}
Binding to TxtName might not be working because it does not implement/call PropertyChanged.

Related

How can I DataBind a textbox from the parent window with values from the child with MVVM?

I just took over a project from another programmer who is no longer here. It was created using the MVVM Pattern (using the MVVM Light toolkit). I am new to MVVM and have been trying to learn the basics fast. Currently I am having trouble getting a selected value from a Child Window back to the Parent Window.
From another post on SO I learned that I should use the same ViewModel for both the parent and the child so I think I have the basics right. However I have not been able to get the selected values back to the parent. Below is a sample set of code similar to the production code.
My ViewModel for both pages is here
public class MainViewModel : ViewModelBase
{
private Vendor selectedVendor = null;
List<Vendor> vendors;
public MainViewModel()
{
OpenVendorWindowCommand = new RelayCommand(VendorSelect);
VendorSelectedCommand = new RelayCommand(VendorSelected);
LoadVendors();
}
public ICommand OpenVendorWindowCommand { get; private set; }
public ICommand VendorSelectedCommand { get; private set; }
void VendorSelect()
{
Messenger.Default.Send(new NotificationMessage("SelectVendor"));
}
public Vendor SelectedVendor
{
get { return selectedVendor; }
set
{
if (selectedVendor != value)
{
selectedVendor = value;
RaisePropertyChanged();
}
}
}
void VendorSelected()
{
Console.WriteLine(SelectedVendor.VendorName);
}
public List<Vendor> Vendors
{
get
{
return vendors;
}
set
{
if (vendors != value)
{
vendors = value;
RaisePropertyChanged();
}
}
}
private void LoadVendors()
{
DataTable dt = new DataTable();
dt = Vendor.GetVendors();
Vendors = new List<Vendor>();
foreach (DataRow row in dt.Rows)
{
Vendors.Add(new Vendor()
{
VendorID = Convert.ToInt32(row["VendorID"]),
VendorCode = Convert.ToString(row["VendorCode"]),
VendorName = Convert.ToString(row["VendorName"])
});
}
}
}
I am at the point that the Child Window opens and I am able to select a vendor from a ListBox. After the selection I press a button (VendorSelectedCommand) and it is at that point I want the textbox on the Parent Window to be filled with the SelectedVendor.VendorName value.
This is the XAML from my Child Window
<StackPanel VerticalAlignment="Center">
<ListBox
Height="200"
Margin="5"
HorizontalAlignment="Stretch"
Background="GhostWhite"
ItemsSource="{Binding Vendors}"
SelectedItem="{Binding Path=SelectedVendor, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="3">
<StackPanel Margin="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="175" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
FontWeight="SemiBold"
Foreground="Black"
Text="{Binding VendorName}" />
<TextBlock
Grid.Column="1"
FontWeight="SemiBold"
Foreground="Black">
<Run Text=" (" />
<Run Text="{Binding VendorCode}" />
<Run Text=") " />
</TextBlock>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Command="{Binding VendorSelectedCommand}" Content="Send Vendor Back" />
</StackPanel>
And lastly this is the XAML for the Parent Window with what I think is the correct binding
<StackPanel VerticalAlignment="Center">
<TextBox Margin="10" Text="{Binding SelectedVendor.VendorName}" />
<Button
Margin="10"
Command="{Binding OpenVendorWindowCommand}"
Content="Select Vendor" />
</StackPanel>
I have tried every possible combination of Binding Syntax that I can think of and have tried multiple different ways in the code behind to catch and bind it but have not been able to get it right. What is missing from my ViewModel to make this work?
Edit For clarity (and in response to a comment) I am adding the DataContext, which I had in the Constructor of the Views.
public partial class VendorView : Window
{
private MainViewModel _vm = null;
public VendorView()
{
InitializeComponent();
_vm = new MainViewModel();
DataContext = _vm;
}
}
Edit #2 I am opening the second page with this. This is very simple sample app with only two pages so I didn't want to get bogged down with navigation until I have a better handle on Binding.
private void NotificationMessageReceived(NotificationMessage msg)
{
if (msg.Notification == "SelectVendor")
{
var vendorView = new VendorView();
vendorView.ShowDialog();
}
}

How to get the SelectedItem value from a ListBox in WPF

I use a grid within my ListBox control to display images with their respective IDs.
The ID field is bound to grid column 1. I want to use the ListBox's SelectionChanged event to select the ID value (i.e. grid column 1 value). How can I do this?
Below is a code snippet of my XAML:
<ListBox x:Name="ListBox2" Grid.ColumnSpan="1" Grid.Column="4" Grid.Row="5" ItemsSource="{Binding Source= ListToLoad}" Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column2"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ImgID}"/>
<Image Grid.Column="1" Source="{Binding ImageX}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
cast selected item to type of bounded data and then get Id from converted object.
public partial class MainWindow:Window
{
public MainWindow()
{
InitializeComponent ();
ObservableCollection<Product> products=new ObservableCollection<Product> ();
Product p=new Product { ProductId=1,Name="Suger" };
products.Add (p);
p=new Product { ProductId=2,Name="Bread" };
products.Add (p);
p=new Product { ProductId=3,Name="Rice" };
products.Add (p);
lstProducts.ItemsSource=products;
}
private void lstProducts_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
Product p=(Product)lstProducts.SelectedItem;
MessageBox.Show (p.ProductId.ToString ());
}
public class Product
{
public int ProductId { get; set; }
public string Name { get; set; }
}
}
As per my understanding of what you are asking, you need to use 'SelectedItem' property of Listbox to bind it's selected item to a property in your code behind/View Model. The SelectedItem property in viewmodel will have the required ID property that you need. This approach will be better compared to using selection changed event.
For example:
<ListBox x:Name="ListBox2" **SelectedItem ={Binding SelectedImage}** Grid.ColumnSpan="1" Grid.Column="4" Grid.Row="5" ItemsSource="{Binding Source= ListToLoad}" Grid.IsSharedSizeScope="True">
You will have to have a SelectedImage property in your ViewModel/Class code:
private <Image/type of property> _selectedImage;
public <Image/type of property> SelectedImage
{
get { return _selectedImage;}
set
_selectedImage = value;
if(value != null)
{
<imageId> = value.ImageId;
}
}
Then when you will be selecting an item in Listbox, SelectedImage's setter will be fired and you will get selected image. And then you can get ImageId from SelectedImage in the setter method.

Conditional DataTemplates when binding to a collection

Sample Application:
The sample application that the supplied code belongs to displays a list of Vehicle objects via Binding. The Vehicle class is a top level class that subclasses can derive from e.g. Car and Bike. The sample application at the moment displays the owner's name of the Vehicle.
Sample Model code:
public class Vehicle
{
private string _ownerName;
public string ownerName
{
get { return _ownerName; }
set { _ownerName = value; }
}
}
public class Car : Vehicle
{
public int doors;
}
public class Bike : Vehicle
{
// <insert variables unique to a bike, ( I could not think of any...)>
}
UserControl XAML Code:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="itemTemplate">
<WrapPanel>
<TextBlock Text="{Binding Path=ownerName}"/>
</WrapPanel>
</DataTemplate>
</Grid.Resources>
<ListBox x:Name="list" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" ItemsSource="{Binding}" ItemTemplate="{StaticResource itemTemplate}" />
</Grid>
UserControl code behind:
public List<Vehicle> vehicleList = new List<Vehicle>();
public CustomControl()
{
InitializeComponent();
createSomeVehicles();
list.DataContext = vehicleList;
}
public void createSomeVehicles()
{
Car newcar = new Car();
newcar.doors = 5;
newcar.ownerName = "mike";
Bike newbike = new Bike();
newbike.ownerName = "dave";
vehicleList.Add(newcar);
vehicleList.Add(newbike);
}
What I want to be able to do:
I would like to be able to display a button in the list object dependant upon the Type of the Vehicle object. E.g. I would like to display a Open Boot button within the list item for Car's; Type Bike does not have a boot and so no button would display within the list item.
Idea's on how to accomplish this:
I have looked into the custom binding of different DataTemplates based upon what type of object it is. E.g. from the code behind I could call:
object.Template = (ControlTemplate)control.Resources["templateForCar"];
The problem here is that I am using a Binding on the whole list and so there is no way to manually bind a DataTemplate to each of the list items, the list binding controls the DataTemplate of it's items.
You can create a DataTemplate for each Bike and Car (and for any CLR type). By specifying the DataTemplate's DataType property, the template will automatically be applied whenever WPF sees that type.
<Grid>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:Car}">
<WrapPanel>
<TextBlock Text="{Binding Path=ownerName}"/>
<Button Content="Open Boot" ... />
</WrapPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Bike}">
<WrapPanel>
<TextBlock Text="{Binding Path=ownerName}"/>
</WrapPanel>
</DataTemplate>
</Grid.Resources>
<ListBox x:Name="list" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" ItemsSource="{Binding}" />
</Grid>

MVVM Light Commands within an ItemsControl

I'm just trying my hand at WP7 dev using the MVVM Light framework.
I'm trying to fire a button command inside an ItemsControl, essentialy it's a list of cars and I'd like each element to have an edit button.
The Relevant piece of the View:
<ItemsControl ItemsSource="{Binding MyCars}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="CarViewGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="100" />
<ColumnDefinition Width="Auto" MinWidth="302"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="40" />
<RowDefinition Height="Auto" MinHeight="32" />
<RowDefinition Height="Auto" MinHeight="32" />
<RowDefinition Height="Auto" MinHeight="32" />
</Grid.RowDefinitions>
<TextBlock x:Name="CarName" Text="{Binding Name, Mode=TwoWay}" Margin="7,0" Grid.Row="0" Grid.ColumnSpan="2" FontSize="32" FontWeight="Bold" FontStyle="Normal" />
<TextBlock x:Name="Make" Text="{Binding Make, Mode=TwoWay}" Margin="15,0" Grid.Row="1" Grid.Column="0" FontSize="24" />
<TextBlock x:Name="Model" Text="{Binding Model, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" FontSize="24" />
<TextBlock x:Name="Odometer" Text="{Binding Odometer, Mode=TwoWay}" Margin="15,0" Grid.Row="2" Grid.ColumnSpan="2" FontSize="24" />
<Button x:Name="EditCarButton" Content="Edit" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Width="100" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding EditCar}" CommandParameter="{Binding}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
My ViewModel contains this:
public RelayCommand OpenNewForm { get; private set; }
public CarViewModel()
{
//Snip
EditCar = new RelayCommand<Car>(c =>
{
CurrentCar = c;
FormVisible = true;
});
}
Now as you can see I'm trying to pass the current Car object that is bound through the CommandParameter. My delegate never fires so I'm guessing I've got something wrong in my binding regarding the current DataContext.
Anybody got any ideas as to what I'm doing wrong?
In a DataTemplate, the DataContext is set by default to the item that is represented by the DataTemplate (in that case, the Car object). If the EditCar command is on the main viewmodel (which also contains the MyCars collection), you need to explicitly set the Source of the Binding to that object. This would be (assuming that you are using the MVVM Light's ViewModelLocator and that your VM is named Main) {Binding Source={StaticResource Locator}, Path=Main.EditCar}
Cheers,
Laurent
Its going to fire EditCar on a car item. There are a couple ways to solve this, since you're using mvvm light try.
Appologies to Laurent. I posted the wrong link. My intention was that since the original poster was using MVVM Light that Dan Wahlin's DataContextProxy or a RelativeSource binding solution would work. I was going to go on and explain how if using CM an event from a child item could bubble up but I didn't. The link to CM dotnetrocks was something I pasted previously.
I have found that its alot easier to make my collections VM collections instead of Entitycollections. I used to use entitycollections and then I started running into those problems like you are describing. But Now each VM in the Collection is 'selfaware' and can act on itself without jumping through major hoops.
You would have the button that you are clicking as part of the CarsVM and it would have access to all the properties of the carVM which would have access to all the properties of your Car Entity.
Sample from My App:
public partial class ReadmitPatientListViewModel : ViewModelBase
{
/// <summary>
/// Initializes a new instance of the ReadmitPatientListViewModel class.
/// </summary>
////public override void Cleanup()
////{
//// // Clean own resources if needed
//// base.Cleanup();
////}
#region Declarations
ICommand _openSurveyCommand;
Messenger _messenger = Messenger.Default;
#endregion
#region Command Properties
public ICommand OpenSurveyCommand
{
get
{
if (_openSurveyCommand == null)
{
_openSurveyCommand = new RelayCommand(() => OnSurveyCommandExecute());
}
return _openSurveyCommand;
}
private set { }
}
#endregion
#region Command Methods
private void OnSurveyCommandExecute()
{
Wait.Begin("Loading Patient List...");
_messenger.Send<ReadmitPatientListViewModel>(this);
_messenger.Send<Messages.NavigationRequest<SubClasses.URI.PageURI>>(GetNavRequest_QUESTIONAIRRESHELL());
}
#endregion
#region Properties
#endregion
private static Messages.NavigationRequest<SubClasses.URI.PageURI> GetNavRequest_QUESTIONAIRRESHELL()
{
Messages.NavigationRequest<SubClasses.URI.PageURI> navRequest =
new Messages.NavigationRequest<SubClasses.URI.PageURI>(
new SubClasses.URI.PageURI(Helpers.PageLinks.QUESTIONAIRRESHELL, System.UriKind.Relative));
return navRequest;
}
partial void OnCreated()
{
}
}
These are the properties in the primary vm that my Expander binds to:
public CollectionViewSource SearchResultsCVS { get; private set; }
public ICollection<ViewModel.ReadmitPatientListViewModel> SearchResults { get; private set; }
The collection is the soure for the CVS.....when the completeSurveyButton is clicked a navigation request is sent,and a copy of the viewmodel is sent to any listeners to manipulate.

databinding a Dataset to a listbox...Datatemplate needs to display from multiple columns

I was trying to figure this out for quite some time.I want a Databind a listbox with a Dataset.Simple as it can get.But my problem is that i want my datatemplate to display Columns from two tables,in the dataset.I have tried many samles..but everything i found just gives the dataset as datacontext and gives a single table as itemsource.But my condition is that i want more than one table in my datatemplate..
For eg:
<DataTemplate x:Key="EmployeeDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="5" BorderBrush="Black" BorderThickness="1">
<Image Source="{Binding Path=Mast/Image}" Stretch="Fill" Width="50" Height="50" />
</Border>
<StackPanel Grid.Column="1" Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=Mast/Firstname}" />
<TextBlock Text="{Binding Path=Mast/Lastname}" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=Details/Age}" />
<TextBlock Text="{Binding Path=Details/Role}" />
</StackPanel>
</Grid>
</DataTemplate>
Any way to do this..? I am confused...!
I tried giving the Dataset as datacontext and Itemsource as {Binding} But only one row is displayed...
You should create a view model class that exposes three properties:
MasterTable of type IEnumerable<MasterTableRow>
SelectedMaster of type DataRowView
MasterDetails of type IEnumerable<DetailsTableRow>
In your view model, put your instance of your DataSet, and return the appropriate values for the properties. To wrap it all up, you should implement INotifyPropertyChanged and fire change notifications for SelectedMaster and MasterDetails whenever SelectedMaster changes.
Remember to set the view model as the DataContext for the bindings.
Here's how it might look like:
public partial class ViewModel : INotifyPropertyChanged
{
DataSet1 ds;
DataRowView selectedMaster;
public IEnumerable<DataSet1.MasterTableRow> MasterTable
{
get { return ds.MasterTable; }
}
public DataRowView SelectedMaster
{
get { return selectedMaster; }
set
{
if (selectedMaster != value)
{
selectedMaster = value;
OnPropertyChanged("MasterDetails");
OnPropertyChanged("SelectedMaster");
}
}
}
public IEnumerable<DataSet1.DetailsTableRow> MasterDetails
{
get
{
var masterRow = (DataSet1.MasterTableRow)SelectedMaster.Row;
return masterRow.GetDetailsTableRows();
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string prop)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
#endregion
}
In XAML, the bindings might look like this:
<ListBox ItemsSource="{Binding MasterTable}"
SelectedItem="{Binding SelectedMaster}"
ItemTemplate="{StaticResource MasterTemplate}"/>
<ListBox ItemsSource="{Binding MasterDetails}"
ItemTemplate="{StaticResource DetailsTemplate}"/>

Resources