Develop Reference

How to bind AttachedProperty

I have created Attached Property, for learning purposes but can't get successful result.
public class AQDatagridDependencyProperties: DependencyObject
{
public static void SetCustomDataSource(AQDataGrid element, string value)
{
element.SetValue(CustomDataSourceProperty, value);
}
public static string GetCustomDataSource(AQDataGrid element)
{
return (string)element.GetValue(CustomDataSourceProperty);
}
// Using a DependencyProperty as the backing store for DataSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty CustomDataSourceProperty =
DependencyProperty.Register("CustomDataSource", typeof(string), typeof(AQDataGrid), new PropertyMetadata("obuolys"));
}
I've placed this attached property in my custom datagrid User Control which is implemented in UserView Page.
<Page x:Class="PDB.UsersView"
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:local="clr-namespace:PDB"
xmlns:PDB ="clr-namespace:PDBapi;assembly=PDBapi"
xmlns:Wpf ="clr-namespace:AQWpf;assembly=AQWpf"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="Users"
Name="Users"
VisualBitmapScalingMode="LowQuality"
>
<Page.DataContext>
<PDB:UsersViewModel x:Name="vm"/>
</Page.DataContext>
<Grid VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling">
<Wpf:AQDataGrid DataContext="{Binding AQDatagridViewModel}" Wpf:AQDatagridDependencyProperties.CustomDataSource="Something" />
</Grid>
Question is how to bind that attached property value inside Custom Datagrid User Control? Example:
<UserControl x:Class="AQWpf.AQDataGrid"
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:local="clr-namespace:AQWpf"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
Name="AQCustomDataGrid"
>
<!--Custom Data grid Implementation-->
<DataGrid x:Name="InstructionsDataGrid"
Grid.Row="1"
DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=local:AQDataGrid}, Path=DataContext}"
Style="{StaticResource OptimizedAGDatagrid}"
ItemsSource="{Binding Data}"
CurrentItem="{Binding SelectedObject, Mode=TwoWay}"
CurrentColumn="{Binding CurrentColumn, Mode=TwoWay}"
CurrentCell="{Binding CurrentCells, Mode=TwoWay}"
Tag="<----How to bind here? ---->}"
>

Your attached property declaration is incorrect. You must call RegisterAttached instead of Register, and the third argument passed to the method must by the type of the class that declares the property.
Besides that, the declaring class does not need to be derived from DependencyObject, and could even be declared static:
public static class AQDatagridDependencyProperties
{
public static readonly DependencyProperty CustomDataSourceProperty =
DependencyProperty.RegisterAttached( // here
"CustomDataSource",
typeof(string),
typeof(AQDatagridDependencyProperties), // and here
new PropertyMetadata("obuolys"));
public static string GetCustomDataSource(AQDataGrid element)
{
return (string)element.GetValue(CustomDataSourceProperty);
}
public static void SetCustomDataSource(AQDataGrid element, string value)
{
element.SetValue(CustomDataSourceProperty, value);
}
}
You would set that property like
<local:AQDataGrid local:AQDatagridDependencyProperties.CustomDataSource="something" >
and bind to it by an expression like
Tag="{Binding Path=(local:AQDatagridDependencyProperties.CustomDataSource),
RelativeSource={RelativeSource AncestorType=UserControl}}"
As a note, you would typically declare the property as a regular dependency property in the AQDataGrid class.

You were defining a simple DepencyProperty. You have to use the DependencyProperty.RegisterAttached method to register the DependencyProperty as an attached property.
Also the owner type must be set to the declaring class' type (typeof(AQDatagridDependencyProperties)) and not the attaching type (typeof(AQDataGrid)):
AQDatagridDependencyProperties.cs
public class AQDatagridDependencyProperties : DependencyObject
{
public static readonly DependencyProperty CustomDataSourceProperty = DependencyProperty.RegisterAttached(
"CustomDataSource",
typeof(string),
typeof(AQDatagridDependencyProperties),
new FrameworkPropertyMetadata("obuolys", AQDatagridDependencyProperties.DebugPropertyChanged));
private static void DebugPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var oldValue = e.OldValue; // Set breakpoints here
var newValue = e.NewValue; // in order to track property changes
}
public static void SetCustomDataSource(DependencyObject attachingElement, string value)
{
attachingElement.SetValue(CustomDataSourceProperty, value);
}
public static string GetCustomDataSource(DependencyObject attachingElement)
{
return (string) attachingElement.GetValue(CustomDataSourceProperty);
}
}
Usage
<AQDataGrid AQDatagridDependencyProperties.CustomDataSource="Something" />
Inside the AQDataGrid control:
<DataGrid x:Name="InstructionsDataGrid"
Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=AQDataGrid}, Path=(AQDatagridDependencyProperties.CustomDataSource)}" />

