Develop Reference

Model's property not recognized by xaml (WPF MVVM)

Using mvvmCross, .net (5.0), visual studio 19
View model:
using System.ComponentModel;
using System.Threading.Tasks;
using MvvmCross.ViewModels;
using MvxR_M_S.Core.API;
using MvxR_M_S.Core.Models;
namespace MvxR_M_S.Core.ViewModels
{
public class ArticlePresentationViewModel : MvxViewModel
{
public ArticlePresentationViewModel()
{
}
public override async void ViewAppeared()
{
base.ViewAppeared();
await LoadArticles(new ArticleEndpoint(new APIHelper()));
}
public async Task LoadArticles(ArticleEndpoint articleEndpoint)
{
var articleList = await articleEndpoint.GetAll();
Articles = new BindingList<ArticleModel>(articleList);
}
private BindingList<ArticleModel> _articles;
public BindingList<ArticleModel> Articles
{
get { return _articles; }
set
{
_articles = value;
SetProperty(ref _articles, value);
}
}
}
}
Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MvxR_M_S.Core.Models
{
public class ArticleModel
{
public string ArticleName { get; set; }
}
}
View:
<views:MvxWpfView
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns:mvx="clr-namespace:MvvmCross.Platforms.Wpf.Binding;assembly=MvvmCross.Platforms.Wpf"
x:Class="MvxR_M_S.Wpf.Views.ArticlePresentationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:models="clr-namespace:MvxR_M_S.Core.Models;assembly=MvxR_M_S.Core"
xmlns:viewModels="clr-namespace:MvxR_M_S.Core.ViewModels;assembly=MvxR_M_S.Core"
mc:Ignorable="d" FontSize="20" Background="Wheat"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Center" Text="Article list" />
<ListBox x:Name="Articles" ItemsSource="{Binding Articles}" Grid.Column="2" Grid.Row="2" MinHeight="300" MinWidth="300" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ArticleName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</views:MvxWpfView>
The problem is at the listbox, where it references ItemsSource right, also i did debug at the Articles property inside ViewModel, it holds right information, but nothing is presented on screen when started up.
So i guess this is binding issue.

Remove _articles = value; in Articles setter. SetProperty doesn't do anything if the field already is set
public BindingList<ArticleModel> Articles
{
get { return _articles; }
set
{
SetProperty(ref _articles, value);
}
}

Since you are retrieving the articles in a separate thread, I think you have to do something like this:
Dispatcher.BeginInvoke(new Action(() => Articles = new BindingList<ArticleModel>(articleList);));
I am not exactly sure if it's the right way but Dispatcher.BeginInvoke seems needed from what I found

Editing copies of an ObservableCollection's Object without editing the ObservableCollection

