Bind a property to DataTemplateSelector - wpf

I want to design a DataTemplateSelector who compare the given value with a one passed in parameter and choose the right template if the value is superior or inferior
I came with the following :
class InferiorSuperiorTemplateSelector : DataTemplateSelector
{
public DataTemplate SuperiorTemplate { get; set; }
public DataTemplate InferiorTemplate { get; set; }
public double ValueToCompare { get; set; }
public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
{
double dpoint = Convert.ToDouble(item);
return (dpoint >= ValueToCompare || dpoint == null) ? SuperiorTemplate : InferiorTemplate;
}
}
and the XAML :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBox Name="theValue" Grid.Row="0">1</TextBox>
<ContentControl Grid.Row="2" Content="{Binding ElementName=theValue, Path=Text}" >
<ContentControl.ContentTemplateSelector>
<sel:InferiorSuperiorTemplateSelector ValueToCompare="12" SuperiorTemplate="{StaticResource posTemplate}" InferiorTemplate="{StaticResource negTemplate}" />
</ContentControl.ContentTemplateSelector>
</ContentControl>
</Grid>
This works pretty fine if valueToCompare parameter is set manually (here with 12).
When I try to make this one dynamic, by applying a binding I got the following error :
A 'Binding' cannot be set on the 'ValueToCompare' property of type
'InferiorSuperiorTemplateSelector'. A 'Binding' can only be set on a
DependencyProperty of a DependencyObject.
And here comes the problem : how can we declare a DependencyProperty in a DataTemplateSelector or is there any other option to acheve this goal ?
I tried to define a dependencyproperty using the usual way but I can't resole the SetValue and GetValue methods.
Thanks by advance.
EDIT : As an appendix of the solution mentionned above, here is the fixed XAML code of my sample.
<TextBox Name="theValue" Grid.Row="0">1</TextBox>
<TextBox Name="theValueToCompare" Grid.Row="1">50</TextBox>
<ContentControl Grid.Row="2" Content="{Binding ElementName=theValue, Path=Text}"
local:DataTemplateParameters.ValueToCompare="{Binding ElementName=theValueToCompare, Path=Text}">
<ContentControl.ContentTemplateSelector>
<local:InferiorSuperiorTemplateSelector SuperiorTemplate="{StaticResource posTemplate}" InferiorTemplate="{StaticResource negTemplate}" />
</ContentControl.ContentTemplateSelector>
</ContentControl>
The other parts of the code are similar.

As evident from the error you can only bind with dependency property.
But since it's already inheriting from DataTemplateSelector, you cannot inherit from DependencyObject class.
So, I would suggest to create an Attached property for binding purpose. But catch is attached property can only be applied on class deriving from DependencyObject.
So, you need to tweak a bit to get it working for you. Let me explain step by step.
First - Create attached property as suggested above:
public class DataTemplateParameters : DependencyObject
{
public static double GetValueToCompare(DependencyObject obj)
{
return (double)obj.GetValue(ValueToCompareProperty);
}
public static void SetValueToCompare(DependencyObject obj, double value)
{
obj.SetValue(ValueToCompareProperty, value);
}
public static readonly DependencyProperty ValueToCompareProperty =
DependencyProperty.RegisterAttached("ValueToCompare", typeof(double),
typeof(DataTemplateParameters));
}
Second - Like I said it can be set only on object deriving from DependencyObject, so set it on ContentControl:
<ContentControl Grid.Row="2" Content="{Binding Path=PropertyName}"
local:DataTemplateParameters.ValueToCompare="{Binding DecimalValue}">
<ContentControl.ContentTemplateSelector>
<local:InferiorSuperiorTemplateSelector
SuperiorTemplate="{StaticResource SuperiorTemplate}"
InferiorTemplate="{StaticResource InferiorTemplate}" />
</ContentControl.ContentTemplateSelector>
</ContentControl>
Third. - Now you can get the value inside template from container object passed as parameter. Get Parent (ContentControl) using VisualTreeHelper and get value of attached property from it.
public override System.Windows.DataTemplate SelectTemplate(object item,
System.Windows.DependencyObject container)
{
double dpoint = Convert.ToDouble(item);
double valueToCompare = (double)VisualTreeHelper.GetParent(container)
.GetValue(DataTemplateParameters.ValueToCompareProperty); // HERE
// double valueToCompare = (container as FrameworkElement).TemplatedParent;
return (dpoint >= valueToCompare) ? SuperiorTemplate : InferiorTemplate;
}
Also you can get ContentControl like this (container as FrameworkElement).TemplatedParent.