WP8.1 - UserControl Textbox + image, not showing data

I'm most probably missing something obvious as I'm new to WPF development. I'm trying to create a Windows Phone 8.1 application and for my use I want to create a custom user control that contains hero information and hero icon (simple game-related information lookup app).
I have created a usercontrol with name HeroInformationControl and then defined an image and textblock in XAML. Looking up through various resources online I created it as follows:
<UserControl Name="HeroInformationControl"
x:Class="DotaHelper.HeroInformation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DotaHelper"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="50"
d:DesignWidth="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image
HorizontalAlignment="Left"
Height="Auto"
Stretch="Fill"
VerticalAlignment="Top"
Width="Auto" Source="{Binding ElementName=HeroInformationControl, Path=HeroImage}"
/>
<TextBlock
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
Height="50"
Grid.Column="1"
TextWrapping="Wrap"
Text="{Binding ElementName=HeroInformationControl, Path=HeroName}"
VerticalAlignment="Center"
Width="300"/>
Then, HeroInformation.xaml.cs:
public partial class HeroInformation
{
public HeroInformation()
{
this.InitializeComponent();
this.DataContext = this;
}
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(string), new PropertyMetadata(""));
public string HeroName
{
get { return (string)GetValue(HeroNameProperty); }
set { SetValue(HeroNameProperty, value); }
}
public static readonly DependencyProperty HeroImageProperty =
DependencyProperty.Register("HeroImage", typeof(string), typeof(string), new PropertyMetadata(""));
public string HeroImage
{
get { return (string)GetValue(HeroImageProperty); }
set { SetValue(HeroImageProperty, value); }
}
}
MainPage.xaml, HeroInformation object:
<local:HeroInformation
x:Name="HeroInformation1"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="200"
/>
And from the UI thread in MainPage.xaml.cs:
HeroInformation1.HeroImage = hero.IMGurl;
HeroInformation1.HeroName = hero.Heroname;
Sorry for a long code but I have virtually no idea where the problem is.
As a note: hero.IMGUrl and hero.Heroname properties are both of string.
Also if I add to Mainpage.xaml properties by hand (HeroImage and HeroName) it loads.
Any help to understand what's wrong would be appreciated - also, if you spot something that is far from best programming practice I'd be grateful for tips.

Never. Ever. Ever. Do this:
this.DataContext = this;
Instead, give your UserControl an x:Name in your XAML file. Like this:
<UserControl x:Name="usr" ... >
This will allow you to bind to your Dependency Properties using the following binding:
Text="{Binding DataContext.HeroName, ElementName=usr}"
Alternatively, you can bind the UserControl to itself using the following:
DataContext="{Binding RelativeSource={RelativeSource Self}}"
And your binding will look like this:
Text="{Binding HeroName}"
EDIT: Also, as Juan has noticed, your Dependency Property declarations are incorrect:
public string HeroName
{
get { return (string)GetValue(HeroNameProperty); }
set { SetValue(HeroNameProperty, value); }
}
// Using a DependencyProperty as the backing store for HeroName. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(null));
Pro-tip: Use propdp -> Tab -> Tab to declare a dependency property.