I have a WPF form that I want to use to manipulate a database table. To get the data out of the database I use Entity Framework Core. I try to follow the MVVM pattern.
So I have a Model called Employee with a number of string properties like Firstname and so on.
The form has a ListView that shows an ObservableCollection of Employee. Further I have a number of TextBoxes to display and manipulate the properties of single Employee objects. The selectedMemberPath of the ListView is bound to a property SelectedEmployee. The setter of SelectedEmployee than copies it's own properties to EditedEmployee. The TextBoxes are bound to EditedEmployee. The idea is, that I don't want to directly edit the ObservableCollection. This should only happen if a save button is clicked.
This is my view model.
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.ChangeTracking;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using XdcCore.Models;
using XdcCore.ViewModels.Commands;
namespace XdcCore.ViewModels
{
class EmployeeEditorVM : List<Employee>, INotifyPropertyChanged
{
public EmployeeSaveCommand EmployeeSaveCommand { get; set; }
public EmployeeEditorVM()
{
EmployeeSearch();
EmployeeSaveCommand = new EmployeeSaveCommand(this);
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private string employeeSearchText;
public string EmployeeSearchText
{
get { return employeeSearchText; }
set
{
employeeSearchText = value;
OnPropertyChanged("EmployeeSearch");
EmployeeSearch();
}
}
private Employee selectedEmployee;
public Employee SelectedEmployee
{
get { return selectedEmployee; }
set
{
selectedEmployee = value;
OnPropertyChanged("SelectedEmployee");
EditedEmployee = SelectedEmployee;
}
}
private Employee editedEmployee;
public Employee EditedEmployee
{
get { return editedEmployee; }
set
{
editedEmployee = value;
OnPropertyChanged("EditedEmployee");
}
}
private ObservableCollection<Employee> employees;
public ObservableCollection<Employee> Employees
{
get { return employees; }
set
{
employees = value;
OnPropertyChanged("Employees");
}
}
public void EmployeeSearch()
{
using (var context = new XdcContext())
{
if (employeeSearchText != null)
{
var _employees = context.Employee
.Where(x => x.Firstname.Contains(employeeSearchText));
Employees = new ObservableCollection<Employee>(_employees);
}
else
{
var _employees = context.Employee.Select(x => x);
Employees = new ObservableCollection<Employee>(_employees);
}
}
}
public void EmployeeSave()
{
using (var context = new XdcContext())
{
var entity = context.Employee.First(x => x.IdEmployee == SelectedEmployee.IdEmployee);
{
entity.Firstname = SelectedEmployee.Firstname;
entity.Lastname = SelectedEmployee.Lastname;
entity.Initials = SelectedEmployee.Initials;
context.SaveChanges();
}
EmployeeSearch();
}
}
}
}
this is my View:
<Window
x:Class="XdcCore.Views.Editors.EmployeeEditor"
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:local="clr-namespace:XdcCore.Views.Editors"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:XdcCore.ViewModels"
Title="Employee"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<vm:EmployeeEditorVM x:Key="vm" />
</Window.Resources>
<Grid DataContext="{StaticResource vm}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="115*" />
<ColumnDefinition Width="277*" />
</Grid.ColumnDefinitions>
<!-- left column -->
<Border BorderBrush="DarkGray" BorderThickness="1">
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="aUTO" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Margin="3,3,3,3"
Content="Filter:" />
<TextBox
x:Name="TextBoxSearch"
Grid.Row="1"
Height="25"
Margin="3,0,3,3"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
Text="{Binding EmployeeSearchText, Mode=TwoWay}" />
<ListView
x:Name="ListViewOverview"
Grid.Row="2"
Margin="3,0,3,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding Employees, Mode=OneWay}"
SelectedItem="{Binding SelectedEmployee, Mode=OneWayToSource}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Initials}" />
<TextBlock Text=" : " />
<TextBlock Text="{Binding Firstname}" />
<TextBlock Text=" " />
<TextBlock Text="{Binding Lastname}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button
x:Name="ButtonDelete"
Grid.Column="0"
Height="25"
Margin="3,3,3,3"
Content="Delete"
IsEnabled="False" />
<Button
x:Name="ButtonNew"
Grid.Column="1"
Height="25"
Margin="3,3,3,3"
Content="Add New ..."
IsEnabled="True" />
</Grid>
</Grid>
</Border>
<!-- right Column -->
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- right column, first row -->
<Border
Grid.Row="0"
BorderBrush="DarkGray"
BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Right"
Content="First Name" />
<Label
Grid.Row="1"
Grid.Column="0"
HorizontalAlignment="Right"
Content="Last Name" />
<Label
Grid.Row="2"
Grid.Column="0"
HorizontalAlignment="Right"
Content="Initials" />
<Label
Grid.Row="3"
Grid.Column="0"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Content="ID" />
<Label
Grid.Row="4"
Grid.Column="0"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Content="RCU" />
<Label
Grid.Row="5"
Grid.Column="0"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Content="RCT" />
<TextBox
x:Name="TextBoxFirstName"
Grid.Row="0"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
Text="{Binding EditedEmployee.Firstname, Mode=TwoWay}" />
<TextBox
x:Name="TextBoxLastName"
Grid.Row="1"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
Text="{Binding EditedEmployee.Lastname, Mode=TwoWay}" />
<TextBox
x:Name="TextBoxInitials"
Grid.Row="2"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
Text="{Binding EditedEmployee.Initials, Mode=TwoWay}" />
<TextBox
x:Name="TextBoxId"
Grid.Row="3"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsReadOnly="True" />
<TextBox
x:Name="TextBoxRCU"
Grid.Row="4"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsReadOnly="True" />
<TextBox
x:Name="TextBoxRCT"
Grid.Row="5"
Grid.Column="1"
Margin="0,3,3,3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsReadOnly="True" />
</Grid>
</Border>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button
x:Name="ButnSave"
Grid.Column="1"
Width="76"
Height="25"
Margin="60,3,60,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Command="{Binding EmployeeSaveCommand}"
Content="Save"
IsEnabled="True" />
</Grid>
<!-- Add new -->
</Grid>
</Grid>
</Grid>
</Window>
In other words: I want to click on an item in the list view, it's details are shown in the text boxes. I can change the text in the text boxes but the changes are not applied to the observable collection (or even database) until I click "save". The problem is, that exactly that happens: when I edit text in the text boxes the changes are also shown in the list view. And I can#t see why.

So, I got the concept of "copy vs point" of a variable wrong.
I had two solutions for my problem.
To my Employee model I added the method Copy:
public partial class Employee
{
public int IdEmployee { get; set; }
public string Initials { get; set; }
public string Firstname { get; set; }
public string Lastname { get; set; }
public string Rcu { get; set; }
public DateTime Rct { get; set; }
public Employee Copy()
{
return (Employee)this.MemberwiseClone();
}
}
Then I Changed my ViewModel so that EditedEmployee is a copy of SelectedEmployee
private Employee selectedEmployee;
public Employee SelectedEmployee
{
get { return selectedEmployee; }
set
{
selectedEmployee = value;
OnPropertyChanged("SelectedEmployee");
if (SelectedEmployee != null)
{
EditedEmployee = SelectedEmployee.Copy();
}
}
}
private Employee editedEmployee;
public Employee EditedEmployee
{
get { return editedEmployee; }
set
{
editedEmployee = value;
OnPropertyChanged("EditedEmployee");
}
}
The problem with this approach is, that if I mess around with the database and then need to run Scaffold-DbContext (I prefer the code-first approach of EFC) again, I would have to modify all models again. A solution to that might be some a second, modified Model that inherits from the original Model and then adds the Copy method.
My second approach is to bind the ListView via SelectedIndex instead of SelectedItem.
<ListView
...
ItemsSource="{Binding Employees, Mode=OneWay}"
SelectedIndex="{Binding SelectedItemIndex, Mode=TwoWay}">
In the ViewModel this is then represented by an int property. If this int is set (and >= 0) Employee gets copied EmployeeWorkingCopy. Furthermore if EmployeeWorkingCopy is set a single Employee dubbed EditedEmployee is set as the Employee of the working copy with the selected index.
private int selectedItemIndex;
public int SelectedItemIndex
{
get { return selectedItemIndex; }
set
{
selectedItemIndex = value;
if (SelectedItemIndex >= 0)
EmployeesWorkingCopy = new ObservableCollection<Employee>(Employees);
}
}
private Employee editedEmployee;
public Employee EditedEmployee
{
get { return editedEmployee; }
set
{
editedEmployee = value;
OnPropertyChanged("EditedEmployee");
}
}
private ObservableCollection<Employee> employeesWorkingCopy;
public ObservableCollection<Employee> EmployeesWorkingCopy
{
get { return employeesWorkingCopy; }
set
{
employeesWorkingCopy = value;
EditedEmployee = EmployeesWorkingCopy[SelectedItemIndex];
}
}
Thanks a lot for pointing out my misconception.

CollectionView, DataBinding, MVVM

Hi everyone,
I am trying to implement MVVM in my application but i am failing to load data.
I have a main page and it works fine, but once I want to navigate to the detail of my Ad and then the detail page is blank. There are my controls so i know that the pages is loaded just my data are missing. I cant seem to figure out where i have made the mistake. I am new to coding so i sometimes tend to make very silly mistakes. I been trying to solve this for past few hours otherwise would not post it over here. Thank you of any opinion.
My HomePage
<Grid Grid.Row="1" Margin="0,25,0,0">
<CollectionView x:Name="ads"
ItemsSource="{Binding AdLogEntries}"
ItemTemplate="{StaticResource HomePageTemplate}"
SelectionMode="Single"
SelectedItem="{Binding SelectedAd, Mode=TwoWay}"
SelectionChanged="CollectionView_SelectionChanged"
Margin="12,0">
</CollectionView>
</Grid>
public partial class HomePage : ContentPage
{
public HomePage()
{
InitializeComponent();
BindingContext = new HomePage ViewModel();
}
async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var selectedAd = (AdLogEntry)e.CurrentSelection.FirstOrDefault();
if (selectedAd != null)
{
await Navigation.PushAsync(new AdDetail(selectedAd));
}
}
}
namespace Baltazar.ViewModel
{
public class HomePageViewModel : BaseViewModel
{
ObservableCollection<AdLogEntry> _adLogEntries;
public ObservableCollection<AdLogEntry> AdLogEntries { get => _adLogEntries; set { _adLogEntries = value; OnPropertyChanged(); } }
public AdLogEntry selectedAd;
public HomePageViewModel()
{
AdLogEntries = new ObservableCollection<AdLogEntry>()
{
new AdLogEntry (){Id = 0, Image = "cat.jpg", Name = "Kocka" , Description = "seda kocka na prodej, mayliva, hrava, spolecenska " ,Price = 120, },
new AdLogEntry (){Id = 1, Image = "cat2.jpg", Name = "Kocka", Description = "seda kocka na prodej, mayliva, hrava, spolecenska " ,Price = 120, },
new AdLogEntry (){Id = 2, Image = "bobtailjpg.jpg", Name = "Kocka",Description = "seda kocka na prodej, mayliva, hrava, spolecenska ", Price = 120, },
};
}
}
}
//Detail
public class AdDetailViewModel : BaseViewModel
{
AdLogEntry _adDetail;
public AdLogEntry AdDetail { get => _adDetail;set { _adDetail = value;OnPropertyChanged(); } }
public AdDetailViewModel(AdLogEntry adDetail)
{
AdDetail = adDetail;
}
}
public partial class AdDetail : ContentPage
{
//private AdLogEntry selectedAd;
public AdDetail(AdLogEntry adDetail)
{
InitializeComponent();
BindingContext = new AdDetailViewModel(adDetail);
}
}
//BaseViewModel
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected BaseViewModel()
{
}
protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ffimageloading:CachedImage
x:Name="HeaderView"
Grid.Row="0"
Grid.RowSpan="2"
Aspect="AspectFill"
Source="{Binding AdLogEntries.Image}"/>
<controls:Parallax Control
x:Name="Parallax"
Grid.Row="0"
Grid.RowSpan="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition />
</Grid.RowDefinitions>
<yummy:Pancake View
Grid.Row="1"
CornerRadius="24, 24, 0, 0"
BackgroundColor="{StaticResource BackgroundColor}"
Margin="0, 20, 0, 0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Animal NAME -->
<Label
Grid.Row="0"
Text="{Binding AdLogEntries.Name}"
/>
<!-- QUANTITY -->
<Grid
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
Text="{Binding AdLogEntries.Price, StringFormat='{0:C0}'}"
/>
</Grid>
<!-- ABOUT -->
<Label
Grid.Row="2"
Text="Popis"
/>
<!-- DESCRIPTION -->
<Label
Grid.Row="3"
Text="{Binding AdLogEntries.Description}"
/>
<Grid
Grid.Row="4"
Margin="0, 12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- BUY NOW BUTTON -->
<yummy:PancakeView
Grid.Column="1"
HeightRequest="48"
CornerRadius="24, 0, 24, 0"
Background Color="Accent"
Margin="24, 0, 0, 0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
Text="Buy now"
/>
<Label
Grid.Column="2"
Text=">"
/>
</Grid>
</yummy:Pancake View>
</Grid>
</Grid>
</yummy:Pancake View>
</Grid>
</controls:Parallax Control>
</Grid>
</ContentPage.Content>

