I'm using Mvvm/Prism to design an interface , i created a user control with code behind that have label textbox boutton (nothing mvvm)
the whole project is on mvvm pattern and i have a page Home that contains 3 of that user control.
In my userControl i databind the label content to a property (string)PROP1 the textbox content (string)PROP2 to a property (code behind) and in my HOME i just bind those properties to the propperties in my HomeViewModel
<local:userControl PROP1="{Binding Text}" PROP2="{Binding Name}" />
Now i want to databind the button click with same method , what want todo in my userControl page is
<Button Content="Button" Command="{Binding Klick}"/>
But i don't know how to store it in property so i can use it later
Here is how i want the final Home something like
<local:userControl Klick="{Binding Commandp}" PROP1="{Binding Textp}" PROP2="{Binding Namep}" />
and the HomeViewModel
class HomeViewModel : BindableBase
{
public ICommand Commandp{ get; private set; }
private readonly IRegionManager _regionManager;
public HomeViewModel (IRegionManager regionManager)
{
Commandp= new DelegateCommand(() => NavigateTo("Docs"));
}
private void NavigateTo(string url)
{
_regionManager.RequestNavigate(Regions.Contentregoin, url);
}
}
PS: I'm using the ViewModelLocator.AutoWireViewModel
That works the same way as PROP1 and PROP2 - create a dependency property and you're good to go.
public static readonly DependencyProperty KlickProperty = DependencyProperty.Register( nameof(Klick), typeof(ICommand), typeof(userControl), new PropertyMetadata( default(ICommand) ) );
public ICommand Klick
{
get { return (ICommand)GetValue( KlickProperty ); }
set { SetValue( KlickProperty, value ); }
}
Related
I have an application in which I set the content of a contentpresenter, dependent on the datatype by a datatemplate (see MainWindow). The Datatemplate is a usercontrol, which is actually datatype specific. (The small example below is only for demonstration, but in my "real" application the user shall be able to switch between different data.)
The usercontrol (UserControl1) has a DependencyProperty which I assign a value (in my application this is actually a binding to a VM, just set it to a string in example for simplicity).
Setting the value is still working fine. However In my UserControl I need to react to changes of the DependencyProperty to change the view of my UserControl (or later on CustomControl). So I implemented a OnPropertyChangend method.
When application starts OnPropertyChanged works as I expect it and I get the "correct" newvalue of my DependencyProperty. However, if I change my VM (i.e. my datatemplate changes) during runtime by clicking on a button, OnPropertyChanged returns the DependencyProperty's defaultvalue.
In my small example application, I can see that the value is set correctly, as the Textblock content changes to the correct value.
It only seems that OnPropertyChanged gets fired before my DependencyProperty's value gets the new value. So, it's not possible for me to react on the new value.
It is not really clear why this happens. Seems to have something to do with the order in which WPF resolves internal stuff?
Does anyone have a clue, how I can fix this behavior and get access to the current/last value when changing my VM and don't miss an update? As stated out before, I need to react on that value.
Maybe I am doing something totally stupid here. Is the approach I decided to use here a bad one? Are DataTemplates the wrong approach to switch between two pairs? What would be a better approach then? However, I guess it won't be possible to avoid the DependencyProperty and the UserControl in my application.
MainWindow.xaml
<!--MainWindow.xaml -->
<Grid>
<StackPanel>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<ContentPresenter Content="{Binding ActiveVM}">
<ContentPresenter.Resources>
<DataTemplate DataType="{x:Type local:VM1}">
<local:UserControl1 MyProperty="Test1"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:VM2}">
<local:UserControl1 MyProperty="Test2"/>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
</StackPanel>
</Grid>
MainWindow.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
vmParent = new VMParent();
DataContext = vmParent;
var vm1 = new VM1();
var vm2 = new VM2();
}
VMParent vmParent;
private void Button_Click(object sender, RoutedEventArgs e)
{
vmParent.ChangeActiveVM();
}
}
UserControl1.xaml
<!--UserControl1.xaml -->
<TextBlock Text="{Binding MyProperty, RelativeSource={RelativeSource AncestorType={x:Type local:UserControl1}}}"/>
UserControl1.cs
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
public string MyProperty
{
get { return (string)GetValue(MyPropertyProperty); }
set { SetValue(MyPropertyProperty, value); }
}
public static readonly DependencyProperty MyPropertyProperty =
DependencyProperty.Register("MyProperty", typeof(string), typeof(UserControl1), new PropertyMetadata("DefaultString", OnMyPropertyChangend));
private static void OnMyPropertyChangend(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.NewValue == "DefaultString")
{
;
//xxxxxx
//unexpectedly i get stuck here
//Would expect/need NewValue to be Text1/Text2 to react to it
//xxxxxx
}
}
}
VMParent
class VMParent : INotifyPropertyChanged
{
public VMParent()
{
vm1 = new VM1();
vm2 = new VM2();
ActiveVM = vm1;
}
public event PropertyChangedEventHandler PropertyChanged;
VM1 vm1;
VM2 vm2;
public object ActiveVM
{
get => m_activeVM;
set { m_activeVM = value; OnPropertyChanged("ActiveVM"); }
}
private object m_activeVM;
protected internal void OnPropertyChanged(string propertyname)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
public void ChangeActiveVM()
{
if (ActiveVM is VM1)
ActiveVM = vm2;
else
ActiveVM = vm1;
}
}
VMs are only used to apply Datatemplate
class VM1
{
}
class VM2
{
}
My issue is my OnMatrixPropertyChanged method never gets called. The label, which is bound to the same property, does update so I know binding is happening on the Matrix property.
I have a UserControl that I want to add a DependencyProperty to in order that it can be bound to. My MainWindow looks like this:
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<StackPanel>
<Button
Command="{Binding LoadMatrixCommand}"
Content="Load"
Width="150">
</Button>
<Label
Content="{Binding Matrix.Title}">
</Label>
<controls:MatrixView
Matrix="{Binding Path=Matrix, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</controls:MatrixView>
</StackPanel>
In my MatrixView UserControl code-behind I have the DependencyProperty set as such:
public partial class MatrixView : UserControl
{
public static readonly DependencyProperty MatrixProperty =
DependencyProperty.Register(nameof(Matrix), typeof(Matrix), typeof(MatrixView), new PropertyMetadata(default(Matrix), OnMatrixPropertyChanged));
private static void OnMatrixPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// Do Something
}
public Matrix Matrix
{
get => (Matrix)GetValue(MatrixProperty);
set => SetValue(MatrixProperty, value);
}
public MatrixView()
{
InitializeComponent();
}
}
I must be missing something very obvious...
EDIT #1: View Models
public class MatrixViewModel : ViewModelBase
{
public MatrixViewModel()
{
}
}
public class MainWindowViewModel : ViewModelBase
{
private IMatrixService _matrixService;
private Matrix _matrix;
public Matrix Matrix
{
get => _matrix;
set
{
_matrix = value;
base.RaisePropertyChanged();
}
}
public ICommand LoadMatrixCommand { get; private set; }
public MainWindowViewModel()
{
LoadMatrixCommand = new RelayCommand(LoadMatrix);
_matrixService = new MatrixService();
}
private void LoadMatrix()
{
var matrixResult = _matrixService.Get(1);
if (matrixResult.Ok)
{
Matrix = matrixResult.Value;
}
}
}
There certainly is something like
<UserControl.DataContext>
<local:MatrixViewModel/>
</UserControl.DataContext>
in the XAML of your UserControl. Remove that, because it prevents that a Binding like
<controls:MatrixView Matrix="{Binding Matrix}" />
looks up the Matrix property in the correct view model instance, i.e. the one inherited from the MainWindow.
UserControls with bindable (i.e. dependency) properties should never set their own DataContext, because doing so breaks any DataContext based bindings of these properties.
I have extended the functionality of a textbox, below is part of the class with an attached property RegularExpressionEnabled:
public class AlphaNumericTextBox : TextBox
{
#region DependencyProperties
public static readonly DependencyProperty RegularExpressionEnabledProperty =
DependencyProperty.Register("RegularExpressionEnabled", typeof(bool), typeof(AlphaNumericTextBox),
new UIPropertyMetadata(false));
public bool RegularExpressionEnabled
{
get { return (bool)GetValue(RegularExpressionEnabledProperty); }
set { SetValue(RegularExpressionEnabledProperty, value); Console.WriteLine("RegularExpressionEnabled:" + (bool)value); }
}
}
This class is then incorporated into a UserControl.
XAML:
<UserControl x:Class="Libs_ViewLevel.Controls.FilterItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Libs_ViewLevel"
xmlns:ctrls="clr-namespace:Libs_ViewLevel.Controls"
x:Name="UserControl">
<Grid x:Name="LayoutRoot" Height="Auto" >
<ctrls:AlphaNumericTextBox x:Name="AlphaNumericTbx"
Grid.ColumnSpan="2"
Text="{Binding AlphaNumericValue}"
RegularExpressionEnabled="{Binding RegExpressionEnabled}" />
</Grid>
</UserControl>
Code-Behind:
public partial class FilterItemControl : UserControl
{
public FilterItemControl()
{
InitializeComponent();
this.DataContext = this;
}
public bool RegExpressionEnabled
{
get { return (bool)GetValue(RegExpressionEnabledProperty); }
set { SetValue(RegExpressionEnabledProperty, value); Console.WriteLine("RegExpressionEnabled:" + (bool)value); }
}
public static readonly DependencyProperty RegExpressionEnabledProperty =
DependencyProperty.Register("RegExpressionEnabled", typeof(bool), typeof(FilterItemControl),
new UIPropertyMetadata(false));
I have placed the UserControl in a Window and in the code-behind of this window, placed this statement: txtbox.RegExpressionEnabled = true;
In both RegularExpressionEnabled and RegExpressionEnabled you can see that I have placed a Console.Write().
The RegExpressionEnabled prints to the Output screen, however it does not get to the second, RegularExpressionEnabled.
Something is wrong in my binding on AlphaNumericTextBox RegularExpressionEnabled="{Binding RegExpressionEnabled}", can someone point me in the right direction?
In the code behind of FilterItemControl, RegExpressionEnabled property should be a standard property as this is what your new textbox is binding to. You don't need the dependency property in the FilterItemControl code behind either as you already have it in the new textbox.
Now instead of setting txtbox.RegExpressionEnabled = true (which actually should be txtbox.RegularExpressionEnabled = true), you set the RegExpressionEnabled property to true and the textbox will bind to this.
You will also need to raise the PropertyChanged event in the setter of the RegExpressionEnabled property to trigger the databinding.
I have created blank C#/XAML Windows 8 application. Add simple XAML code:
<Page
x:Class="Blank.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel
Margin="0,150"
HorizontalAlignment="Center">
<TextBlock
x:Name="xTitle"
Text="{Binding Title, Mode=TwoWay}"/>
<Button Content="Click me!" Click="OnClick" />
</StackPanel>
</Grid>
</Page>
And the simple code in C# part:
public sealed partial class MainPage
{
private readonly ViewModel m_viewModel;
public MainPage()
{
InitializeComponent();
m_viewModel = new ViewModel
{
Title = "Test1"
};
DataContext = m_viewModel;
}
private void OnClick(object sender, RoutedEventArgs e)
{
m_viewModel.Title = "Test2";
}
}
Now I want to implement ViewModel. I have two way:
Use Dependency Property
Implement INotifyPropertyChanged
For first approach it is:
public class ViewModel : DependencyObject
{
public string Title
{
get
{
return (string)GetValue(TitleProperty);
}
set
{
SetValue(TitleProperty, value);
}
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string)
, typeof(ViewModel)
, new PropertyMetadata(string.Empty));
}
For second it is:
public class ViewModel : INotifyPropertyChanged
{
private string m_title;
public string Title
{
get
{
return m_title;
}
set
{
m_title = value;
OnPropertyChanged("Title");
}
}
protected void OnPropertyChanged(string name)
{
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
I prefer the first way, because it allows use coerce (Silverlight for web and for WP7 doesn't have coerce functionality.. WinRT too.. but I'm still looking and hope) and looks more natural for me. But unfortunately, it works as OneTime for the first approach.
Could anybody explain to me why MS abandon using Dependency Property for implementing view model?
You should not be using a DependencyProperty in your ViewModel - you should only use them in your controls. You will never want to bind one ViewModel to another, also ViewModels do not need to persist their values nor provide default values, nor provide property metadata.
You should only use INotifyPropertyChanged in your ViewModels.
I have a user control as such:
public partial class MyControl : UserControl
{
private static readonly DependencyProperty pageContentProperty = DependencyProperty.Register("PageContent", typeof(UIElement), typeof(ActionPage), new PropertyMetadata(null));
public UIElement PageContent
{
get { return (UIElement)base.GetValue(pageContentProperty); }
set { base.SetValue(pageContentProperty, value); }
}
public MyControl()
{
InitializeComponent();
}
// More code
}
Now if I use it in XAML I have to do:
<l:MyControl>
<l:MyControl.PageContent>
<TextBlock Text="Lorum Ipsum"/>
</l:MyControl.PageContent>
</l:MyControl>
But I want to just do:
<l:MyControl>
<TextBlock Text="Lorum Ipsum"/>
</l:MyControl>
Currently if I do this it replace the entire content of the control with the TextBlock (which makes sense for a normal UserControl) but how can I override this behavior?
You might try adding the ContentProperty attribute to your PageContent property:-
[ContentProperty("PageContent")]
public partial class MyControl : UserControl