DataBinding with DataContext - wpf

what am I doing wrong here? I'm trying to create a DataTemplate using a collection inside the DataContext object, like the following:
C#:
namespace StackOverflowTests
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.DataContext = new People();
}
}
class People
{
public List<Person> PersonList { get; set; }
public People()
{
this.PersonList = new List<Person>()
{
new Person(){FirstName = "Carlo", LastName = "Toribio" },
new Person(){FirstName = "Guy", LastName = "Incognito" }
};
}
}
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
XAML:
<Window x:Class="StackOverflowTests.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" x:Name="window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="peopleTemplate">
<StackPanel>
<TextBlock Text="First Name" FontWeight="Bold" />
<TextBlock Text="{Binding PersonList.FirstName}" />
<TextBlock Text="Last Name" FontWeight="Bold" />
<TextBlock Text="{Binding PersonList.LastName}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="gridMain">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource peopleTemplate}" />
</Grid>
</Window>
I've done this a lot easier by using a class that inherits from Collection<T>, but for many reasons, I can't do that to solve this problem. Any suggestion is greatly appreciated.
Thanks!

try this one:
<Grid x:Name="gridMain">
<ItemsControl ItemsSource="{Binding PersonList}" ItemTemplate="{StaticResource peopleTemplate}" />
</Grid>

Related

Binding a property inside observerList in wpf

I am writing an application in C#, WPF, XAML using MVVM patterm.
After many examples that I founded online the data that I try to Bind to the UI is not shown in the screen.
My architecture is : In the MainViewModel I have an ObserverList from type family,
in Family class I have an ObserverList from type Child,
in Child class I have Name.
How to Bind the Child Name in to TextBlock?
Some examples that I founded:
https://msdn.microsoft.com/en-us/library/aa970558%28v=vs.110%29.aspxv
<Window x:Class="DataTemplates.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DataTemplates"
Title="MainWindow"
Height="350"
Width="525">
<Window.Resources>
<DataTemplate x:Key="MyDataTemplate"
DataType="local:MyData">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="First Name: " />
<TextBlock Grid.Column="1"
Text="{Binding Path=FirstName}" />
<TextBlock Grid.Column="2"
Text="Last Name: " />
<TextBlock Grid.Column="3"
Text="{Binding Path=LastName}" />
<CheckBox Grid.Column="4"
Content="Is Lecturer?"
IsEnabled="False"
IsChecked="{Binding Path=IsLecturer}" />
</Grid>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListBox ItemsSource="{Binding}"
ItemTemplate="{StaticResource MyDataTemplate}"
HorizontalContentAlignment="Stretch" />
<Button Content="Add"
Click="Button_Click" />
</StackPanel>
</Window>
and the code Behind
using System.Collections.ObjectModel;
using System.Windows;
namespace CollectionDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private ObservableCollection<MyData> _myCollection =
new ObservableCollection<MyData>();
public MainWindow()
{
InitializeComponent();
DataContext = _myCollection;
_myCollection.Add(
new MyData
{
FirstName = "Arik",
LastName = "Poznanski",
IsLecturer = true
});
_myCollection.Add(
new MyData
{
FirstName = "John",
LastName = "Smith",
IsLecturer = false
});
}
private int counter = 0;
private void Button_Click(object sender, RoutedEventArgs e)
{
++counter;
_myCollection.Add(
new MyData()
{
FirstName = "item " + counter,
LastName = "item " + counter,
IsLecturer = counter % 3 == 0
});
}
}
}
class my data form the example
public class MyData
{
public string User { get; set; }
public string Password { get; set; }
}
I made a custom example which matches your scenario, take a look at this.
MainWindow.xaml
<Window x:Class="SO.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock Height="30" Text="{Binding Parent.Child.SampleText}" HorizontalAlignment="Center"/>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MainViewModel obj = new MainViewModel();
this.DataContext = obj;
}
}
MainViewModel.cs
public class MainViewModel
{
private ParentModel _Parent = new ParentModel();
public ParentModel Parent
{
get { return _Parent; }
set { _Parent = value; }
}
public MainViewModel() //Data Load in Constructor
{
ChildModel child = new ChildModel();
child.SampleText = "Hi, I am Child!";
Parent.Child = child;
}
}
ParentModel.cs
public class ParentModel
{
private ChildModel _Child = new ChildModel();
public ChildModel Child
{
get { return _Child; }
set { _Child = value; }
}
}
ChildModel.cs
public class ChildModel
{
private string _SampleText ;
public string SampleText
{
get { return _SampleText; }
set { _SampleText = value; }
}
}
Corrections in your eg:
Your View and Code behind is perfect.
You didn't add properties in model class which is to be binded in UI.
class MyData
{
//public string User { get; set; }
//public string Password { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public bool IsLecturer { get; set; }
}

Binding List<string> property to Listbox WPF

