Having a simple XAML user control, I'd like to set the DataContext to the code behind (xaml.cs) file.
I'd like to set DataContext and Itemssource in XAML, so I can populate the combobox with property ListOfCars
XAML
<UserControl x:Class="Sample.Controls.MyControl"
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="85" d:DesignWidth="200">
<Grid Height="85" Width="200" Background="{StaticResource MainContentBackgroundBrush}">
<StackPanel Orientation="Vertical">
<ComboBox Height="23.338" x:Name="CarList" />
</StackPanel>
</Grid>
</UserControl>
Code behind
public List<Cars> ListOfCars
{
get { return _store.ListCars(); }
}
In other words, instead of doing this in codebehind, how may I set the binding in XAML
public MyControl()
{
InitializeComponent();
_store = new Store();
CarList.ItemsSource = _store.ListCars();
CarList.DisplayMemberPath = "Name";
}
Just bind the ItemsSource.
<ComboBox ItemsSource="{Binding ListOfCars}"/>
And then for the UserControl:
<MyControl DataContext="{Binding *viewModel*}"/>
You have to bind the DataContext where your UserControl is used rather than in the definition, because in the definition you don't know to what to bind. The Combobox automatically is in the context of the control so you can just bind to the DataContext without any additional work.
Example of binding to a resource:
<Application.Resources>
...
<viewmodels:ViewModelLocator x:Key="ViewModelLocator"/>
...
</Application.Resources>
<MyControl DataContext="{Binding Source={StaticResource ViewModelLocator}}"/>
This creates an instance of the ViewModelLocator and then binds the DataContext of the control to that resource.
Do not do that, you will mess up all external bindings to the DataContext. Use UserControl.Name and ElementName bindings instead (or RelativeSource).
Related
We have a TickerUserControl with a simple Text property which stands for the displayed text of the ticker.
Do we really have to use these DependencyProperty pattern thing inside the UserControl (see below) or is there a simpler way to achieve this?
When we want to use our UserControl and BIND the text field to a property of a ViewModel we have to use the following weird binding syntax. Why can't we just use 'Text="{Binding Text}"' like all the other controls? Is there something wrong with the property implementation of the UserControl or something?
Usage of the UserControl
<userControls:TickerUserControl Text="{Binding Path=Parent.DataContext.TickerText, RelativeSource={RelativeSource Self}, Mode=OneWay}"/>
Property implementation of the UserControl (code behind)
public partial class TickerUserControl : UserControl
{
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(TickerUserControl), new PropertyMetadata(""));
// ...
}
XAML snippet of the UserControl
<UserControl x:Class="Project.UserControls.TickerUserControl"
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">
<TextBlock Text="{Binding Text}">
<!-- ... -->
The solution
The problem was the setting of the DataContext inside the UserControl.
I deleted the DataContext binding added a name to the UserControl and modified the TextBox binding inside the UserControl. After that I was able to bind "as usual" from outside.
<userControls:TickerUserControl Text="{Binding TickerText}"/>
<UserControl x:Class="Project.UserControls.TickerUserControl"
Name="TickerUserControl"
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">
<TextBlock Text="{Binding Text, ElementName=TickerUserControl}">
<!-- ... -->
If you want to bind your property, you'll need a dependency property.
To solve the weird binding you can do the following changes:
In your usercontrol
<UserControl Name="control"...
<TextBlock Text="{Binding Text, ElementName=control}">
And then you can bind it like that
<userControls:TickerUserControl Text="{Binding TickerText}"/>
If you want to create bindable properties in the code behind of your UserControl, then yes, you do have to use DependencyProperty objects. However, you don't have to create your bindable properties there... you could use an MVVM type pattern and create your bindable properties in a separate class as long as you set that class as the DataContext of you UserControl.
No, you don't have to use that 'weird' binding syntax... the problem is that you have hard coded setting the DataContext of your UserControl to its code behind. Instead of doing that, you can bind your Text DependencyProperty in the control like this:
<TextBlock Text="{Binding Text, RelativeSource={RelativeSource FindAncestor,
{AncestorType={x:Type Local:TickerUserControl}}}" />
Local is the XML namespace of your local project... something like this:
xmlns:Local="clr-namespace:Project.UserControls.TickerUserControl"
Then after removing the DataContext binding, you should be able to bind to the control from outside normally.
In a Wpf Application i have a main window.
I have added a user control to the same project.
In the user control's .xaml.cs file a Dependency property ( "Value" name of the property ) is added.
I would like to access the defined dependency property in the usercontrol.xaml.
I know i can do the same while creating the control instance either in window.xaml or some other user control.
But is it possible to access the dependency property defined in .xaml.cs in .xaml?
Question updated based on Vivs answer
Ok. I mentioned my question wrongly. Nevertheless even i was not aware of accessing. But my actual intended question is it possible to set the dependency property from .xaml. some thing like from the example given above,
<Grid CustomBackground ="{Binding Path= BackgroundColor}" />
Or
<Grid CustomBackground ="Blue" />
Is it possible to set the custom dependency properties like this in the same .xaml?
Yes it is possible.
something like:
.xaml
<UserControl x:Class="MvvmLight26.UserControl1"
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:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=CustomBackground}" />
</UserControl>
and .xaml.cs:
public partial class UserControl1 : UserControl {
public static readonly DependencyProperty CustomBackgroundProperty =
DependencyProperty.Register(
"CustomBackground",
typeof(Brush),
typeof(UserControl1),
new FrameworkPropertyMetadata(Brushes.Tomato));
public UserControl1() {
InitializeComponent();
}
public Brush CustomBackground {
get {
return (Brush)GetValue(CustomBackgroundProperty);
}
set {
SetValue(CustomBackgroundProperty, value);
}
}
}
Alternate:
If you say have the DataContext of the UserControl as itself like:
public UserControl1() {
InitializeComponent();
DataContext = this;
}
then in your xaml you could just go with:
<Grid Background="{Binding Path=DataContext.CustomBackground}" />
Update:
For the new question,
Not quite directly.
You can "set" the value if the custom DP is registered as an attached property(Do remember an attached property is not the same as a normal DP in it's behavior and scope.)
If you want to keep it as a normal DP, then you can keep UserControl1 from the original answer same as it is(just the DP part. You need to remove the xaml part of it and make it a non-partial class in the code-behind) and then derive it to a new UserControl.
something like:
<local:UserControl1 x:Class="MvvmLight26.UserControl2"
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:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
CustomBackground="Blue"
mc:Ignorable="d">
<Grid />
</local:UserControl1>
You can ofc name UserControl1 as something like "BaseUserControl" or so to make it obvious that it's not intended for direct usage.
You can set the value from the UserControl.Style in the same xaml as well.
xaml:
<UserControl x:Class="MvvmLight26.UserControl1"
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:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<UserControl.Style>
<Style>
<Setter Property="local:UserControl1.CustomBackground"
Value="Blue" />
</Style>
</UserControl.Style>
<Grid Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=CustomBackground}" />
</UserControl>
Here is the reproduction of my problem:
Create a WPF Application
Add a new UserControl to the project
Replace its content with the following
<UserControl
x:Class="UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<TextBlock Text="{Binding MyText}"/>
</UserControl>
Public Class UserControl1
Public Property MyText As String
Get
Return GetValue(MyTextProperty)
End Get
Set(ByVal value As String)
SetValue(MyTextProperty, value)
End Set
End Property
Public Shared ReadOnly MyTextProperty As DependencyProperty =
DependencyProperty.Register("MyText", GetType(String), GetType(UserControl1))
End Class
Replace the following in the MainWindow.xaml file:
<Window
x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:WpfApplication1"
Title="MainWindow"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<StackPanel >
<TextBox Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}"/>
<src:UserControl1 MyText="{Binding Title}"/>
</StackPanel>
</Window>
As you can see, the UserControl1.MyText property doesn't get updated when the MainWindow.Title changes.
What am I missing? I want the user control to be connected to the parent property, is there a xamly way to do it?
Okay, when I recreate the app (I'm using C#, so I don't think this will make any difference), I notice in my output the binding is failing because UserControl does not have a Title property.
Add ElementName=this to your UserControl1 binding. And set the Name property on the Window to this and that should fix it.
Something like this:
<src:UserControl1 MyText="{Binding Title, ElementName=this}" />
The binding works for me when I do that. Hope that helps!
I have a UserControl which contains a listbox and few buttons.
<UserControl x:Class="ItemControls.ListBoxControl"
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">
<Grid>
<ListBox:ExtendedListBox SelectionMode="Single" ItemsSource="{Binding LBItems}" Height="184">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Command="RemoveCommand"/>
</Grid>
</UserControl>
And the code behind:
public static readonly DependencyProperty RemoveCommandProperty =
DependencyProperty.Register("RemoveCommand", typeof(ICommand), typeof(ListBoxControl), null);
public ICommand RemoveCommand
{
get { return (ICommand)GetValue(RemoveCommandProperty); }
set { SetValue(RemoveCommandProperty, value); }
}
public static readonly DependencyProperty LBItemsProperty =
DependencyProperty.Register("LBItems", typeof(IEnumerable), typeof(ListBoxControl), null);
public IEnumerable LBItems
{
get { return (IEnumerable)GetValue(LBItemsProperty); }
set { SetValue(LBItemsProperty, value); }
}
I'm using this control in the view like this:
<ItemControls:ListBoxControl Height="240" Width="350" LBItems="{Binding Items, Converter={StaticResource ItemsConverter}, Mode=TwoWay}" RemoveCommand="{Binding RemoveCommand}"/>
The command works fine, though the listbox binding doesn't. My question is - WHY?
The ListBox in your UserControl isn't correctly binding to LBItems. The DataContext of the ListBox is not your control so it's trying to bind LBItems directly from your ViewModel.
In your UserControl declaration add DataContext="{Binding RelativeSource={RelativeSource Self}}". That should correctly set your DataContext to the UserControl and allow you binding to correctly locate the LBItems property.
Edit
Your comment reminded me. You need to set the DataContext of your Grid to be your UserControl. The simplest way to do this is to name the Grid i.e. <Grid x:Name="LayoutRoot"> and then in the constructor for your UserControl LayoutRoot.DataContext = this;
If you set the DataContext of the UserControl you break the bindings from your VM, but if you set them on the Grid the top bindings still work and all controls inside the UserControl can correctly bind to the UserControl.
I try to refactor such XAML by introducing new user control:
<Window ...>
<ComboBox ItemsSource="{Binding Greetings}" />
</Window>
After adding a control I have
ControlA XAML:
<UserControl ...>
<ComboBox ItemsSource="{Binding Items}" />
</UserControl>
ControlA C#:
public static readonly DependencyProperty ItemsProperty =
WpfUtils.Property<IEnumerable, ControlA>("Items");
public IEnumerable Items { get; set; }
New Window XAML:
<Window ...>
<uc:ControlA Items="{Binding Greetings}" />
</Window>
After this I see nothing in ComboBox. What is wrong here?
Your ComboBox is binding to the DataContext. Since your DataContext is still an object with a list called Greetings, this will not work...
Your ContolA should resemble something like this:
<UserControl x:Name="Root" ...>
<ComboBox ItemsSource="{Binding ElementName=Root, Path=Items}" />
</UserControl>
Now, your combobox binds to the Items property of your ControlA, instead of your DataContext property...
Hope this helps..