Related

WPF : Binding cannot find source

I try to make my own ContentControl that derives from Control to fully understand dark wpf tree concepts. For now, i just implemented the logical part (Content) of the ContentControl.
My code behind :
[ContentProperty("Content")]
public class MyContentControl : Control
{
public MyContentControl()
{
}
public Object Content
{
get { return (Object)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(Object), typeof(MyContentControl), new UIPropertyMetadata());
}
XAML :
<StackPanel x:Name="stackPanel">
<TextBlock Visibility="Collapsed" x:Name="textBlock" Text="Hello World"/>
<ContentControl>
<TextBlock Background="LightBlue" Text="{Binding Text, ElementName=textBlock}"/>
</ContentControl>
<local:MyContentControl>
<TextBlock Text="{Binding Text, ElementName=textBlock}"/>
</local:MyContentControl>
</StackPanel>
I got the following binding error :
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=textBlock'. BindingExpression:Path=Text; DataItem=null; target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')
It is like the inner TextBlock can't go up in the logical tree and find the original textblock on which it should bind. I wasn't able to set myContentControl as the parent of the Content object.
Any idee?
Thanks for your time.
Jonas
Relevant question: Binding ElementName. Does it use Visual Tree or Logical Tree
The binding you want is not possible because the same instance of MyContentControl could theoretically be used somewhere else in the application where the element "textBlock" is not in the scope.
If you want to do this type of binding you could use a Resource instead:
xmlns:clr="clr-namespace:System;assembly=mscorlib"
<StackPanel>
<StackPanel.Resources>
<clr:String x:Key="MyText">Hanky Panky</clr:String>
</StackPanel.Resources>
<TextBlock Text="{StaticResource MyText}" />
<ContentControl>
<TextBlock Text="{Binding Source={StaticResource MyText}}" />
</ContentControl>
</StackPanel>
I Just had to apply FrameworkElement.AddLogicalChild and FrameworkElement.RemoveLogicalChild when the ContentChanged and the binding is correctly apply (Verified with WPF Inspector).
So all this is about LogicalTree (and maybe the xaml namescope is inherited from logical parent). The TextBlock inside MyContentControl get the MyContentControl as Parent when MyContentControl.AddLogicalChild(TextBlock) is called.
My Code :
[ContentProperty("Content")]
public class MyContentControl : Control
{
public MyContentControl()
{
Content = new UIElementCollection(this, this);
}
public Object Content
{
get { return (Object)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(Object), typeof(MyContentControl), new UIPropertyMetadata(new PropertyChangedCallback(OnContentChanged)));
public static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MyContentControl c = (MyContentControl)d;
if (e.OldValue != null)
{
c.RemoveLogicalChild(e.OldValue);
}
c.AddLogicalChild(e.NewValue);
}
protected override System.Collections.IEnumerator LogicalChildren
{
get
{
List<Object> l = new List<object>();
if (Content != null)
l.Add(Content);
return l.GetEnumerator();
}
}
}

User control's Dependency Property doesn't get bound in Silverlight

