I have implemented my own usercontrol based on listboxes. It has a dependency property with type of a collection. It works fine when I have only one instance of the usercontrol in a window, but if I have multiple instances I get problem that they share the collection dependency property. Below is a sample illustrating this.
My user control called SimpleList:
<UserControl x:Class="ItemsTest.SimpleList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="_simpleList">
<StackPanel>
<TextBlock Text="{Binding Path=Title, ElementName=_simpleList}" />
<ListBox
ItemsSource="{Binding Path=Numbers, ElementName=_simpleList}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
</UserControl>
Code behind:
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace ItemsTest
{
public partial class SimpleList : UserControl
{
public SimpleList()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(SimpleList), new UIPropertyMetadata(""));
public List<int> Numbers
{
get { return (List<int> )GetValue(NumbersProperty); }
set { SetValue(NumbersProperty, value); }
}
public static readonly DependencyProperty NumbersProperty =
DependencyProperty.Register("Numbers ", typeof(List<int>), typeof(SimpleList), new UIPropertyMetadata(new List<int>()));
}
}
I use like this:
<StackPanel>
<ItemsTest:SimpleList Title="First">
<ItemsTest:SimpleList.Numbers>
<sys:Int32>1</sys:Int32>
<sys:Int32>2</sys:Int32>
<sys:Int32>3</sys:Int32>
</ItemsTest:SimpleList.Numbers>
</ItemsTest:SimpleList>
<ItemsTest:SimpleList Title="Second">
<ItemsTest:SimpleList.Numbers>
<sys:Int32>4</sys:Int32>
<sys:Int32>5</sys:Int32>
<sys:Int32>6</sys:Int32>
</ItemsTest:SimpleList.Numbers>
</ItemsTest:SimpleList>
</StackPanel>
I expect the following to show up in my window:
First
123
Second
456
But what I see is:
First
123456
Second
123456
How do I get multiple SimpleList not to share their Numbers Collection???
Found the answer, the constructor needs to initialize the property instead of letting the static property do itself:
public SimpleList()
{
SetValue(NumbersProperty, new List<int>());
InitializeComponent();
}
Collection-Type Dependency Properties
Related
I have a UserControl which I would like to load multiple times on my MainWindow.
For this I use an ItemsControl:
<ItemsControl Grid.Row="1"
ItemsSource="{Binding FtpControlList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type my:BackUpControl}">
<my:BackUpControl Margin="5"
Width="500" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
My UserControl is bound by a ViewModel. My MainWindow also has a ViewModel.
In the MainWindowViewModel I have an OberservableCollection dependency property which houlds a list of my UserControlViewModels. In the constructor of the MainWindowViewModel I add some UserControlViewModels to the List.
public MainWindowViewModel()
{
FtpControlList = new ObservableCollection<BackUpControlViewModel>();
FtpControlList.Add(new BackUpControlViewModel("View 1"));
FtpControlList.Add(new BackUpControlViewModel("View 2"));
FtpControlList.Add(new BackUpControlViewModel("View 3"));
}
public static readonly DependencyProperty FtpControlListProperty = DependencyProperty.Register("FtpControlList", typeof(ObservableCollection<BackUpControlViewModel>), typeof(MainWindowViewModel));
public ObservableCollection<BackUpControlViewModel> FtpControlList
{
get { return (ObservableCollection<BackUpControlViewModel>)GetValue(FtpControlListProperty); }
set { SetValue(FtpControlListProperty, value); }
}
Now for some reason it loads 3 times an empty usercontrol and NOT the ones in the FtpControlList property withe the property set to 'View 1, View 2 and View 3'. How can I make sure that the UserControls from the list are loaded and not empty ones?
Part of the UserControlViewModel:
// part of the UserControl Viewmodel
public BackUpControlViewModel()
{
}
public BackUpControlViewModel(string header)
{
GroupBoxHeader = header;
}
#region Dependency Properties
public static readonly DependencyProperty GroupBoxHeaderProperty = DependencyProperty.Register("GroupBoxHeader", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("empty"));
public string GroupBoxHeader
{
get { return (string)GetValue(GroupBoxHeaderProperty); }
set { SetValue(GroupBoxHeaderProperty, value); }
}
public static readonly DependencyProperty FtpUrlProperty = DependencyProperty.Register("FtpUrl", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("ftpurl"));
public string FtpUrl
{
get { return (string)GetValue(FtpUrlProperty); }
set { SetValue(FtpUrlProperty, value); }
}
public static readonly DependencyProperty FtpUserProperty = DependencyProperty.Register("FtpUser", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("ftpUser"));
public string FtpUser
{
get { return (string)GetValue(FtpUserProperty); }
set { SetValue(FtpUserProperty, value); }
}
#endregion
It will probably be something stupid but I can't seem to find it.
The datacontext for MainWindow and the UserControl are bound to it's Viewmodel.
EDIT: BackupControl datacontext set to BackupControlViewModel (to answer Rachel's question)
public partial class BackUpControl : UserControl
{
public BackUpControl()
{
InitializeComponent();
this.DataContext = new BackUpControlViewModel();
}
}
You are overwriting the DataContext of your UserControl by setting it in the constructor of your UserControl after calling InitializeComponent();
By default, the ItemsControl will create an ItemTemplate for each item in the collection, and set it's DataContext to the item from the ItemsSource. The end result will be three new my:BackUpControl objects, with the DataContext behind those objects bound to the BackUpControlViewModel from ItemsControl.ItemsSource
Remove the line this.DataContext = new BackUpControlViewModel(); from your UserControl's constructor, and it should work like you expect
Change :
<DataTemplate DataType="{x:Type my:BackUpControl}">
To:
<DataTemplate DataType="{x:Type my:BackUpControlViewModel}">
The issue might be that your viewmodel has dependency properties. Normally you would just make your viewmodel implement INotifyPropertyChanged and the properties would be regular (not dependency properties). Unless you have a specific requirement for them to be DPs I'd switch them over.
I have created a user control with collection property:
public static readonly DependencyProperty
MyListProperty = DependencyProperty.Register(
"MyList",
typeof(ObservableCollection<Test>),
typeof(UserControl1),
new FrameworkPropertyMetadata(new ObservableCollection<Test>())
);
public ObservableCollection<Test> MyList
{
get { return (ObservableCollection<Test>)base.GetValue(MyListProperty); }
set { base.SetValue(MyListProperty, value); }
}
public static readonly DependencyProperty
BProperty = DependencyProperty.Register(
"B",
typeof(string),
typeof(UserControl1),
new FrameworkPropertyMetadata(null)
);
public string B
{
get { return (string)base.GetValue(BProperty); }
set { base.SetValue(BProperty, value); }
}
The Test class is:
public class Test : DependencyObject
{
public static readonly DependencyProperty
AProperty = DependencyProperty.Register(
"A",
typeof(string),
typeof(Test),
new FrameworkPropertyMetadata(null)
);
public string A
{
get { return (string)base.GetValue(AProperty); }
set { base.SetValue(AProperty, value); }
}
}
Then, i'm trying to use my control for binding:
<TextBox x:Name="tb1" Text="def"/>
<my:UserControl1 x:Name="uc1" B="{Binding ElementName=tb1, Path=Text}">
<my:UserControl1.MyList>
<my:Test A="{Binding ElementName=tb1, Path=Text}"></my:Test>
<my:Test A="100"></my:Test>
</my:UserControl1.MyList>
</my:UserControl1>
The first binding (with B property of User Control) works correctly. The problem is with second binding (with A property of Test which is MyList element). When debugging i have two items in MyList but the A property of the first one is null. Please tell me what I am missing here?
The problem here is, that the Binding to ElementName=tb1 can not be resolved, even it will never be evaluated. A Binding to an ElementName is resolved for DependencyObjects which are in the visual or logical Tree of a WPF Application. Adding items to your ObservableCollection (MyList) only means adding the items to the Collection, but not into the Visual Tree.
Edit:
Here is the approach discussed in the comments:
In your Window/Page:
<Window.Resources>
<!-- Declare the ViewModel as Resource -->
<my:ViewModel x:Key="viewModel">
<my:ViewModel.MyList>
<my:Test A="Hello sweet" />
<my:Test A="ViewModel" />
</my:ViewModel.MyList>
</my:ViewModel>
</Window.Resources>
<!-- Assign Ressource as DataContext -->
<StackPanel DataContext="{StaticResource viewModel}">
<TextBox x:Name="tb1" Text="def"/>
<!-- Reference your list within the ViewModel -->
<ListBox ItemsSource="{Binding Path=MyList}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- Bind your property -->
<TextBlock Text="{Binding Path=A}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
And the implementation of ViewModel:
public class ViewModel
{
public ViewModel()
{
this.MyList = new ObservableCollection<Test>();
}
public ObservableCollection<Test> MyList { get; set; }
}
Of course, class Test no longer needs to implement a DependencyObject. Simple get/set Properties are okay.
I have areally wierd problem when i'm using some simple custom control i've built:
this is the custom control code :
public partial class ToolButton : Button
{
public string ToolID
{
get { return (string)GetValue(ToolIDProperty); }
set { SetValue(ToolIDProperty, value); }
}
public static readonly DependencyProperty ToolIDProperty =
DependencyProperty.Register("ToolID", typeof(string), typeof(ToolButton), new UIPropertyMetadata(""));
public ToolButton()
{
InitializeComponent();
}
}
Now when i'm trying to ude this custom control in the main window like that :
<ItemsControl Margin="100" ItemsSource="{Binding Path=Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<customControls:ToolButton Height="100" Width="100" Margin="10" Content="{Binding Value.Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And the binding doesn't work !!
but when i'm using simple button the binding works excellent..
is someone faced similliar problem ??
Thanks...
put the following line into your ToolButton's constructor:
this.DataContext = this;
I’ve created UserControl:
public partial class MyTemplate : UserControl
{
public MyUser User { get; set; }
}
And then have written the following code in the main window’s xaml
<Window.Resources>
<DataTemplate x:Key="My">
<local:MyTemplate Margin="10"/>
</DataTemplate>
<Window.Resources>
<ListBox x:Name="MyMainList"
ItemTemplate="{StaticResource My}">
ItemsSource="{Binding Path=MyTimelineTweets}"
IsSynchronizedWithCurrentItem="True">
Where MyTimelineTweets has type ObservableCollection and MyTemplate user control shows data from MyFavouriteClass.
The question is:
How can I initialize MyTemplate.User in the xaml or in the code behind? //If the information about User is accessible only at the window level.
Make User a dependency property and then bind it similarly to this:
<Window x:Name="window">
...
<local:MyTemplate Margin="10" User="{Binding Foo, ElementName=window}"/>
...
</Window>
To make User a dependency property:
public static readonly DependencyProperty UserProperty = DependencyProperty.Register("User",
typeof(User),
typeof(MyTemplate));
public User User
{
get { return GetValue(UserProperty) as User; }
set { SetValue(UserProperty, value); }
}
I am having trouble getting the following scenario to work (this code is not the actual code but the principals are the same. Basically I need to pass a value down from a MainPage down to a nested "reusable user control" that binds to it's own properties. I want to see the "This is it!" text on the screen but it's not being set in the SilverlightControl2 control (I suspect due to the setting of the DataContext) - but I how do I fix it?
MainPage.xaml
<Grid>
<ContentPresenter>
<ContentPresenter.Content>
<Local:SilverlightControl1 OneValue="This is it!"/>
</ContentPresenter.Content>
</ContentPresenter>
</Grid>
SilverlightControl1.xaml
<Grid>
<Local:SilverlightControl2 TwoValue="{Binding OneValue}"/>
</Grid>
SilverlightControl1.xaml.cs
public partial class SilverlightControl1 : UserControl
{
public string OneValue
{
get { return (string)GetValue(OneValueProperty); }
set { SetValue(OneValueProperty, value); }
}
public static readonly DependencyProperty OneValueProperty = DependencyProperty.Register(
"OneValue", typeof(string), typeof(SilverlightControl1), new PropertyMetadata(string.Empty));
public SilverlightControl1()
{
InitializeComponent();
this.DataContext = this;
}
}
SilverlightControl2.xaml
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Text="{Binding TwoValue}" Foreground="Blue" />
</Grid>
SilverlightControl2.xaml.cs
public partial class SilverlightControl2 : UserControl
{
public string TwoValue
{
get { return (string)GetValue(TwoValueProperty); }
set { SetValue(TwoValueProperty, value); }
}
public static readonly DependencyProperty TwoValueProperty = DependencyProperty.Register(
"TwoValue", typeof(string), typeof(SilverlightControl2), new PropertyMetadata(string.Empty));
public SilverlightControl2()
{
InitializeComponent();
this.DataContext = this;
}
}
As soon as you find yourself feeling the need to do this:-
this.DataContext = this;
know that you have probably got things wrong. Its probably the first thing I would expect to find on Silverlight specific "bad smell list".
In this case where you are specialising UserControl a better approach is to do this:-
SilverlightControl1.xaml
<Grid>
<Local:SilverlightControl2 x:Name="MyControl2" />
</Grid>
SilverlightControl1.xaml.cs (I'm just showing the constructor the rest is as you have it)
public SilverlightControl1()
{
InitializeComponent();
MyControl2.SetBinding(SilverlightControl2.TwoValueProperty , new Binding("OneValue") { Source = this });
}
SilverlightControl2.xaml
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="MyTextBox" Foreground="Blue" />
</Grid>
SilverlightControl1.xaml.cs (I'm just showing the constructor the rest is as you have it)
public SilverlightControl2()
{
InitializeComponent();
MyTextBox.SetBinding(TextBox.TextProperty , new Binding("TwoValue") { Source = this });
}
Since in UserControls you know the structure of the XAML and you can name the elements that you need access to in code, you can create the binding using a line of code instead.
This leaves the DataContext free to do what is designed for rather than be hi-jacked for a different purpose.
The alternative approach where instead of specialising UserControl you create a templated control, in this case the binding can be expressed in XAML using something like:-
<TextBox Text="{TemplateBinding TwoValue}" />
Template binding only works in ControlTemplate so you can't use it in a UserControl.