WPF MVVM binding to DependencyProperty of a UserControl not working - wpf

I am trying to stick close to MVVM approach to building my WPF app and am running into a weird binding issue and feel like I'm missing something.
I have a user control (PluginsTreeView) which has a ViewModel (PluginsViewModel) driving it. PluginsTreeView exposes a public DependencyProperty of type string (DocumentPath). My MainWindow set's this property in XAML, but it doesn't seem to make it to my UserControl. I'm looking for some indication as to why this doesn't work.
PluginsTreeView.xaml.cs
public partial class PluginsTreeView: UserControl
{
public PluginsTreeView()
{
InitializeComponent();
ViewModel = new ViewModels.PluginsViewModel();
this.DataContext = ViewModel;
}
public static readonly DependencyProperty DocumentPathProperty =
DependencyProperty.Register("DocumentPath", typeof(string), typeof(PluginsTreeView), new FrameworkPropertyMetadata(""));
public string DocumentPath
{
get { return (string)GetValue(DocumentPathProperty); }
set
{
//*** This doesn't hit when value set from xaml, works fine when set from code behind
MessageBox.Show("DocumentPath");
SetValue(DocumentPathProperty, value);
ViewModel.SetDocumentPath(value);
}
}
....
}
MainWindow.xaml
My PluginsTreeView never gets the value 'test path' and I'm not sure why. I feel like I'm missing something fundamental here.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Views="clr-namespace:Mediafour.Machine.EditorWPF.Views" x:Class="Mediafour.Machine.EditorWPF.MainWindow"
xmlns:uc="clr-namespace:Mediafour.Machine.EditorWPF.Views"
Title="MainWindow" Height="350" Width="600">
<Grid>
<uc:PluginsTreeView x:Name="atv" DocumentPath="from xaml" />
</Grid>
</Window>
But, when I set the DependencyProperty from the code-behind of the MainWindow, it does seem to set the value correctly. I'm trying to figure out the difference here and why the code-behind approach works and setting the property in xaml doesn't.
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MainWindowViewModel ViewModel = new MainWindowViewModel();
this.DataContext = ViewModel;
atv.DocumentPath = "from code behind"; //THIS WORKS!
}
....
}
Messing around with Snoop, I see that the value from XAML "from xaml" does make it into the property but my Set method in PluginsTreeView still never gets hit. The message box I have in there as a debug tool doesn't pop unless value is set from MainWindow code-behind.

Apparently you should not add any logic to these properties setters, because they are only called when you set the property from code. If you set the property from XAML the SetValue() method is called directly. I've ended up registering a callback method and all works great now:
public static readonly DependencyProperty DocumentPathProperty = DependencyProperty.Register("DocumentPath", typeof(string), typeof(PluginsTreeView), new FrameworkPropertyMetadata("initial value", OnValueChanged));

Related

Microsoft WPF Designer Value For Property Not Updating When Changed By Another Property