I have created a user control like numeric updown as follows
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" >
<TextBox x:Name="InputTextBox" Grid.Row="0" Grid.Column="0" Grid.RowSpan="1"
Style="{StaticResource NumericUpDownTextBoxStyle}"
KeyDown="InputTextBox_KeyDown"
KeyUp="InputTextBox_KeyUp"
GotFocus="InputTextBox_GotFocus"
LostFocus="InputTextBox_LostFocus"
MouseWheel="InputTextBox_MouseWheel"
MouseEnter="InputTextBox_MouseEnter"
LayoutUpdated="InputTextBox_LayoutUpdated"
Text="{Binding Path=ControlValue, Mode=TwoWay,ValidatesOnDataErrors=True,ValidatesOnExceptions=True,NotifyOnValidationError=True}"/>
</StackPanel>
I have bind a ViewModel to this control where I Set ControlValue property to TextBox property of the user control template textbox.
Everthing works fine at a control level. I have exposed from usercontrol.
public static readonly DependencyProperty MaximumValueProperty;
public static readonly DependencyProperty MinimumValueProperty;
public static readonly DependencyProperty StepValueProperty;
public static readonly DependencyProperty TextValueProperty;
My Properties are
public double Maximum
{
get
{
return (double)GetValue(MaximumValueProperty);
}
set
{
SetValue(MaximumValueProperty, value);
this.ViewModel.Maximum = this.Maximum;
}
}
public double Minimum
{
get
{
return (double)GetValue(MinimumValueProperty);
}
set
{
SetValue(MinimumValueProperty, value);
this.ViewModel.Minimum = this.Minimum;
}
}
public double Step
{
get
{
return (double)GetValue(StepValueProperty);
}
set
{
SetValue(StepValueProperty, value);
this.ViewModel.Step = this.Step;
}
}
public double TextValue
{
get
{
return (double)GetValue(TextValueProperty);
}
set
{
SetValue(TextValueProperty, value);
this.ViewModel.ControlValue = Convert.ToString(value);
}
}
Initialization of the property.
static NumericUpDown()
{
MaximumValueProperty = DependencyProperty.Register("Maximum", typeof(double), typeof(NumericUpDown), new PropertyMetadata(null));
MinimumValueProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(NumericUpDown), new PropertyMetadata(null));
StepValueProperty = DependencyProperty.Register("Step", typeof(double), typeof(NumericUpDown), new PropertyMetadata(null));
TextValueProperty = DependencyProperty.Register("TextValue", typeof(double), typeof(NumericUpDown), new PropertyMetadata(null));
}
My Usercontrol implementation in the MainPage.xaml page as follows
<local:NumericUpDown Maximum="28" Minimum="-28" Step="0.25" TextValue="{Binding ElementName=FranePrice, Path=DataContext.FranePrice}"></local:NumericUpDown>
Where I have another ViewModel which i bind to the XAML page and there is a Property in the ViewModel which i bind to the TextValue property of the Usercontrol.
FramePrice is property in the View model that i bind to the TextValue property of the user control
and Main page XAML is
<UserControl x:Class="DatePicker.MainPage"
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:DatePicker"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Vertical">
<local:NumericUpDown Maximum="28" Minimum="-28" Step="0.25" TextValue="{Binding ElementName=FranePrice, Path=DataContext.FranePrice}"></local:NumericUpDown>
<Button Content="Show Date" Height="23" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click"/>
</StackPanel>
</Grid>
This View model of the page where i used user control. On click event i showing TextValue to user.
public class MainPageViewModel : EntityViewModel
{
public MainPageViewModel()
{
}
private double framePrice;
public Double FramePrice
{
get
{
return framePrice;
}
set
{
framePrice = value;
PropertyChangedHandler("FramePrice");
}
}
}
When I change the TextValue in the User control it doesnot change in the FramePrice property of the page viewmodel.
Is anything wrong in the code.???
As per Luke Woodward's post I have updated code as follows
public static readonly DependencyProperty MaximumValueProperty;
public static readonly DependencyProperty MinimumValueProperty;
public static readonly DependencyProperty StepValueProperty;
public static readonly DependencyProperty TextValueProperty;
public static double Max;
public static double Min;
public static double Stp;
public static double Val;
public double Maximum
{
get
{
return (double)GetValue(MaximumValueProperty);
}
set
{
SetValue(MaximumValueProperty, value);
}
}
public double Minimum
{
get
{
return (double)GetValue(MinimumValueProperty);
}
set
{
SetValue(MinimumValueProperty, value);
}
}
public double Step
{
get
{
return (double)GetValue(StepValueProperty);
}
set
{
SetValue(StepValueProperty, value);
}
}
public double TextValue
{
get
{
return (double)GetValue(TextValueProperty);
}
set
{
SetValue(TextValueProperty, value);
}
}
static NumericUpDown()
{
MaximumValueProperty = DependencyProperty.Register("Maximum", typeof(double), typeof(NumericUpDown), new PropertyMetadata(new PropertyChangedCallback(onMaximumValueChanged)));
MinimumValueProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(NumericUpDown), new PropertyMetadata(new PropertyChangedCallback(onMinimumValueChanged)));
StepValueProperty = DependencyProperty.Register("Step", typeof(double), typeof(NumericUpDown), new PropertyMetadata(new PropertyChangedCallback(onStepValueChanged)));
TextValueProperty = DependencyProperty.Register("TextValue", typeof(double), typeof(NumericUpDown), new PropertyMetadata(new PropertyChangedCallback(onTextValueChanged)));
}
private static void onStepValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Stp = (double)e.NewValue;
}
private static void onMinimumValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Min = (double)e.NewValue;
}
private static void onMaximumValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Max = (double)e.NewValue;
}
private static void onTextValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Val = (double)e.NewValue;
}
Then i accessed Max, Min , Stp and Val property in user control's view model to perform my logic.
and XAML code is follows
<local:NumericUpDown x:Name="ctlUpDown" Maximum="28" Minimum="-28" Step="0.25" TextValue="{Binding Path=FramePrice}"></local:NumericUpDown>
and XAML of user control
<StackPanel Margin="5" Orientation="Horizontal" VerticalAlignment="Center">
<TextBox x:Name="InputTextBox" Grid.Row="0" Grid.Column="0" Grid.RowSpan="1"
Height="23" VerticalAlignment="Top"
Width="50" TextAlignment="Center"
KeyDown="InputTextBox_KeyDown"
KeyUp="InputTextBox_KeyUp"
GotFocus="InputTextBox_GotFocus"
LostFocus="InputTextBox_LostFocus"
MouseWheel="InputTextBox_MouseWheel"
MouseEnter="InputTextBox_MouseEnter"
Text="{Binding Path=TextValue, ElementName=ctlUpDown, Mode=TwoWay,ValidatesOnDataErrors=True,ValidatesOnExceptions=True,NotifyOnValidationError=True}"
/>
</StackPanel>
The first thing I noticed wrong about your code was the properties Maximum, Minimum, Step and TextValue. Here's the TextValue property:
public double TextValue
{
get
{
return (double)GetValue(TextValueProperty);
}
set
{
SetValue(TextValueProperty, value);
this.ViewModel.ControlValue = Convert.ToString(value);
}
}
Properties that are backed by a dependency property, such as the four I mentioned above, should ALWAYS look like the following:
public double TextValue
{
get { return (double)GetValue(TextValueProperty); }
set { SetValue(TextValueProperty, value); }
}
In other words, the getter should contain nothing more than a call to GetValue, and the setter should contain nothing more than a call to SetValue.
The reason for this is that when Silverlight changes the value of the TextValue dependency property, it won't do it by using the property above. The values of dependency properties are stored within the Silverlight dependency system, and when Silverlight wants to change the value of one of them, it goes directly to this dependency system. It doesn't call your code at all. Properties like that above are provided only for your convenience, giving you an easy way to access and change the value stored in the dependency property. They will never be called by anything other than your own code.
Generally, if you want a method to be called whenever a dependency property value changes, you need to pass a PropertyChangedCallback in the PropertyMetadata when registering the dependency property. However, I suspect that in your case you won't need to do that.
It seems to me that you have three properties:
the FramePrice property in your view-model class,
the TextValue dependency property of your NumericUpDown user control,
the Text dependency property of the TextBox within your NumericUpDown user control's XAML.
My impression is that you want the FramePrice property in your view-model to always have the same value as the Text property of the TextBox. To do that, you need to bind the FramePrice property to the NumericUpDown's TextValue property, and then bind that to the Text property of the TextBox.
To bind the first two of these properties together, there are a couple of things to change. Firstly, the TextValue property in your <local:NumericUpDown> element should look like
TextValue="{Binding Path=FramePrice}"
The binding {Binding ElementName=FramePrice, Path=DataContext.FramePrice} won't work, because there's no element in your XAML with the attribute x:Name="FramePrice". The value of an ElementName property in a {Binding ...} must match the x:Name of an object in the XAML.
You also need to set up the DataContext for your main page. If your main page view-model object has a zero-argument constructor, one way of doing this is to follow this answer.
To bind the second two properties together, I would:
add an x:Name attribute to the <UserControl> element of your NumericUpDown control (x:Name="ctlUpDown", say),
replace the Text property of the TextBox within your NumericUpDown control with the following:
Text="{Binding Path=TextValue, ElementName=ctlUpDown, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
Once you've done that, you can then remove all of the lines this.ViewModel.SomeProperty = ... from your code-behind class. They're not necessary, and as I've already explained they won't be run when you wanted them to.
Finally, is there a reason you're not using the Silverlight Toolkit's NumericUpDown control?
EDIT 2: Against my better judgement I took a look at one of the two Silverlight projects you uploaded (I ignored the one with _2 in it). It bears very little resemblance to your question.
I can only assume you want the two textboxes (one of which is in a user control) to always have the same value. I was able to do this after making the following changes:
MainPageViewModel.cs: add ClearErrorFromProperty("DPropertyBind"); to the property setter. (Otherwise the validation error never gets cleared.)
MyUserControlWVM.xaml: removed reference to LostFocus event handler, added binding on Text property and added add x:Name attribute to the <UserControl> element. In other words, it now looks like the following:
<UserControl x:Class="DependencyPropertyBinding.MyUserControlWVM"
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"
mc:Ignorable="d"
x:Name="ctlWVM"
d:DesignHeight="300" d:DesignWidth="205">
<StackPanel Orientation="Horizontal" Width="204" Height="32">
<TextBox x:Name="textbox" Height="30" Width="200" Text="{Binding Path=DProperty, ElementName=ctlWVM, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" />
</StackPanel>
</UserControl>
MyUserControlWVM.xaml.cs: renamed dependency property DependencyPropertyValue to DPropertyProperty (the naming convention is that the static readonly field has the name of the property (in this case DProperty) with Property appended). I also removed the TextBox_LostFocus event handler.
If the code above is accurate you have spelt FramePrice as FranePrice in the binding
The output window should have shown this as a binding error when the page loaded.
it is currently
Binding ElementName=FranePrice, Path=DataContext.FranePrice
should be:
Binding ElementName=FramePrice, Path=DataContext.FramePrice
"With great binding capabilities comes great responsibility" :)