Your SelectedItem never changes because you are not trigger OnPropertyChange. You can change your view model logic like this:
private AdLogEntry selectedAd;
public AdLogEntry SelectedAd { get => selectedAd; set { selectedAd = value; OnPropertyChanged("SelectedAd"); } }
public ICommand AdSelectionChangedCommand => new Command(AdSelectionChanged);
private void AdSelectionChanged()
{
OnPropertyChanged("SelectedAd");
Application.Current.MainPage.Navigation.PushModalAsync(new DetailPage(SelectedAd));
}
And in your XAML:
<CollectionView x:Name="ads"
ItemsSource="{Binding AdLogEntries}"
SelectionMode="Single"
SelectionChangedCommand="{Binding AdSelectionChangedCommand}"
SelectedItem="{Binding SelectedAd, Mode=TwoWay}"
Margin="12,0">
Your detail page:
public DetailPage(AdLogEntry detail)
{
this.BindingContext = new AdDetailViewModel(adDetail);
InitializeComponent();
}
In Detail XAML:
<Label Text="{Binding AdDetail.Name}"/>

your BindingContext is AdDetailViewModel
BindingContext = new AdDetailViewModel(adDetail);
and your binding paths are like
<Label Grid.Row="3" Text="{Binding AdLogEntries.Description}"
AdDetailViewModel does not have a AdLogEntries property. It does have a AdDetail, so presumably you should use this as a binding path
<Label Grid.Row="3" Text="{Binding AdDetail.Description}"

