We Keep Coding

WPF - MVVM - UserControl binding

I'm trying to realize a simple example of a UserControl, showing in a TextBox the current DateTime, updated four times each second.
I create a simple user control:
<UserControl x:Class="UC.TestUC"
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:local="clr-namespace:UC"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="100">
<d:UserControl.DataContext>
<local:TestUC_VM/>
</d:UserControl.DataContext>
<Grid Background="Azure">
<TextBox Text="{Binding TestString}"/>
</Grid>
</UserControl>
Where its ViewModel is:
namespace UC
{
public class TestUC_VM : INotifyPropertyChanged
{
private string _testString;
public string TestString
{
get => _testString;
set
{
if (value == _testString) return;
_testString = value;
OnPropertyChanged();
}
}
public TestUC_VM()
{
TestString = "Test string.";
}
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
MainWindow XAML:
<Window x:Class="UC.MainWindow"
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"
xmlns:local="clr-namespace:UC"
mc:Ignorable="d"
Title="MainWindow" Height="100" Width="200">
<Window.DataContext>
<local:MainWindow_VM/>
</Window.DataContext>
<Window.Resources>
<local:TestUC_VM x:Key="TestUC_VM"/>
</Window.Resources>
<Grid>
<local:TestUC DataContext="{StaticResource TestUC_VM}"/>
</Grid>
</Window>
And its ViewModel:
namespace UC
{
public class MainWindow_VM
{
public TestUC_VM _uc_VM;
public MainWindow_VM()
{
_uc_VM = new TestUC_VM();
Task.Run(() => ChangeString());
}
public async Task ChangeString()
{
while (true)
{
_uc_VM.TestString = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff");
await Task.Delay(250);
}
}
}
}
Even though I see with debugger that I'm passing through the TestString setter, the MainWindow is not updated.
I'm quite sure I'm missing something trivial in setting DataContext of UC in MainWindow, but I've not been able to find what after several hours of browsing and thinking.
Any help appreciated.

The expression
<local:TestUC DataContext="{StaticResource TestUC_VM}"/>
assigns the value of the TestUC_VM resource to the UserControl's DataContext. This is a different object than the _uc_VM member of the main view model, which you are later updating.
Turn the member into a public property
public TestUC_VM UcVm { get; } = new TestUC_VM();
and write
<local:TestUC DataContext="{Binding UcVm}"/>
Update the view model like this:
UcVm.TestString = ...

Binding Page with ViewModel (MVVM) on Universal Windows App

I need to bind a page on Frame control in Xaml wpf page.
my xaml page:
<Page
x:Class="MyPro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyPro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewmodel="using:MyPro.ViewModel"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x1="using:System"
mc:Ignorable="d">
<Page.DataContext>
<viewmodel:PagerViewModel x:Name="PagerViewModel"></viewmodel:PagerViewModel>
</Page.DataContext>
<Frame
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Name="frameMainPage"
DataContext="{Binding Source=Pager.Page, Mode=TwoWay}">
</Frame>
I've tried to use this (but i don't know if it's correct):
DataContext="{Binding Source=Pager.Page, Mode=TwoWay}"
but doesn't work.
My view model, i call Pager to set the new Page:
class PagerViewModel
{
public PagerViewModel()
{
m_pager = new Pager();
}
public static Pager m_pager;
public Pager Pager
{
get
{
return m_pager;
}
set
{
m_pager = value;
}
}
}
and my model, i set page mode like this:
public class Pager : INotifyPropertyChanged
{
private Page m_page;
public Page Page
{
get
{
return m_page;
}
set
{
m_page = value;
OnPropertyChanged("Page");
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
I need to change page like this from every part in the code:
PagerViewModel.m_pager.Page = new MyPage();
How can I do this on Universal windows app UWP?

I've solved like this:
DataContext="{Binding Path=Pager.Page, Mode=TwoWay}"
You have to use Path and not Source in Universal App on UWP

Binding to DataContext of Frame does not do anything. DataContext is basically only telling the control what do its binding's relative paths refer to, but don't cause any behavior (or at least this holds for the built-in controls).
In your case you need to bind to the Content property of the Frame control:
<Frame Content="{Binding Pager.Page}" />
This does work for me, I have tested it on a blank solution with your code and an additional button on the main page:
XAML
<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.DataContext>
<local:PagerViewModel x:Name="PagerViewModel"></local:PagerViewModel>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Frame Width="500" Height="500" Content="{Binding Pager.Page}" />
<Button Click="ButtonBase_OnClick">Click</Button>
</Grid>
</Page>
Code-behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
((PagerViewModel)DataContext).Pager.Page = new SecondPage();
}
}
SecondPage is an empty page which I set to have a blue background to be able to clearly see that it is displayed in the Frame.

C# WPF OxyPlot error plot does not exist in namespace

Hi I have a problem configuring oxyplot in WPF. I have found a few solutions but nothing works. I have found out that this is the best http://blog.bartdemeyer.be/2013/03/creating-graphs-in-wpf-using-oxyplot/
but something still wrong and I get this error in XAML file:
the name plot does not exist in the namespace codeplex
MainWindow.xaml FILE:
<Window x:Class="OxyPlotDemo.MainWindow"
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"
xmlns:local="clr-namespace:OxyPlotDemo"
xmlns:oxy="http://oxyplot.codeplex.com"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<oxy:Plot x:Name="Plot1" Title="A Graph" Model="{Binding PlotModel}" Margin="10" Grid.Row="1">
</oxy:Plot>
</Grid>
MainWindow.xaml.cs
using System.Windows;
namespace OxyPlotDemo
{
public partial class MainWindow : Window
{
private ViewModels.MainWindowModel viewModel;
public MainWindow()
{
viewModel = new ViewModels.MainWindowModel();
DataContext = viewModel;
InitializeComponent();
}
}
}
MainWindowModel.cs
using System.ComponentModel;
using OxyPlot;
namespace OxyPlotDemo.ViewModels
{
public class MainWindowModel : INotifyPropertyChanged
{
private PlotModel plotModel;
public PlotModel PlotModel
{
get { return plotModel; }
set { plotModel = value; OnPropertyChanged("PlotModel"); }
}
public MainWindowModel()
{
PlotModel = new PlotModel();
}
public event PropertyChangedEventHandler PropertyChanged;
//[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Maybe someone has better solution. I just need to display a few charts, that contains a lot of data from sensors, not in real time.

I've had a same issue with OxyPlot lib from NuGet, when migrating from lib version 1.x to 2.1.
SO i found, that in version 2.1 Plot class is moved to another library, see releases history at their github page.
That worked for me:
xmlns:oxy="http://oxyplot.org/wpf"
xmlns:oxycontrols="http://oxyplot.org/wpf/contrib"
<oxycontrols:Plot .../>

<Window x:Class="Universal_trc_csvParser.Window1"
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"
xmlns:local="clr-namespace:Universal_trc_csvParser"
xmlns:oxy="http://oxyplot.org/wpf"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<oxy:PlotView Model="{Binding MyModel}"/>
</Grid>
</Window>
public class MainViewModel
{
public MainViewModel()
{
this.MyModel = new PlotModel { Title = "Example 1" };
this.MyModel.Series.Add(new FunctionSeries(Math.Cos, 0, 10, 0.1, "cos(x)"));
}
public PlotModel MyModel { get; private set; }
}
This worked for me.

I had the same issue.
So what i did was downgrade my "OxyPlot.Wpf" to version 1.0.0. and the example you speak of works fine, without the error "the name plot does not exist in the namespace".
<oxy:Plot x:Name="Plot1" Title="A Graph" Model="{Binding PlotModel}" Margin="10" Grid.Row="1">
</oxy:Plot>

WPF Bind Window Title to ViewModel Property

I am trying to bind a Window Title to the ViewModel which has a Title property. Below is the MainWindow XAML:
<Window x:Class="MyProject.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MyProject.ViewModel;assembly=MyProject.ViewModel"
Title="{Binding Path=Title}" Height="350" Width="525" DataContext="{Binding Source={StaticResource mainWindowViewModel}}">
<Window.Resources>
<vm:MainWindow x:Key="mainWindowViewModel"/>
</Window.Resources>
...
</Window>
When I try to run this, I get the following exception "Provide value on 'System.Windows.StaticResourceExtension' threw an exception. The line number and position point to the DataContext property, and the inner exception states "Cannot find resource named mainWindowViewModel.
Below is the code for the View Model:
namespace MyProject.ViewModel
{
public class MainWindow : INotifyPropertyChanged
{
#region Fields
private const string TitlebarPrefixString = "My Project";
private string title = TitlebarPrefixString;
public string Title {
get
{
return this.title;
} // End getter
set
{
this.title = value;
OnPropertyChanged("Title");
} // End setter
} // End property
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
} // End if
} // End method
public event PropertyChangedEventHandler PropertyChanged;
} // End class
} // End namespace
My theory is that the resources are loaded after the attempt to bind the title to the property. When the exception is thrown, the Resources property for the Window is empty.
Is the only solution to set the DataContext in the Code Behind? I can get this to work, but I would prefer to keep it in XAML.

You can try to set the DataContext using property element syntax:
<Window x:Class="MyProject.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MyProject.ViewModel;assembly=MyProject.ViewModel"
Title="{Binding Path=Title}" Height="350" Width="525">
<Window.Resources>
<vm:MainWindow x:Key="mainWindowViewModel"/>
</Window.Resources>
<Window.DataContext>
<StaticResourceExtension ResourceKey="mainWindowViewModel"/>
</Window.DataContext>
That should work as the xaml parser will execute StaticResourceExtension after the resources dictionary is set.
But i think maybe even better would be to set the DataContext directly, without declaring it as resource:
<Window x:Class="MyProject.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MyProject.ViewModel;assembly=MyProject.ViewModel"
Title="{Binding Path=Title}" Height="350" Width="525">
<Window.DataContext>
<vm:MainWindow x:Key="mainWindowViewModel"/>
</Window.DataContext>

A little late but a simple and perfect solution that I am using just in case people are still searching for possibilities:
<Window x:Class="Project.MainWindow"
Title="{Binding DataContext.ApplicationTitle, ElementName=TheMainView}">
<views:MainView x:Name="TheMainView"/>
</Window>
Than simply enough, just add a Property to your MainViewModel that is the DataContext of the MainView like so:
public string ApplicationTitle
{
get
{
var text = "Application Name";
if (!string.IsNullOrEmpty(_currentFileLoaded))
{
text += $" ({_currentFileLoaded})";
}
return text;
}
}
Hope it helps..

Setting Usercontrol's custom dependency proeprty by xaml

Here is my user control(MonthCal)'s code behind.
public partial class MonthCal : UserControl
{
public DayOfWeek StartDayOfWeek { get { return (DayOfWeek)GetValue(StartDayOfWeekProperty); } set { SetValue(StartDayOfWeekProperty, value); } }
public static readonly DependencyProperty StartDayOfWeekProperty = DependencyProperty.Register("StartDayOfWeek", typeof(DayOfWeek), typeof(MonthCellHeader), new UIPropertyMetadata(DayOfWeek.Sunday, StartDayOfWeek_PropertyChanged));
//...
}
and also, here is a xaml of the MonthCal.
<UserControl x:Class="GCDR.MonthCal"
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"
mc:Ignorable="d">
<!-- ... -->
</UserControl>
And so, How can I set the 'StartDayOfWeek' dependency property in xaml? as you guys know, the following code is impossible:
<UserControl ...
StartDayOfWeek="Sunday">
</UserControl>
Please give me a help.

You can not use the dependency property in markup of the UserControl but you can use it when you place instance of the user control somewhere like so:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1">
<Grid>
<local:UserControl1 local:StartDayOfWeek="Friday" />
</Grid>
</Window>
With in your user control you can bind some other property to your dependency property like so:
<UserControl x:Class="WpfApplication1.UserControl1"
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:local="clr-namespace:WpfApplication1"
mc:Ignorable="d" >
<Grid>
<Label Content="{Binding RelativeSource={RelativeSource AncestorType=local:UserControl1},Path=StartDayOfWeek}" />
</Grid>
</UserControl>

Why you cannot set StartDayOfWeek is that UserControl in XAML does not have StartDayOfWeek dependency property, in other word UserControl type is not MonthCal type.
As, in XAML, UserControl is base class of UserControl1, you can define MonthCal inherited UserControl and then declare MonthCal in XAML.
XAML
<local:MonthCal x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1" Title="MainWindow"
Height="350" Width="525"
StartDayOfWeek="Monday">
<Grid></Grid>
</local:MonthCal>
Codebehinde
namespace WpfApplication1
{
public class MonthCal : Window
{
public DayOfWeek StartDayOfWeek { get { return (DayOfWeek)GetValue(StartDayOfWeekProperty); } set { SetValue(StartDayOfWeekProperty, value); } }
public static readonly DependencyProperty StartDayOfWeekProperty =
DependencyProperty.Register("StartDayOfWeek", typeof(DayOfWeek), typeof(MonthCal), new UIPropertyMetadata(DayOfWeek.Sunday, StartDayOfWeek_PropertyChanged));
private static void StartDayOfWeek_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
}
}
public partial class MainWindow : MonthCal
{
public MainWindow()
{
InitializeComponent();
}
}
}