Silverlight databind int to lookless control not working

I am working a very simple lookless control, and I can't seem to get one of the template bindings to work. In the control I have two Dependency Properties, the one that is a string works, and the one that is an int does not.
The csharp code looks like this:
using System;
using System.Windows;
using System.Windows.Controls;
namespace ControlDemo
{
public class TextControlLookless : Control
{
#region Title
public static readonly DependencyProperty ChartTitleProperty =
DependencyProperty.Register("ChartTitle", typeof(string), typeof(TextControlLookless),
null);
public String ChartTitle
{
get { return (string)GetValue(ChartTitleProperty); }
set
{
SetValue(ChartTitleProperty, value);
}
}
#endregion
#region Value
public static readonly DependencyProperty ChartValueProperty =
DependencyProperty.Register("ChartValue", typeof(int), typeof(TextControlLookless),
null);
public int ChartValue
{
get { return (int)GetValue(ChartValueProperty); }
set
{
SetValue(ChartValueProperty, value);
}
}
#endregion
#region ctor
public TextControlLookless()
{
this.DefaultStyleKey = typeof(TextControlLookless);
}
#endregion
}
}
And the xaml for the control looks like this:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ControlDemo">
<Style TargetType="local:TextControlLookless">
<Setter Property="ChartTitle" Value="Set Title" />
<Setter Property="ChartValue" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TextControlLookless">
<Grid x:Name="Root">
<Border BorderBrush="Black" BorderThickness="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{TemplateBinding ChartTitle}" />
<TextBlock Text="{TemplateBinding ChartValue}" Grid.Row="1" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I put this on a page, I can see the ChartTitle (either Set Title, or whatever I set it to), but the ChartValue never shows up. If I change its type to a string, it does show up, so I must be missing something.
The problem is that TemplateBinding is a far more primitive operation than Binding. Binding is an actual class and includes some helpful features including the implicit conversion of strings back and forth between other data types.
TemplateBinding is purely a markup instruction and crucially in your case does not do type conversion for you. Hence the dependency property being bound to a Text property of a TextBlock must be a string.
You have two choices:-
One choice is instead using TemplateBinding give the TextBlock a name and assign its Text in the ChartValue property changed call back:-
#region Value
public static readonly DependencyProperty ChartValueProperty =
DependencyProperty.Register("ChartValue", typeof(int), typeof(TextControlLookless),
new PropertyMetadata(0, OnChartValuePropertyChanged));
private static void OnChartValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
TextControlLookless source = d as TextControlLookless;
source.Refresh();
}
public int ChartValue
{
get { return (int)GetValue(ChartValueProperty); }
set
{
SetValue(ChartValueProperty, value);
}
}
#endregion
private TextBlock txtChartValue { get; set; }
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
txtChartValue = GetTemplateChild("txtChartValue") as TextBlock;
Refresh();
}
private void Refresh()
{
if (txtChartValue != null)
{
txtChartValue.Text = ChartValue.ToString();
}
}
where the xaml looks like:-
<TextBlock x:Name="txtChartValue" Grid.Row="1" />
The other choice is to create a private dependency property for the value with type of string:-
#region Value
public static readonly DependencyProperty ChartValueProperty =
DependencyProperty.Register("ChartValue", typeof(int), typeof(TextControlLookless),
new PropertyMetadata(0, OnChartValuePropertyChanged));
private static void OnChartValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
d.SetValue(ChartValueStrProperty, e.NewValue.ToString());
}
private static readonly DependencyProperty ChartValueStrProperty =
DependencyProperty.Register("ChartValueStr", typeof(string), typeof(TextControlLookless),
new PropertyMetadata("0"));
public int ChartValue
{
get { return (int)GetValue(ChartValueProperty); }
set
{
SetValue(ChartValueProperty, value);
}
}
#endregion
where the xaml looks like:-
<TextBlock Text="{TemplateBinding ChartValueStr}" Grid.Row="1" />
Note that the ChartValueStrProperty is private and I haven't bothered creating a standard .NET property to cover it. TemplateBinding actually takes the property name you assign suffixes is with "Property" then looks for a static field on the target type.
Both approaches have their strengths and weaknesses. The first approach is the more common pattern but takes a little more code and is less flexiable (the control displaying the value must be a TextBlock). The second is more flexiable and uses less code but is somewhat unorthodox.