The problem is in your detail page XAML. To be precise, the problem is in your XAML Binding Expressions. All the bindings in the detail page has wrong path set. For example, for image control it should be Source="{Binding AdDetail.Image}" instead of Source="{Binding AdLogEntries.Image}". It happens all the time and you catch these kind of errors in the output log when you debug the application.

WPF Binding a label with properties

On my WPF app page i have 2 bindings
1. for a list of items as an observable collection
2. just to show some values on a lable using binding
My class struct like this
public DbVersionModel DbVersion { get; set; }
public ObservableCollection<BookStore> StoreCollection
{ get { return thisApp.app_Stores; } }
public class DbVersionModel : INotifyPropertyChanged
{
private int _LocalVersion { get; set; }
private int _ServerVersion { get; set; }
private int _ActiveStores { get; set; }
private string _LastModifiedLocal { get; set; }
private string _LastModifiedServer { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}
public int LocalVersion
{
get { return _LocalVersion; }
set
{
_LocalVersion = value;
NotifyChange(new PropertyChangedEventArgs("LocalVersion"));
}
}
public int ServerVersion
{
get { return _ServerVersion; }
set
{
_ServerVersion = value;
NotifyChange(new PropertyChangedEventArgs("ServerVersion"));
}
}
public int ActiveStores
{
get { return _ActiveStores; }
set
{
_ActiveStores = value;
NotifyChange(new PropertyChangedEventArgs("ActiveStores"));
}
}
public string LastModifiedLocal
{
get { return _LastModifiedLocal; }
set
{
_LastModifiedLocal = value;
NotifyChange(new PropertyChangedEventArgs("LastModifiedLocal"));
}
}
public string LastModifiedServer
{
get { return _LastModifiedServer; }
set
{
_LastModifiedServer = value;
NotifyChange(new PropertyChangedEventArgs("LastModifiedServer"));
}
}
} public ManagePage()
{
InitializeComponent();
setContext();
}
private void setContext()
{
try
{
DbVersionModel db_version = new DbVersionModel();
db_version.LastModifiedServer = //set with value;
db_version.ServerVersion = //set with value;
db_version.LocalVersion = //set with value;
db_version.LastModifiedLocal = //set with value;
db_version.ActiveStores = //set with value;
this.DbVersion = db_version;
}
catch
{
}
}
xaml like this
<Page x:Class="App.ManagePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d">
<Page.Resources>
</Page.Resources>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<Grid Margin="5 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<!--// -->
<Label Content="Active stores[Local]" Grid.Column="0" Grid.Row="0" ></Label>
<Label Content="{Binding Source=DbVersion, Path=ActiveStores}" Grid.Column="1" Grid.Row="0" ></Label>
<Label Content="Current version [Local]" Grid.Column="0" Grid.Row="1" ></Label>
<Label Content="{Binding Source=DbVersion, Path=LocalVersion}" Grid.Column="1" Grid.Row="1" ></Label>
<Label Content="Curretn Version [Server]" Grid.Column="0" Grid.Row="2" ></Label>
<Label Content="{Binding Source=DbVersion, Path=ServerVersion}" Grid.Column="1" Grid.Row="2" ></Label>
<Label Content="Last modified [Local]" Grid.Column="0" Grid.Row="3" ></Label>
<Label Content="{Binding Source=DbVersion, Path=LastModifiedLocal}" Grid.Column="1" Grid.Row="3" ></Label>
<Label Content="Last modified [Server]" Grid.Column="0" Grid.Row="4" ></Label>
<Label Content="{Binding Source=DbVersion, Path=LastModifiedServer}" Grid.Column="1" Grid.Row="4" ></Label>
<StackPanel Grid.Column="0" Grid.ColumnSpan="5" Grid.Row="6" HorizontalAlignment="Center">
<Button Name="btnSync" Content="Sync stores" Height="30" Click="btnSync_Click" Style="{StaticResource ActionButtons}"></Button>
</StackPanel>
</Grid>
</ScrollViewer>
Also have a ItemsControl which is getting loaded like this and binding is working fine here
<ItemsControl Name="StoreListView" ItemsSource="{Binding StoreCollection}" Margin="5" VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling" >
But ObservableCollection list binding is fine , but the label bindings are not working. How i can solve this?
How can i set binding on label based on properties of a class