Similar questions have been asked for WinForms projects, but not for WPF projects.
This VERY simple sample below shows the issue. The real user control I have is much more complicated but this sample shows the basic issue I am having.
The UserControl1 xaml (nothing there as it doesn't need anything to show the issue)
<UserControl x:Class="TestProperty.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"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
</Grid>
</UserControl>
The Window xaml (just contains a UserControl1):
<Window
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:TestProperty="clr-namespace:TestProperty;assembly=TestProperty" x:Class="TestApp.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<TestProperty:UserControl1 HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>
The actual Window code-behind is really nothing
using System.Windows;
namespace TestApp
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
Here is code-behind for UserControl1. Has two properties where the first property simply modifies the second to be the same.
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
namespace TestProperty
{
/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
[Description("Sets a test property value that sets another property.")]
[Category("UserControl1")]
[RefreshProperties(RefreshProperties.All)]
public bool TestValue1
{
get => (bool) GetValue(TestValue1Property);
set => SetValue(TestValue1Property, value);
}
public static readonly DependencyProperty TestValue1Property =
DependencyProperty.Register(
"TestValue1", typeof(bool), typeof(UserControl1),
new FrameworkPropertyMetadata(false,
new PropertyChangedCallback(TestValue1Changed)));
private static void TestValue1Changed(DependencyObject d, DependencyPropertyChangedEventArgs e) =>
((UserControl1) d)?.TestValue1Changed(e);
private void TestValue1Changed(DependencyPropertyChangedEventArgs e)
{
TestValue2 = (bool) e.NewValue;
InvalidateProperty(TestValue2Property);
}
[Description("Value should change automatically when TestValue1 changes.")]
[Category("UserControl1")]
[RefreshProperties(RefreshProperties.Repaint)]
public bool TestValue2
{
get => (bool) GetValue(TestValue2Property);
set => SetValue(TestValue2Property, value);
}
public static readonly DependencyProperty TestValue2Property =
DependencyProperty.Register(
"TestValue2", typeof(bool), typeof(UserControl1),
new FrameworkPropertyMetadata(false,
new PropertyChangedCallback(TestValue2Changed)));
private static void TestValue2Changed(DependencyObject d, DependencyPropertyChangedEventArgs e) =>
((UserControl1) d)?.TestValue2Changed(e);
private void TestValue2Changed(DependencyPropertyChangedEventArgs e)
{
InvalidateProperty(TestValue2Property);
}
}
}
The attribute RefreshProperties and the call to InvalidateProperty appear to do nothing.
When editing the MainWindow.xaml and selecting UserControl1, the UserControl1 section of the Properties window shows TestValue1 and TestValue2. If TestValue1 is changed, TestValue2 does NOT change. However, if you change to another Visual Studio (or Blend) editor window and then back to the MainWindow.xaml, then TestValue2 will be the same as TestValue1.
I cannot seem to find any method to automatically have TestValue2 update when TestValue1 forces the update. The real case is obviously more complex with quite a few controls and when adding our UserControl, we want the designer to be able to specify several properties that can result in forcing (or coercing) other properties. However, the designer needs to be able to see the property value changes without having to switch to another file and back again to redraw the designer's properties window.
Is this something that simply can't be done - or is there something I'm missing. Note that this is a UserControl and is not designed to operate itself MVVM, but allow another window to be designed using the control with (or without) MVVM design.
Also, in a 'kind of' related issue. We have one property that needs to have an entry in the properties the same as Width and Height with the auto button. When set to Auto display "Auto (nnn)" as the automatically set value changes nnn changes. When not set, the value is simply nnn and is defined during the design of the window using the UserControl. Is this possible?
Thanks in advance to anyone who can shed light on this.

Navigation through button command in viewmodel

I have a WPF application with two pages, now I wanted to navigate to the other page when the button in first the page is clicked (I wrote the command for button in the first page), but the logic should be through the viewmodel. How to achieve this?
When I write WPF applications that need to navigate to different pages, I like to follow Rachel Lim's method to implement it using DataTemplates and ViewModels. You can follow the link to her page to get the exact code for the solution, but I'll give a little summary of her method here.
In her method, she creates a ViewModel that represents the application and has a property called CurrentPage which holds a ViewModel. You can then create a command on the ApplicationViewModel called ChangePage. This command will take the ViewModel that is passed as a parameter and sets it to the CurrentPage.
The xaml takes the responsibility of switching out the correct views. When using this method, I put a ContentControl in my MainWindow and bind the Content property to ApplicationViewModel.CurrentPage. Then in the resources of the MainWindow, I create DataTemplates to tell the view "When I try to display this ViewModel, put that View on the screen".
You don't really provide any code. But I assume your Navigation is in your code behind. You could do this by binding a Command OneWayToSource.
XAML
<local:MainWindow x:Class="WpfNameSpace.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:WpfNameSpace"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
NavigatePageCommand="{Binding Path=MyViewModel.NavigateCommand, Mode=OneWayToSource}"
Title="MainWindow" Height="600" Width="800">
<Grid>
</Grid>
</local:MainWindow>
Please take a look at local:MainWindow.
C#
public partial class MainWindow : Window
{
public ICommand NavigatePageCommand
{
get { return (ICommand) GetValue(NavigatePageCommandProperty); }
set { SetValue(NavigatePageCommandProperty, value); }
}
// Using a DependencyProperty as the backing store for NavigatePageCommand. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NavigatePageCommandProperty =
DependencyProperty.Register("NavigatePageCommand", typeof(ICommand), typeof(MainWindow),
new PropertyMetadata(0));
public MainWindow()
{
InitializeComponent();
NavigatePageCommand = new RelayCommand(Navigate);
}
public void Navigate()
{
//Do Navigation here
}
}
I assume you are familiar with Commands, ViewModels and Bindings and you get the idea.

XAML: How can I bind a DependencyProperty to a C# property of the same name on a different object?