Accessing a button click for a button in a ListBox DataTemplate on a Silverlight Templated Control

I have a Silverlight Templated Control (not a user control), which contains a ListBox.
In the DataTemplate of the ListBox i have a Button, like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Width="70" Height="20" Value="{Binding Path=Percentage}" Minimum="0.0" Maximum="100.0" />
<TextBlock Grid.Column="0" Text="{Binding Path=Percentage, StringFormat='{}{0:##0.0}%'}" Margin="10,3,3,3" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding Path=File.Name}" Margin="3" />
<Button Grid.Column="2" Content="Remove" x:Name="RemoveButton" Command="{TemplateBinding DeleteCommand}" Style="{TemplateBinding UploadButtonStyle}" HorizontalAlignment="Right" Margin="0,0,5,0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
See the button there at the end of the template? HOW CAN I ACCESS IT'S CLICK EVENT? I can't use the GetTemplateChild() method since the button is part of the DataTemplate. I've tried Commanding (as you can see above). Seems like that's the way to go, although the Templated Control isn't exactly MVVM.
Any ideas? Maybe something other than Commanding? or else I'm doing the commanding wrong?
here's some relevant code:
...the Dependency Property / Property definitions... (should it be a Dep Prop?)
public static readonly DependencyProperty DeleteCommandProperty =
DependencyProperty.Register("DeleteCommand", typeof(ICommand), typeof(MultipleFileUpload), new PropertyMetadata(null));
public ICommand DeleteCommand
{
get { return (ICommand)GetValue(DeleteCommandProperty); }
set
{
SetValue(DeleteCommandProperty, value);
FirePropertyChanged("DeleteCommand"); //INotifyPropertyChanged stuff
}
}
... in OnApplyTemplate()...
public override void OnApplyTemplate()
{
....
DeleteCommand = new DelegateCommand(RemoveItemFromList, CanRemove);
....
base.OnApplyTemplate();
}
...the ICommand Action...
private void RemoveItemFromList(object commandParameter)
{
//NEVER GETTING HERE!
}
I hope it's something small.
Thanks people!
Kevin
I've added a command as a property to the class of the objects I bind into ListBoxes's (and other ItemsControl's) ItemSource. This does mean I have to change my "data" objects to handle GUI events - which often seemed wrong and hacky.
I've also derived ItemsControl (but since a listbox is an ItemsControl this may still apply). I add my own properties the derived control that I'll ultimately want to access from the items. In your case the button command handler. It should be easy to set these properties since they aren't locked-up in that nested template.
Next, I overrided GetContainerForItemOverride() in that derived class and return another class, my own derived ContentPresenter. This new ContentPresenter should also have that same command property - set it equal to ItemControl's command in GetContainerForItemOverride when you construct it.
Now in the DataTemplate use TemplateBinding (not regular Binding) to get to that Command.
I've kicked around the item of trying to make a generic/reusable version of all of this.
Edit, basic example :
class MyItemsControl : ItemsControl
{
public Command MyCommand {get;set;} // I've often use a full-blown DP here
snip
protected override DependencyObject GetContainerForItemOverride()
{
return new MyContentPresenter(this.MyCommand); // MyContentPresenter is just a derived ContentPresenter with that same property.
}
Edit again:
I've also put code in ItemsControl.PrepareContainerForItemOverride. This method gives you both the ContentControl (your own one if you're overriding GetContainerForItemOverride) and the current "Item" in the list. In here you can also do further initialization of the ContentControl instance - if what you want to do depends on the object that it's being bound to.
I suggest you use a single relaycommand:
public class RelayCommand<T> : ICommand
{
#region Fields
readonly Action<T> _execute = null;
readonly Predicate<T> _canExecute = null;
#endregion // Fields
#region Constructors
public RelayCommand(Action<T> execute)
: this(execute, null)
{
}
/// <summary>
/// Creates a new command.
/// </summary>
/// <param name="execute">The execution logic.</param>
/// <param name="canExecute">The execution status logic.</param>
public RelayCommand(Action<T> execute, Predicate<T> canExecute)
{
if (execute == null)
throw new ArgumentNullException("execute");
_execute = execute;
_canExecute = canExecute;
}
#endregion // Constructors
#region ICommand Members
[DebuggerStepThrough]
public bool CanExecute(object parameter)
{
return _canExecute == null ? true : _canExecute((T)parameter);
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public void Execute(object parameter)
{
_execute((T)parameter);
}
#endregion // ICommand Members
}
XAML:
<Button Grid.Column="2" Content="Remove" x:Name="RemoveButton" Command="{Binding DeleteCommand}" CommandParameter={Binding} Style="{TemplateBinding UploadButtonStyle}" HorizontalAlignment="Right" Margin="0,0,5,0" />
what this will do is everytime you click on the button, it will invoke the same deletecommand, but will pass the current item as parameter.
Hope this helps
I've come across this idea in MSDN, I have not tried it but I figured it was worth sharing here:
The DataContext of the items in the list box is not the same as the views DataContext. Each item's DataContext refers to an item in the collection that is bound to the list box's ItemsSource property.
A solution is to bind the command property to a static resource and set the value of the static resource to the command you want to bind. This is illustrated in the following XAML from the Stock Trader RI.
<!--Specifying the observablecommand in the view's resources-->
<UserControl.Resources>
<Infrastructure:ObservableCommand x:Key="BuyCommand" />
</UserControl.Resources>
<!—Binding the Button Click to the command. This control can sit inside a datagrid or a list box. -->
<Button Commands:Click.Command="{Binding Path=Value, Source={StaticResource BuyCommand}}" Commands:Click.CommandParameter="{Binding Path=TickerSymbol}" />
Then in the code-behind of the view, you must specify that the value of the resource actually points to the command on the presentation model. The following is an example of this from the Stock Trader RI, where the BuyCommand property on the presentation model is put in the resources.
((ObservableCommand)this.Resources["BuyCommand"]).Value = value != null ? value.BuyCommand : null;
Hi you can use relative source and AncesterType. Then its works fine for me.
Refer the below code.
<Button Content="Delete" Command="{Binding DataContext.DeleteCommand,
RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"
CommandParameter="{Binding Path=SelectedItem, RelativeSource= {RelativeSource FindAncestor, AncestorType=
{x:Type ListBox}}}"/>

Nested Binding of UserControls

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.

Resources