the only thing you missed was:
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(""));
typeof(HeroInformation)
the rest is perfect and the way to do it. Might be the image give some issue (I cannot remember in all platforms (WPF,WP, UWP) if it is right use String for URI.

How to set a WPF usercontrol property from XAML?

I'm trying to set the fill property of several instances of the same usercontrol from XAML in order to distinguish them. I'm using a dependency property in the C# codebehind of the control and referring to that in the XAML when I instantiate the control. Here's a simplified example of what I've tried, first the XAML of the user control:
<UserControl x:Class="RectangleFillUserControlTest.RectangleFillTest"
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="50" d:DesignWidth="150">
<Grid>
<Rectangle x:Name="rect" HorizontalAlignment="Left" Height="50" Stroke="Black" VerticalAlignment="Top" Width="150"/>
</Grid>
</UserControl>
Now the codebehind:
namespace RectangleFillUserControlTest
{
public partial class RectangleFillTest : UserControl
{
SolidColorBrush fillBrush;
public static readonly DependencyProperty FillColourProperty = DependencyProperty.Register
("FillColour", typeof(string), typeof(RectangleFillTest), new PropertyMetadata(string.Empty));
public string FillColour
{
get { return (string)GetValue(FillColourProperty); }
set
{
SetValue(FillColourProperty, value);
if (value == "red") fillBrush = new SolidColorBrush(Colors.Red);
else fillBrush = new SolidColorBrush(Colors.Green);
rect.Fill = fillBrush;
}
}
public RectangleFillTest()
{
InitializeComponent();
}
}
}
I instantiate the control in the main window and try to set the fill colour to red:
<Window x:Class="RectangleFillUserControlTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RectangleFillUserControlTest"
Title="MainWindow" Height="350" Width="525">
<Grid Background="#FF1D2CC3">
<local:RectangleFillTest FillColour="red"/>
</Grid>
</Window>
But the rectangle remains unfilled, even when I run the project. Can anyone help please?
Cheers,
Tim

There are two things wrong with your dependency property.
First, its type should be Brush, not string, because that is the type used by properties of WPF controls like Shape.Fill or Control.Background. WPF provides automatic type conversion from strings like "Red" or "#FFFF0000" in XAML to type Brush.
Second, you should not have anything else than a call to SetValue in the setter method of the CLR wrapper. The reason is explained in the XAML Loading and Dependency Properties article on MSDN:
Because the current WPF implementation of the XAML processor behavior
for property setting bypasses the wrappers entirely, you should not
put any additional logic into the set definitions of the wrapper for
your custom dependency property. If you put such logic in the set
definition, then the logic will not be executed when the property is
set in XAML rather than in code.
So your dependency property declaration should look like this:
public static readonly DependencyProperty FillBrushProperty =
DependencyProperty.Register(
"FillBrush", typeof(Brush), typeof(RectangleFillTest));
public Brush FillBrush
{
get { return (Brush)GetValue(FillBrushProperty); }
set { SetValue(FillBrushProperty, value); }
}
To react to property changes, you would now register a PropertyChangedCallback with property metadata. But you don't need to do that here, because you could simply bind the property in the UserControl's XAML like this:
<Rectangle Fill="{Binding FillBrush,
RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}" ... />

I will explain why is is not working and how to solve.
1.- A Dependency Property is only called when the usercontrol has that dependency property in the visual tree.
In case you want to do in that way, you need to add for instance :
new PropertyMetadata(string.Empty, ValueChanged));
and there change the value:
public static readonly DependencyProperty FillColourProperty = DependencyProperty.Register
("FillColour", typeof(string), typeof(RectangleFillTest), new PropertyMetadata(string.Empty, ValueChanged));
private static void ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as RectangleFillTest;
var fillBrush = new SolidColorBrush();
if (control.FillColour == "red")
fillBrush = new SolidColorBrush(Colors.Red);
else
fillBrush = new SolidColorBrush(Colors.Green);
control.rect.Fill = fillBrush;
}
public string FillColour
{
get
{
return (string)GetValue(FillColourProperty);
}
set
{
SetValue(FillColourProperty, value);
}
}
That is explicit for your logic, in case you need a more generic code for any color, etc using binding the property to the rectangle, just tell me.

You need to bind your Dependency Property to the Fill property of your Rectangle in the xaml of your UserControl. You'll have Something like this :
<Rectangle x:Name="rect" Fill="{Binding FillColour, RelativeSource={RelativeSource FindAncestor, AncestorType=RectangleFillTest}}" HorizontalAlignment="Left" Height="50" Stroke="Black" VerticalAlignment="Top" Width="150"/>
Also, in your dependency property, it's type should be Brush, and not String.

Setting an object property with XAML

I have two custom UserControl in my project code: TableControl and DeckControl. In the code of the latter I would be able to access the former when it's needed. So in my DeckControl I implemented the following property:
private TableControl m_Table;
public TableControl Table
{
get { return m_Table; }
set { m_Table = value; }
}
The problem is that I'm not able to set the property from XAML code:
<Canvas Core:Name="Layout" Loaded="OnLayoutLoaded">
<Namespace:TableControl Core:Name="Table" Canvas.Left="0" Canvas.Top="0" Height="{Binding ElementName=Layout, Path=ActualHeight}" Width="{Binding ElementName=Layout, Path=ActualWidth}"/>
<Namespace:DeckControl Core:Name="Deck" Canvas.Left="50">
</Canvas>
I tried using Reference but compiler says that the method or opera
<Namespace:DeckControl Core:Name="Deck" Canvas.Left="50" Table="{Core:Reference Name=Table}">
I tried this but it isn't working either:
<Namespace:DeckControl Core:Name="Deck" Canvas.Left="50" Table="{Core:Static Table}">
I also tried using Binding:
<Namespace:DeckControl Core:Name="Deck" Canvas.Left="50" Table="{Binding ElementName=Table}">
Ok so... it's my first approach to XAML and I'm still working on it... but I really can't get it!