Using:
Visual Studio Community Edition 2015
.Net 4.0
I've implemented this answer, producing my own CheckBox class complete with an IsChecked DependencyProperty. That property is backed by the IsChecked property on the WPF CheckBox, or would be if it would work. Working would mean my getter and setter are called when the checkbox is toggled.
If I rename my property to IsChecked_temp and modify the XAML to match, it works fine. I think this is a naming conflict, but why doesn't ElementName resolve it? My minimal test case follows.
EDIT 0: I forgot to mention, I get no errors or warnings.
EDIT 1: This answer was initially accepted because it works for the test case, but it's apparently not the entire answer. Applying it to my project (and renaming the CheckBox class to ToggleBox) yields a XamlParseException at every use of the property:
A 'Binding' cannot be set on the 'IsChecked' property of type 'ToggleBox'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.
I'll try to get a minimal test case going to show this.
CheckBox.xaml
<UserControl x:Class="CheckBox_test.CheckBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Self">
<StackPanel>
<CheckBox IsChecked="{Binding IsChecked, ElementName=Self}" />
</StackPanel>
</UserControl>
CheckBox.xaml.cs
using System.Windows;
using System.Windows.Controls;
namespace CheckBox_test
{
public partial class CheckBox : UserControl
{
public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register(
"IsChecked",
typeof(bool),
typeof(CheckBox),
new FrameworkPropertyMetadata(false,
FrameworkPropertyMetadataOptions.AffectsRender));
public bool IsChecked
{
get { return (bool)GetValue(IsCheckedProperty); }
set { SetValue(IsCheckedProperty, value); }
}
public CheckBox()
{
InitializeComponent();
}
}
}
MainWindow.xaml
<Window x:Class="CheckBox_test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CheckBox_test">
<Grid>
<local:CheckBox />
</Grid>
</Window>
MainWindow.xaml.cs (for completeness)
using System.Windows;
namespace CheckBox_test
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
Very interesting question (at least for me) so it turns out that there is really a conflict of names when you register your Dependency Property.
I'm not exactly sure if this is an answer but I think you'll find this interesting if you didn't knew or thought about it before.
I've used "CheckBox.IsChecked", but any unique name would suffice probably.
public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register(
"CheckBox.IsChecked",
typeof(bool),
typeof(CheckBox),
new FrameworkPropertyMetadata(false,
FrameworkPropertyMetadataOptions.AffectsRender));
This works without change in the name of your property
public bool IsChecked
{
get
{
return (bool)GetValue(IsCheckedProperty);
}
set
{
SetValue(IsCheckedProperty, value);
}
}
When you create names for your dependency properties, you must choose
unique names that are not being used for dependency properties or
events in any base classes that you inherit from; otherwise, an
ArgumentException is thrown during runtime. For more information about
dependency properties and activity binding, see Custom Activity
Binding Sample and Simple Activity Sample.
https://msdn.microsoft.com/en-us/library/vstudio/ms734499(v=vs.90).aspx
Yet another reminder how big of a noob I am :)

Calling a custom dependency property defined in code-behind from XAML

