|
Again on with my quest to learn WPF controls and improve our standard controls library to make it easier to use within a MVVM environment.
In this case I am looking for sggestions for how to best implemnt a standard button.
I would like to create a standard button which has an image and caption.
I understand that this is easily achieved using xaml, but ideally we would like a standard implementation so the button could be used in the following manor.
<CustomControls:StandardButton ButtinImage="Logout.jpg" ButtonCaption="Button Text"/>
How would you achieve this?
1. Inherit from the button class and add dependancy properties
2. Use Attached Properties and a style
3. Inherit fron UserControl using dependancy properties fro the image and caption
Thanks for your time
Just racking up the postings
|
|
|
|
|
I would, personally, go for 1 or 2.
2 is good if you are clear on how to create attached properties.
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
Visit the Hindi forum here.
|
|
|
|
|
If i go for one, I am assuming that I can do away for a controltemplate and just set the content to be an image object and a label programitcally based on the dependancy properties.
Does this sound right?
Just racking up the postings
|
|
|
|
|
If you want to have a bit of fun, you could always create a Blend Behavior which set the Content of the button.
|
|
|
|
|
Not sure that sounds like fun...
Just racking up the postings
|
|
|
|
|
It does to me (and it's very easy to do).
|
|
|
|
|
Afternoon Guys and Gals,
I am trying to learn how to implement Custom Controls in WPF for use in a reusable controls library because I am not happy with the current implementation as our current method does not play well with MVVM.
As an experiment I am trying to create a custom control that has two ListViews and two buttons, the idea being to allow a user to bind to SelectedItems and DeSelectItems properties in the view. These will populate the two list boxes from properties in a viewmodel. The buttons simply allowing the user to select an item and move it from one ListView to the other, ie selected / not selected.
The problem I have is that when I bind to the SelectedItems and DeSelectedItems in xaml, neither dependancy property in the custom control actually get populates, ie the lists stay empty.
I believe my mistake is related to Binding Source, something I do not understand so well
The Custom Control Source - (The Test application is implemented as MVVM)
namespace CustomControlLibrary
{
[TemplatePart(Name = DualListControl.ElementNotSelectedList, Type = typeof(ListView))]
[TemplatePart(Name = DualListControl.ElementSelectedList, Type = typeof(ListView))]
[TemplatePart(Name = DualListControl.ElementSelectButton, Type = typeof(Button))]
[TemplatePart(Name = DualListControl.ElementDeselectButton, Type = typeof(Button))]
public class DualListControl : Control
{
const string ElementNotSelectedList = "ElementNotSelectedList";
const string ElementSelectedList = "ElementSelectedList";
const string ElementSelectButton = "ElementSelectButton";
const string ElementDeselectButton = "ElementDeselectButton";
ListView _NotSelectedList, _SelectedList;
Button _SelectButton, _DeselectButton;
RelayCommand _SelectItemCommand, _DeSelectItemCommand;
static DualListControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DualListControl), new FrameworkPropertyMetadata(typeof(DualListControl)));
}
public DualListControl()
{
_SelectItemCommand = new RelayCommand(p => SelectItemCommandExecute(), p => SelectItemCommandCanExecute);
_DeSelectItemCommand = new RelayCommand(p => DeSelectItemCommandExecute(), p => DeSelectItemCommandCanExecute);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_NotSelectedList = GetTemplateChild(ElementNotSelectedList) as ListView;
_SelectedList = GetTemplateChild(ElementSelectedList) as ListView;
_SelectButton = GetTemplateChild(ElementSelectButton) as Button;
_SelectButton.Command = _SelectItemCommand as ICommand;
_DeselectButton = GetTemplateChild(ElementDeselectButton) as Button;
_DeselectButton.Command = _DeSelectItemCommand as ICommand;
}
bool SelectItemCommandCanExecute { get { return true; } }
bool DeSelectItemCommandCanExecute { get { return true; } }
void SelectItemCommandExecute()
{
if (!SelectItemCommandCanExecute)
return;
}
void DeSelectItemCommandExecute()
{
if (!DeSelectItemCommandCanExecute)
return;
SelectedItems.Add(_NotSelectedList.SelectedItem);
DeSelectedItems.Remove(_NotSelectedList.SelectedItem);
int i = 0;
}
public static readonly DependencyProperty SelectedItemsProperty =
DependencyProperty.Register("SelectedItems", typeof(ObservableCollection<object>), typeof(DualListControl), new UIPropertyMetadata(new ObservableCollection<object>()));
public static readonly DependencyProperty DeSelectedItemsProperty =
DependencyProperty.Register("DeSelectedItems", typeof(ObservableCollection<object>), typeof(DualListControl), new UIPropertyMetadata(new ObservableCollection<object>()));
public ObservableCollection<object> SelectedItems
{
get { return (ObservableCollection<object>)GetValue(SelectedItemsProperty); }
set { SetValue(SelectedItemsProperty, value); }
}
public ObservableCollection<object> DeSelectedItems
{
get { return (ObservableCollection<object>)GetValue(DeSelectedItemsProperty); }
set { SetValue(DeSelectedItemsProperty, value); }
}
}
}
The Generic.xaml
<Style TargetType="{x:Type local:DualListControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DualListControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" Name="ElementNotSelectedList" ItemsSource="{Binding Path=DeSelectedItems}"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="1" Name="ElementSelectButton" Margin="5" Content="<"/>
<Button Grid.Row="2" Name="ElementDeselectButton" Margin="5" Content=">"/>
</Grid>
<ListView Grid.Column="2" Name="ElementSelectedList" ItemsSource="{Binding Path=SelectedItems}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The View
<UserControl x:Class="TestApplication.Views.MainAppView"
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:CustomControls="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<CustomControls:DualListControl SelectedItems="{Binding SelectedItemsA}" DeSelectedItems="{Binding DeslectedItemsA}"/>
</Grid>
</UserControl>
The Modelview
namespace TestApplication.ViewModels
{
public class MainAppViewModel : BaseViewModel
{
ObservableCollection<object> _SelectedItems = new ObservableCollection<object>(),
_DeSelectedItems = new ObservableCollection<object>();
public ObservableCollection<object> SelectedItemsA
{
get { return _SelectedItems; }
}
public ObservableCollection<object> DeSelectedItemsA
{
get { return _DeSelectedItems; }
}
public MainAppViewModel()
{
_DeSelectedItems.Add("One");
_DeSelectedItems.Add("Two");
_DeSelectedItems.Add("Three");
_DeSelectedItems.Add("Four");
}
}
}
Appreciate anyone who can help to identify my mistake(s), 5's in the lounge as a possible bribe?
Just racking up the postings
|
|
|
|
|
I think I see your problem.
You guessed right... Your binding sources aren't set. By default, the binding source is the DataContext, and that's not what you want here. Since those bindings are inside the control template, you want to bind to the "TemplatedParent" (It's one of the options for RelativeSource).
ItemsSource="{Binding Path=SelectedItems,RelativeSource={RelativeSource TemplatedParent}}"
Even easier, though... There's a shortcut for that, which does exactly the same thing...
ItemsSource="{TemplateBinding SelectedItems}"
|
|
|
|
|
Ian,
Firstly, thanks for taking the time to look.
I have tried your suggestion and it has not yet resolved the problem, I do believe however that you have got me somewhat closer.
While trying this out, I notice that the actual dependancy properties SelectedItems and DeSelectedItems on the DualListControl class are not being set by the bindings, ie they are empty lists even though they shold (as far as I understand) be the same lists as thoose specified in the MainAppView.
With my test data, I am expecting the DualListControl.DeSelectedItems to contain the items "One", "Two", "Three", "Four" if you see what I mean.
Any ideas?
Paul
Just racking up the postings
|
|
|
|
|
Guess we only fixed half of the problem then... Now the template should be properly bound to the parent control, but are the parent control's properties actually binding to a MainAppViewModel?
Somewhere in your window code (Or wherever the MainAppView control is contained), you need to set the DataContext to a MainAppViewModel... Otherwise, the control has nothing to bind to.
|
|
|
|
|
Unfortunatly this is already done.
I have double checked and I can see while debugging that both the MainAppView and the DualListControl instance have the DataContext set to the same instance of the MainAppViewModel class.
The Content of the main window is set as follows
public MainWindow()
{
InitializeComponent();
Content = new MainAppViewModel();
}
And in the App.xaml i have a DataTemplate telling WPF how to render the object as follows
<Application x:Class="TestApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModels="clr-namespace:TestApplication.ViewModels"
xmlns:Views="clr-namespace:TestApplication.Views"
StartupUri="MainWindow.xaml">
<Application.Resources>
<DataTemplate DataType="{x:Type ViewModels:MainAppViewModel}">
<Views:MainAppView/>
</DataTemplate>
</Application.Resources>
</Application>
If you see what I mean
So the part that is missing is the actual binding of the DualListControls dependancy properties being bound to the MainAppViewModels SelectedListA and DeSelectedListA properties.
Any ideas as to what I have missed?
Just racking up the postings
|
|
|
|
|
Pardon the slow response... Busy busy... Anyway...
I'm running out of ideas here... Have you checked for any reported data binding errors? They don't pop up as exceptions, but if you bring up the Output window in your IDE, they should show up there.
|
|
|
|
|
You need to set the DataContext on your View to point to your model.
|
|
|
|
|
No, he has that part right, I believe... He's using a DataTemplate, so it goes like this:
1) MainWindow has its Content set to the model
2) Content is rendered using a DataTemplate which contains a MainAppView
(If this failed, he wouldn't see his control at all)
3) MainAppView, being inside a DataTemplate, uses that model as its DataContext
4) MainAppView contains a DualListControl, with its SelectedItems and DeselectedItems properties bound to that model
5) DualListControl is rendered using a DataTemplate, which contains two ListViews that are template-bound to those properties
It's a bit more indirect than I would have done, but it should work. #1 and #2 are solid... #3 is what you're talking about, but that should happen automatically. #5 is the TemplateBinding thing he already fixed... I think the broken link is in #4, just by process of elimination, but I don't see the actual problem.
|
|
|
|
|
Well, its a retarded way to do it and he should unretard it. Not make it more retarded  . If he did it the correct way, he wouldn't be trouble shooting wacky issues. Oh wellz .
|
|
|
|
|
Concerning the Retaded way this is done, can you elaborate? I am not sure I understand what you think is wrong with my MVVM implementation.
I am not shooting or getting upset, please do not misread my comment in that way, I am only trying to learn.
All of the source code is available above. How would you achieve MVVM?
Just racking up the postings
|
|
|
|
|
Ian,
You are correct in the way DataContext is set. I am using a method learned from one of the MVVM mechanism described on a tutorial published in CodeProject, I forget the Authors name right now, search WPF MVVM.
As mentioned in another comment, I do somehow have this working and will publish my fixes here when I have got close to understanding how I fixed it. Something to do wth the MetaData part and creating an instance of the list in the constructor. Like I said, I will put my changes up as soon as I can.
I also appreciate that I may have a single list instance issue as mentioned by SledgeHammer.
Again, thanks for your time, there is nothing worse than head butting a brick wall.
Just racking up the postings
|
|
|
|
|
1) First issue I see is that your dependency properties are set up incorrectly.
Think about whats happening here... SelectedItemsProperty and DeSelectedItemsProperty are static (meaning a single instance in this case). You have set the values to new ObservableCollection<object>(). What you end up with is *EVERY* DualListControl in the world is using the same ObservableCollection<object>(). You also allow users to overwrite the collections completely. Not something you want to do.
Use DependencyProperty.RegisterReadOnly() to register the property as a read-only DP and create the ObservableCollection<object>() in the public DualListControl() constructor. Something like:
public DualListControl()
{
SetValue(SelectedItemsPropertyKey, new ObservableCollection<object>());
}
then remove the setters for those properties.
2) Bindings in generic.xaml should be TemplateBinding, not binding.
|
|
|
|
|
SledgeHammer, Thanks for your time and comments
Re point one,
DependancyProperties obviously still confuse the life out of me!
I tried making this a readonly collection and then realised what you are suggesting, you have given me the method required if I want a single list for all DualListControls right? but these can no longer be ovverriden by a user.
That is not my intention, what I am trying to achieve and failing is to be allow a developer to do something like this
<Grid>
<CustomControls:DualListControl Name="List" SelectedItems="{Binding SelectedItemsA}" DeSelectedItems="{Binding DeslectedItemsA}"/>
</Grid>
The problem I appear to have is that the SelectedItems dependancy property is not being bound to the one in the MainAppViewModel.
Re point two,
Ian has already found this and corrected me, the bindings in the Generic.xaml are now as the follows
<ListView Grid.Column="2" Name="ElementSelectedList" ItemsSource="{TemplateBinding SelectedItems}"/>
Have I understood this correctly?
Just racking up the postings
|
|
|
|
|
No, what you have *NOW* will result in every DualListControl sharing the same ObservableCollection instance. I'll assume that you want each one to have its own. The solution I gave you will give each instance its own collection.
The UserControl doesn't have its DataContext set, so those Binding will not work.
The bindings in Generic.xaml should be TemplateBinding.
|
|
|
|
|
SledgeHammer,
I appreciate your time.
I understand your point about a single list instance being shared amongst all controls. Please understand that I have been making changes as recommended by yourself and Ian (above).
The complication that arises with the ReadOnly method you describe is that I would like to be able to allow the consumer to use the control in the following way. The ReadOnly method does not allow me to do this.
Any suggestions?
<CustomControls:DualListControl SelectedItems="{Binding SelectedItemsA}" DeSelectedItems="{Binding DeSelectedItemsA}" Width="300" Height="300"/>
Regarding the DataContext, the control template does not appear to require the DataContext specifically set as the ViewModel is implicitly bound to the parent view and therefore to this control, I have verified this while debugging.
I do have the control working as intended but only tested as a single instance at the moment, I will test with mutiple instances to enable me to fix the single list instance issue you have kindly pointed out.
Once again, thanks for your time.
Just racking up the postings
|
|
|
|
|
Ok... So, what you are initially doing is having every instance of your control share the same instance of ObservableCollection. However, you do allow the user to overwrite said instance through your property setter. That will cause you *many* problems down the road with data binding. One area where WPF crumbles hard is when you start switching around instances of objects or creating temporary objects, etc. because it depends on those being the same object to function.
Now, C# doesn't have pointers, but I will use them to illustrate what I am trying to explain.
1) you create your control, your control creates an ObservableCollection() [0x1000]
2) a user of your control subscribes to [0x1000].CollectionChanges
3) a user calls your setter with a new ObservableCollection() [0x2000]
Guess what happened? Everybody subscribing to the [0x1000] collection events is now broken. Everybody making changes to the [0x1000] collection is broken as well. [0x1000] is now orphaned.
What you want is for each instance of your control to create its own ObservableCollection and *NEVER* let anybody change that. It is important that if you created [0x1000], that it remains [0x1000] for the lifetime of your control. Otherwise bad things will happen.
Now, the read-only DP will not fulfil your just mentioned requirement of binding to collections. Fair enough.
What you are trying to do here is combining TWO techniques into ONE which will cause you the problems just mentioned.
If you look at the ListView or TreeView for example, you will see the proper way to lay out your control.
public ObservableCollection<???> Items // this *MUST* be read-only
{
get { ... }
}
public IEnumerable ItemsSource /// this is how people will pass in collections
{
get { ... }
set { ... }
}
So what happens here is that people can add items manually to the Items collection OR use the ItemsSource to pass in collections.
If you only need to allow passing in collections, use the IEnumerable ItemsSource method instead.
If you want to support both, you need to add some "protection" code...
i.e. don't allow use of Items if ItemsSource is not null and vice versa, etc.
|
|
|
|
|
Hi,
I am building a silverlight app in vs2010 premium edition.
I do not seem to be able to find the option where I can change the windows from the default tabs to mdi windows.
Any thoughts please?
|
|
|
|
|
You could have done better to post this question in the Visual Studio section[^].
However, for your answer, just double clicking on the window should make it 'float'.
Or you could right click on the code window title bar and select 'float'.
The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it.
My latest tip/trick
Visit the Hindi forum here.
|
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