Can someone help me? I have the folowing XAML code in my MainWindow.xaml file:
<ListBox ItemsSource="{Binding Files}" HorizontalAlignment="Left"
Height="371" Margin="281,53,0,0" VerticalAlignment="Top"
Width="609">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And in my ViewModel.cs I have property:
public List<string> Files { get; set; }
But, when I click the button and add some items to Files nothing happens.
P.S. Sorry for my bad English :)
List does not implement INotifyCollectionChanged, instead of List, use ObservableCollection<string>
Additional Info: List vs ObservableCollection vs INotifyPropertyChanged
Here is your solution, just add this code and press 'Add String' button to make it work. I have used 'ObservableCollection' instead of List and made to listen it using 'INotifyPropertyChanged' interface in ViewModel.cs class
MainWindow.xaml
<Window x:Class="ListBox_Strings.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myApp="clr-namespace:ListBox_Strings"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<myApp:ViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<ListBox ItemsSource="{Binding Files}" HorizontalAlignment="Left"
VerticalAlignment="Top" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Content="Add String" Click="Button_Click"></Button>
</Grid>
</Window>
MainWindow.xaml.cs
using System.Windows;
namespace ListBox_Strings
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var vm = this.DataContext as ViewModel;
vm.Files.Add("New String");
}
}
}
ViewModel.cs
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace ListBox_Strings
{
public class ViewModel:INotifyPropertyChanged
{
private ObservableCollection<string> m_Files;
public ObservableCollection<string> Files
{
get { return m_Files; }
set { m_Files = value;
OnPropertyChanged("Files"); }
}
public ViewModel()
{
Files = new ObservableCollection<string>();
Files.Add("A");
Files.Add("B");
Files.Add("C");
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
}

How to bind UserControl to ViewModel

I'm having a bit of a trouble connecting both components:
View:
<UserControl x:Class="CoolPlaces.Views.ListItem"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<ListBox ItemsSource="{Binding ListViewModel}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}" />
<TextBox Text="{Binding Path=Description, Mode=OneWay}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>
Part of Main Page View: in which I include above user control:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<views:ListItem Height="300" />
</Grid>
ViewModel:
namespace CoolPlaces.ViewModels
{
public class ListViewModel : INotifyPropertyChanged
{
private ObservableCollection<BasicModel> _places;
public ObservableCollection<BasicModel> Places {
get {
return _places;
}
set {
_places = value;
RaisePropertyChanged("Places");
}
}
public ListViewModel() {
Places = new ObservableCollection<BasicModel>(_loadPlaces());
}
private IEnumerable<BasicModel> _loadPlaces() {
return //some hard coded objects
}
}
}
MainPage
namespace CoolPlaces
{
public partial class MainPage : PhoneApplicationPage
{
private ListViewModel vm;
// Constructor
public MainPage()
{
InitializeComponent();
vm = new ListViewModel();
}
}
}
You're close. You need to set the DataContext equal to your ViewModel.
public partial class MainPage : PhoneApplicationPage
{
private ListViewModel vm;
// Constructor
public MainPage()
{
InitializeComponent();
DataContext = vm = new ListViewModel();
}
}
Then your ListBox doesn't need to be bound to it. Instead, bind it to your Places property on your ViewModel:
<ListBox ItemsSource="{Binding Places}">

WPF binding with ContentControl not working

I'm just starting to use WPF, but my binding doesn't work.
When I start the application the screen is just blank.
This is my XAML
<Window x:Class="HelloWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ContentControl Content="{Binding PersonOne}" Width="auto" Height="auto" >
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding FirstName}" FontSize="15" />
<TextBlock Text="{Binding Age}" FontSize="12" />
</StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</Grid>
This is the code:
public partial class MainWindow : Window
{
public Person PersonOne;
public MainWindow()
{
InitializeComponent();
PersonOne = new Person();
PersonOne.Gender = Gender.Female;
PersonOne.Age = 24;
PersonOne.FirstName = "Jane";
PersonOne.LastName = "Joe";
this.DataContext = this;
}
}
And this is the person class
public class Person
{
public string LastName { get; set; }
public string FirstName { get; set; }
public int Age { get; set; }
public Gender Gender { get; set; }
}
public enum Gender
{
Male,
Female
}
What am I doing wrong?
You cannot bind to fields, only properties, so change this:
public Person PersonOne;
to this:
public Person PersonOne {get;set;}
BTW, you probably need to create a ViewModel rather than putting the Data inside the Window itself.

When selecting a item in a WPF listview update other controls to see detail

I have a window that uses a viewmodel. This screen contains 2 listviews on a screen. The first listview binds to a propery on my viewmodel called projects. This property returns a model as follows
class ProjectsModel
{
public string ProjectName { get; set; }
public ObservableCollection<ProjectModel> ProjectDetails { get; set; }
}
In this class the ProjectModel looks like the following
public class ProjectModel
{
public string ProjectName { get; set; }
public string ProjectId { get; set; }
public string ProjectFileId { get; set; }
public string ProjectSource { get; set; }
public string ClientCode { get; set; }
public string JobNumber { get; set; }
}
The first listview shows projectname as i expect but I would like it so that when I click on any of the items, the second listview should display its details of the projectdetails property. It almost appears to work has it shows the first items childrean but I beleive that its not being informed that the selected item of the first listview has changed. Ho can I do this? Any ideas would be appreciated becuase Ive been pulling my hair out for hours now!
This is the xaml
<Window x:Class="TranslationProjectBrowser.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:TranslationProjectBrowser.ViewModels"
xmlns:local="clr-namespace:TranslationProjectBrowser.Models"
Title="MainWindow" Height="373" Width="452" Background="LightGray">
<Window.DataContext>
<vm:ProjectBrowserViewModel></vm:ProjectBrowserViewModel>
</Window.DataContext>
<Window.Resources>
<ObjectDataProvider x:Key="projectList" ObjectType="{x:Type vm:ProjectBrowserViewModel}" />
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource projectList}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="176*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="176*" />
<RowDefinition Height="254*" />
</Grid.RowDefinitions>
<DockPanel LastChildFill="True" >
<TextBlock DockPanel.Dock="Top" Text="Projects" Margin="5,2"></TextBlock>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<TextBox Name="ProjectName" Width="140" Margin="5,2" Height="18" FontFamily="Calibri" FontSize="10"></TextBox>
<Button Height="18" Width="45" HorizontalAlignment="Left" Margin="0,2" FontSize="10" Content="Add" Command="{Binding Path=AddProject}" CommandParameter="{Binding ElementName=ProjectName, Path=Text}"></Button>
<TextBlock Text="{Binding Path=ErrorText}" VerticalAlignment="Center" Margin="6,2" Foreground="DarkRed"></TextBlock>
</StackPanel>
<ListView Name="project" HorizontalAlignment="Stretch" Margin="2" ItemsSource="{Binding Path=Projects}" IsSynchronizedWithCurrentItem="True">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Path=ProjectName}" Header="Name" Width="200" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
<DockPanel LastChildFill="True" Grid.Row="1" >
<TextBlock DockPanel.Dock="Top" Text="Project Files" Margin="5,2"></TextBlock>
<ListView HorizontalAlignment="Stretch" Margin="2" ItemsSource="{Binding Path=Projects/ProjectDetails}" IsSynchronizedWithCurrentItem="True" >
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=ProjectName}" Width="200" />
<GridViewColumn Header="Job Number" DisplayMemberBinding="{Binding Path=JobNumber}" Width="100" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Grid>
Your view models should (at least) implement INotifyPropertyChanged. This is how WPF will know when your selction (or other properties) change and the binding needs to be updated.
So you should have something like this:
class ProjectsModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String PropertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
}
}
public string ProjectName
{
get
{
return _projectName;
}
set
{
_projectName = value;
NotifyPropertyChanged("ProjectName");
}
}
public ObservableCollection<ProjectModel> ProjectDetails
{
get
{
return _projectDetails;
}
set
{
_projectDetails = value;
NotifyPropertyChanged("ProjectDetails");
}
}
}
In future versions of the .NET framework this gets a lot easier with the "caller info" attributes (http://www.thomaslevesque.com/2012/06/13/using-c-5-caller-info-attributes-when-targeting-earlier-versions-of-the-net-framework/). But as of today this is usually how it's done.
UPDATE
Ok, so based on your comment you need to bind your ListView's SelectedItem property to a property on your view model. You can then Bind your second ListView to that property as well. Something like this:
<ListView ... SelectedItem="{Binding Path=FirstListViewSelectedItem, Mode=TwoWay}" .. >
And then your second list view would be sometihng like this:
<ListView ... ItemsSource="{Binding Path=FirstListViewSelectedItem.ProjectDetails, Mode=OneWay" .. />
I don't see any current management in your code. If you use a CollectionView you will get that for free, see below sample:
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<ListBox ItemsSource="{Binding Path=ProjectsView}" DisplayMemberPath="Name" IsSynchronizedWithCurrentItem="True"/>
<ListBox ItemsSource="{Binding Path=ProjectsView/ProjectDetails}" />
</StackPanel>
</Window>
Code behind:
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new VM();
}
}
public class VM
{
public VM()
{
List<Project> projectsModel = new List<Project>();
projectsModel.Add(new Project("AAA"));
projectsModel.Add(new Project("BBB"));
projectsModel.Add(new Project("CCC"));
ProjectsView = CollectionViewSource.GetDefaultView(projectsModel);
}
public ICollectionView ProjectsView { get; private set; }
}
public class Project
{
public Project(string name)
{
Name = name;
}
public string Name { get; private set; }
public IEnumerable<string> ProjectDetails
{
get
{
for (int i = 0; i < 3; i++)
{
yield return string.Format("{0}{1}", Name, i);
}
}
}
}
}

Resources