Is it possible to call a custom dependency property in the XAML of the element in which it is defined?
I mean, i have the following simple code for my mainWindow:
Code
public partial class MainWindow : Window
{
public static readonly DependencyProperty SpecialToProperty = DependencyProperty.Register("SpecialTo", typeof(double), typeof(MainWindow));
public MainWindow()
{
InitializeComponent();
}
public double SpecialTo
{
get
{
return (double)GetValue(SpecialToProperty);
}
set
{
SetValue(DoubleAnimation.ToProperty, value);
}
}
}
How can i use that dependency property from the XAML partial code of the MainWindow class?
I mean something like:
<Window x:Class="WpfAnimationTEst.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"
SpecialTo=200>
I know it can be done using attached dependency properties, but is it the only way? Is it not possible to call a dependency property defined in the code-behind?
Thank you and sorry if the question is some kind of stupid, i'm just learning and trying to understand WPF.
I found the answer after I initially posted a wrong answer:
The problem really lies in circular dependencies if you use andreask's answer. I had to create a BaseClass for all windows:
1) Create a new Window Base Class:
public class BaseWindow : Window {
public BaseWindow() { }
public static readonly DependencyProperty SpecialToProperty = DependencyProperty.Register("SpecialTo", typeof(double), typeof(BaseWindow));
public double SpecialTo {
get {
return (double)GetValue(SpecialToProperty);
}
set {
SetValue(SpecialToProperty, value);
}
}
}
This will be the new baseclass for all your windows.
2) Modify your MainWindow xaml: (Change YOURNAMESPACE (2x) to your namespace name)
<local:BaseWindow x:Class="YOURNAMESPACE.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YOURNAMESPACE"
Title="MainWindow" Height="350" Width="525" SpecialTo="100">
<Grid>
</Grid>
</local:BaseWindow>
3) And you also need to modify your partial MainWindow.cs:
public partial class MainWindow : BaseWindow {
public MainWindow() {
InitializeComponent();
}
}
That worked for me, however, you will always need to use the extra xaml markup in your window declaration.
I'm answering my own question because there seems to be many ways to solve it correctly. I've upvoted the answers that best helped me, but i can't set any as the correct answer since all are correct.
So i'll just post a conclusion. If you think that i'm mistaken, please post a comment and i will correct my mind.
The main answer to my question is no, it is not possible to directly call a custom dependency property defined at code-behind from its "linked" XAML file. It is mandatory to instantiate the control in which the property is defined to call it.
To me, the best workarrounds to use a custom dependency property in XAML, defined in the code-behind are the posted by #Clemens and #Noel Widmer. This and this
You can use custom dependency properties in XAML, but only if you instantiate the control in XAML. For example, take a customized TextBox element:
public class MyTextBox : TextBox
{
public static readonly DependencyProperty SpecialToProperty = DependencyProperty.Register("SpecialTo", typeof(double), typeof(MyTextBox));
public double SpecialTo
{
get
{
return (double)GetValue(SpecialToProperty);
}
set
{
SetValue(DoubleAnimation.ToProperty, value);
}
}
}
You can of course create an instance of MyTextBox in XAML and assign the SpecialTo property there:
<custom:MyTextBox SpecialTo="1.0" />
In your case, however, you're not instantiating the custom class MainWindow, but you create a new instance of class Window, and the Window class isn't aware of the custom dependency property (the SpecialTo property is not even available in Window, since you declared it within the MainWindow class).
For the dependency property to be recognized, you'd need to instantiate MainWindow directly:
<custom: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"
SpecialTo=200>
However, this means you need to omit the x:class directive that used to combine XAML and codebehind of your window (otherwise you'd run into circular dependencies), and I'm not sure if this correctly initalizes your window...
Yes, it is possible. Dependency properties are used to bind within XAML. If you want to bind to property defined in the code behind window you need to reference this window as XAML element, i.e. add tag for your main window x:Name="mainWindow", and next in the binding expression refer it as ElementName=mainWindow

Silverlight - User Control Binding

I am learning Silverlight. In the process, I'm trying to build a custom user control. My ultimate goal is to be able to write the following statement in XAML:
<my:CustomControl>
<my:CustomControl.MainControl>
<Canvas><TextBlock Text="Hello!" /></Canvas>
</my:CustomControl.MainContent>
</my:CustomControl>
The content of the control will be wrapped in a custom border. Once again, this is just a learning exercise. To append my border, I have create the following UserControl:
<UserControl x:Class="CustomControl"
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">
<Grid x:Name="LayoutRoot">
<Border>
<!-- CustomControl Content -->
</Border>
</Grid>
</UserControl>
The code-behind for this file looks like the following:
public partial class CustomControl : UserControl
{
public UIElement MainContent
{
get { return (UIElement)GetValue(MainContentProperty); }
set { SetValue(MainContentProperty, value); }
}
public static readonly DependencyProperty MainContentProperty =
DependencyProperty.Register("MainContent", typeof(UIElement), typeof(CustomControl),
new PropertyMetadata(null));
public CustomControl()
{
InitializeComponent();
}
}
The thing I am having a problem with is getting the MainContent to appear in my CustomControl. I am confident that I am setting it properly, but I'm not sure how to display it. I really want it to be a DependencyProperty as well so I can take advantage of data binding and animations.
How do I get the MainContent to appear in the CustomControl? Thank you
First you need to wait until the rest of the control has been parsed so you need to hook the loaded event:-
public CustomControl()
{
InitializeComponent();
Loaded += new RoutedEventHandler(CustomControl_Loaded);
}
Then in the loaded event assign your MainControl property to the Child property of the border. To do that its best if you give your Border an x:Name which for now I'll simple call "border".
void CustomControl_Loaded(object sender, RoutedEventArgs e)
{
border.Child = MainControl;
}
That'll get you going. Of course you may need to deal with the MainControl property being changed dynamically so you need add a bool isLoaded field in your control and set that in the loaded event. When true your MainControl setter should assign the incoming value to the border.Child.
Things can start to get more complicated and in fact I don't recommend this approach to creating a custom control. For a better approach see Creating a New Control by Creating a ControlTemplate

Resources