If you want to bind to a property in youe Model(window/Usercontrol) codebehind you have to set the DataContext in your Xaml.
There are may ways to do this but the simpliest is just naming your window or usercontrol and binding using ElementName.
Example for a Window:
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="233" Width="143" Name="UI">
<Canvas DataContext="{Binding ElementName=UI}" > <!-- Set dataContext to Window -->
<Namespace:DeckControl Canvas.Left="50" Table="{Binding ElementName=Table}">
</Canvas>
</Window>
And if you want the Xaml to update when Table changes your code behind should implement INotifyPropertyChanged, this will inform the Xaml that the property has changed.
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
}
private TableControl m_Table;
public TableControl Table
{
get { return m_Table; }
set { m_Table = value; NotifyPropertyChanged("Table"); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
If your Table property is not a DependancyProperty you will have to chage this so you can bind.
Example:
public class DeckControl : UserControl
{
.......
// Using a DependencyProperty as the backing store for Table. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TableProperty =
DependencyProperty.Register("Table", typeof(TableControl), typeof(DeckControl), new UIPropertyMetadata(null));
public TableControl Table
{
get { return (TableControl)GetValue(TableProperty); }
set { SetValue(TableProperty, value); }
}
}
Also any property that is being binded outside the scope of the UserControl has to be a DependancyProperty.
Example:
public partial class DeckControl : UserControl
{
public DeckControl()
{
InitializeComponent();
}
private int myVar;
public int MyProperty
{
get { return myVar; }
set { myVar = value; }
}
}
This will bind inside the usercontrol when it is a simple property as it is inscope.
<UserControl .....
d:DesignHeight="300" d:DesignWidth="300" Name="UI">
<TextBlock Text="{Binding MyProperty}" />
</UserControl>
This will not bind as its out of scope of the UserControl, MyProperty will have to be a DependancyProperty to bind here
<Window ....
Title="MainWindow" Height="233" Width="143" Name="UI">
<Grid>
<local:DeckControl MyProperty="{Binding Width}" /> // Will not bind
</Grid>
</Window>
Hope that makes sense :)

Custom usercontrol property binding failure silverlight

I have a custom usercontrol with DataContext="{Binding RelativeSource={RelativeSource self}}"
On the code behind i've made a dependency property like:
public static DependencyProperty ElementNameProperty = DependencyProperty.Register("ElementName",
typeof(string),
typeof(ElementControl),
new PropertyMetadata(new PropertyChangedCallback((s, e) => { new Base().OnPropertyChanged("ElementName"); })));
public string ElementName
{
get
{
return (string)base.GetValue(ElementNameProperty);
}
set
{
base.SetValue(ElementNameProperty, value);
}
}
Now when I try to use this usercontrol in my mainpage.xaml and use the following binding: <test.TestControl ElementName="{Binding name}" />, it keeps searching for 'name' property in my custom usercontrol instead of where it should come from?
What am I doing wrong ?

It searches there because you have the DataContext set on the topmost level for your user control. What you would need to do is get rid of the relative binding to self in the user control and specify ElementName in bindings (inside user control). Btw you probably don't need OnPropertyChanged in the PropertyChangedCallback cause DependencyProperties in their nature notify about value changes.

I eventually solved it this way. Not the way I wanted, but it's a (in my eyes) pretty neat solution.
CustomUserControl.xaml
<UserControl x:Class="TestApp.Controls.CustomUserControl"
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"
Width="75"
Height="75">
<Canvas x:Name="LayoutRoot"
Background="Black">
<StackPanel Orientation="Vertical">
<Image x:Name="UCImage"
Width="50"
Height="50"
HorizontalAlignment="Center" />
<TextBlock x:Name="UCText"
HorizontalAlignment="Center" />
</StackPanel>
</Canvas>
</UserControl>
CustomUserControl.xaml.cs
public partial class ElementControl : UserControl
{
#region DependencyProperty ElementNameProperty
public static DependencyProperty ElementNameProperty = DependencyProperty.Register("ElementName",
typeof(string),
typeof(ElementControl),
new PropertyMetadata(new PropertyChangedCallback((s, e) =>
{
//See Here
((ElementControl)s).UCText.Text = e.NewValue as string;
})));
public string ElementName
{
get
{
return (string)base.GetValue(ElementNameProperty);
}
set
{
base.SetValue(ElementNameProperty, value);
}
}
#endregion
}