I think WPF does not notice the change of the DbVersion property because you set it after calling InitializeComponent(). Either you implement it as a DependencyProperty, which automatically notices if it is changed (see: https://msdn.microsoft.com/en-us/library/ms750428(v=vs.110).aspx), or you use the INotifyPropertyChanged interface in your ManagePage class (see: https://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged(v=vs.110).aspx).

Dynamic generation of UI Components in WPF

Alright this is a tricky situation. I have 2 xaml files in my WPF project, VoltageChannelView.xaml and VoltageView.Xaml, In my VoltageView.xaml I have divided the Grid into 3 rows as follows:
VoltageView:
<Grid Style="{DynamicResource styleBackground}" >
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
</Grid>
<Grid Name="ContentGrid" Grid.Row="1" Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Name="Label11" />
<RowDefinition Name="Label22" />
<RowDefinition Name="Label33" />
<RowDefinition Name="Label44" />
<RowDefinition Name="Label55" />
<RowDefinition Name="Label66" />
<RowDefinition Name="Label77" />
<RowDefinition Name="Label88" />
<RowDefinition Name="Label99" />
</Grid.RowDefinitions>
</Grid>
<Grid Grid.Row="2" >
<Button Content="Bavaria 2" FontSize="13" Height="25" HorizontalAlignment="Left" Margin="30,0,0,0" Name="RefreshBtn" VerticalAlignment="Center" Width="105" />
<Button Content="Redhook" FontSize="13" Height="25" HorizontalAlignment="Center" Margin="0,0,0,0" Name="Refresh1Btn" VerticalAlignment="Center" Width="105" />
<Button Content="Bavaria 1" FontSize="13" Height="25" HorizontalAlignment="Right" Margin="0,0,30,0" Name="Refresh2Btn" VerticalAlignment="Center" Width="105" />
</Grid>
</Grid>
Now you can notice Grid.Row="1" where I have divided the grid into 9 rows.
VoltageChannelView:
<CheckBox Content="On" Grid.Column="3" Height="Auto" HorizontalAlignment="Center" Margin="0" Name="On" VerticalAlignment="Center" />
<Button Content="Set" Grid.Column="1" Height="23" HorizontalAlignment="Center" Margin="85,0,0,0" Name="Set" VerticalAlignment="Center" Width="75" />
<TextBox Grid.Column="1" Height="23" HorizontalAlignment="Center" Margin="0,0,80,0" Name="textBox1" VerticalAlignment="Center" Width="70" />
<Label Content="VDD__Main" Grid.Column="0" Height="15" HorizontalAlignment="Center" Margin="0,0,70,0" Name="VoltageLabel" VerticalAlignment="Center" />
<Label Content="0.0 V" Grid.Column="2" Height="15" HorizontalAlignment="Center" Margin="0" Name="CurrentLabel" VerticalAlignment="Center" />
Now I have 3 buttons in my Grid.Row="2" and my requirement is, when I click "Bavaria 2" Button, I want the content of VoltageChannelView to be placed in my VoltageView Grid.Row="1". Here is the trick, it should dynamically generate the entire content 5 times. I.e. In 9 rows present in Grid.Row="1", the content of VoltageChannelView should appear in first 5 rows, one each in each row.
On Click "Bavaria1" it should generate the content 8 times and so on. Basically Is it possible in WPF to generate the contents of VoltageChannelView "n" times based on each button click and display it in my VoltageView??????

Yes it is. You can create a VoltageChanelView collection , and then create a datatemplate for it. i think this way it`s easier for you to display it.
First I don't really understand what you are trying to accomplish with all those grid rows and so on. but maybe using a listview instead a grid divided in 9 rows will make it simpler.
Implement this classes...
namespace TestWpf
{
class VoltageChangeModel : INotifyPropertyChanged
{
private int _Voltage = 0;
private string _ChanelName = "";
private Brush color = Brushes.Blue;
public Brush Color
{
set
{
if (value != color)
{
onPropertyChanged("Color");
color = value;
}
}
get
{
return color;
}
}
public int Voltage
{
set
{
if (value != _Voltage)
{
onPropertyChanged("Voltage");
_Voltage = value;
}
}
get
{
return _Voltage;
}
}
public String ChanelName
{
set
{
if (value != _ChanelName)
{
onPropertyChanged("ChanelName");
_ChanelName = value;
}
}
get
{
return _ChanelName;
}
}
public VoltageChangeModel(int Voltage, string ChanelName, Brush Color)
{
this.ChanelName = ChanelName;
this.Voltage = Voltage;
this.Color = Color;
}
public override string ToString()
{
return _ChanelName;
}
public void onPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
next this clas....
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
namespace TestWpf
{
class ChanellList : ObservableCollection<VoltageChangeModel>
{
}
}
in the mainWindow this code after <window ,,,,,,,,,,,>
<Grid>
<ListBox x:Name="myViewChannelList" HorizontalAlignment="Left" Height="161" ItemsSource="{Binding}" Margin="82,38,0,0" VerticalAlignment="Top" Width="187">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Background="{Binding Path=Color}">
<Label Content="{Binding Path=Voltage}" ></Label>
<Label Content="{Binding Path=ChanelName}"></Label>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
and then in code behind set the data context.
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestWpf
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ChanellList myChanels = new ChanellList();
myChanels.Add(new VoltageChangeModel(30,"Channel 1 " , Brushes.Blue ));
myChanels.Add(new VoltageChangeModel(30, "Channel 1 ", Brushes.Red));
myViewChannelList.DataContext = myChanels;
}
}
}
You have the source for download here http://mihairadulescu.com/download/TestWpf.rar