We Keep Coding

Why is the binding on my custom control not working?

I have a MainView where I'm using a component I created called VideoPlayer. VideoPlayer is a Grid that has a MediaElement as well as some buttons and a slider to control video playback.
I'm trying to set the path of the video to be played in MainView by binding a property in VideoPlayer to a property in MainView.
The relevant parts of the code are below:
Snippet from VideoPlayer.xaml:
<MediaElement
Name="MediaElement"
Grid.Row="0"
LoadedBehavior="Manual"
Stretch="Uniform"
Source="{Binding VideoLocation}" />
Snippet from VideoPlayer.xaml.cs:
public string VideoLocation
{
get { return (string)GetValue(VideoLocationProperty); }
set { SetValue(VideoLocationProperty, value); }
}
public static readonly DependencyProperty VideoLocationProperty
= DependencyProperty.Register("VideoLocation", typeof(string), typeof(VideoPlayer), new PropertyMetadata(null));
VideoPlayer is used in MainView.xaml, which is following MVVM:
<ReuseableComponents:VideoPlayer VideoLocation="{Binding VideoPath}"/>
This is the bound property, VideoPath, in MainViewModel.cs:
private string _videoPath;
public string VideoPath
{
get => _videoPath;
set => SetProperty(ref _videoPath, value);
}
If I remove the VideoLocation binding and hard code a path in MainView.xaml, the video will play just fine:
<ReuseableComponents:VideoPlayer VideoLocation="C:\Movies\FightClub.mp4"/>
So, I think the issue is with the MainView binding and not the VideoPlayer binding.
All of my other property bindings in MainView work, and they all follow this pattern:
<ComponentName PropertyName="{Binding ViewModelPropertyName}">
where ViewModelPropertyName is defined in MainView with a backing field and the setter calls SetProperty()
EDIT
The error I made was: in the constructor for VideoPlayer I had a line DataContext = this; I think I saw it in some tutorial somewhere. Anyway as per #Magnus advice I removed the line and changed VideoPlayer.xaml to
<UserControl x:Name="TheControl" ...>
<Grid DataContext={Binding ElementName=TheControl} ...>
...
</Grid>
</UserControl>
Where previously the UserControl didn't have the name property set and the Grid didn't have the DataContext property set.

The problem might be that you are setting the DataContext of your VideoPlayer UserControl to itself on the top level. That means you override the MainView DataContext that the control should inherit, i.e., this binding:
<ReuseableComponents:VideoPlayer VideoLocation="{Binding VideoPath}"/>
tries to bind to the VideoPlayer control instead of the MainView DataContext.
You could instead set the internal DataContext of your VideoPlayer on a contained element, something like this:
<UserControl x:Name="TheControl" ...>
<Grid DataContext={Binding ElementName=TheControl} ...>
...
</Grid>
</UserControl>

The Binding is being done relative to your control's DataContext, which you probably haven't set. You need to set it relative to the control instead. Give your control a name like this:
<UserControl x:Class="YourApp.YourUserControl"
... etc ...
x:Name="_this">
And then bind to that directly:
Source="{Binding ElementName=_this, Path=VideoLocation}"
Alternatively you can also use a RelativeSource binding with AncestorType set to your user control type.

Using Databinding in DependencyProperty

I created a class that inherits from Window and has got a DependencyProperty called TitlebarContent.
public FrameworkElement TitleBarContent
{
get { return (FrameworkElement)GetValue(TitleBarContentProperty); }
set { SetValue(TitleBarContentProperty, value); }
}
// Using a DependencyProperty as the backing store for TitleBarContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TitleBarContentProperty =
DependencyProperty.Register("TitleBarContent", typeof(FrameworkElement), typeof(tkWindowControl), new PropertyMetadata(default(FrameworkElement)));
Inside a ResourceDictionary for Styles i add a ContentControlfor this property.
Now I'd like to use the new 'WindowObject' in another application and access the new TitlebarContentProperty. I can see the items inside my Titlebar and I'm able to move the Window, resize it and more. But I cannot bind to these items. For example I'd like to add a Helpbutton inside the Titlebar. The Button is shown, but i can't click it.
<tk:tkWindowControl.TitleBarContent>
<DockPanel Grid.Row="0" FlowDirection="LeftToRight">
<Button Content="Exit" Command="{Binding ExitApplicationCommand}" Height="60" Width="60" Background="Red"/>
</DockPanel>
</tk:tkWindowControl.TitleBarContent>
My DependencyProperty is a typeof(FrameWorkElement) because i like to add several Buttons to the Titlebar.
Is it possible to use my Bindings in this way?

Set the WindowChrome.IsHitTestVisibleInChrome attached property of the Button or the parent element to true:
<Button Content="Exit" WindowChrome.IsHitTestVisibleInChrome="True" ... />
Alternatively, you should decrease the value of the CaptionHeight property of the WindowChrome.

Binding UWP control to code behind property

I am developing UWP app and I created new user control and I want to bind it to dependency property in the control's code behind (without the datacontext).
Code Behind:
public Brush Fill
{
get { return (Brush)GetValue(FillProperty); }
set { SetValue(FillProperty, value); }
}
// Using a DependencyProperty as the backing store for Fill. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FillProperty =
DependencyProperty.Register("Fill", typeof(Brush), typeof(MyControl), new PropertyMetadata(new SolidColorBrush(Colors.Black)));
XAML:
...
<Grid>
<Path Fill="{Binding ????}" Stretch="Fill">
...
</Path>
</Grid>
I want that my path's fill property will bind to the property Fill from code behind (the data context should hold different data so I can't use it here)
How can I do that in UWP?

x:Bind would work perfectly on this. Note x:Bind will be looking for properties, methods & events defined in your XAML's code-behind. It's a more performant binding than ElementName.
<Path Fill="{x:Bind Fill, Mode=OneWay}" />

You should be able to use the ElementName property of a binding to circumvent the data context, just as normal WPF allows you to do.
If the property is part of the user control you'll need to assign a name via x:Name to your user control in xaml to access it
<UserControl [...] x:Name="Control"...`
Then use something like{Binding ElementName=Control, Path=Fill}, as long as Fill is a property of your user control.

WPF XAML Binding not calling changed event

My program has a custom DependencyObject to which I bind values of another DependencyObject which are set in code:
<TabControl
Grid.Column="1"
Grid.Row="1">
<TabItem
Header="XML">
<TextBox
Text="{Binding Asset.Xml, ElementName=window}"
IsReadOnly="True" />
</TabItem>
<TabItem
Header="Texture">
<we:DXImage>
<we:DXImage.Renderer>
<we:TextureRenderer
Source="{Binding Asset.Image, ElementName=window}" />
</we:DXImage.Renderer>
</we:DXImage>
</TabItem>
</TabControl>
The TextBox binding to Asset.Xml works flawlessly, also if I replace the xaml of the second item with a TextBox it also displays the content of Asset.Image (a path to an image of type string).
The Source Property of the renderer looks like this:
private static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(string), typeof(TextureRenderer),
new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, SourceChanged));
public string Source
{
get { return (string)GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}
private static void SourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
// Do stuff
}
However the SourceChanged event is never called.
I have updated the project on GitHub:
https://github.com/Qibbi/WrathEd/tree/master/WrathEd2
the xaml code is located in the WrathEd2 project while the DXImage, Renderer, and other support classes are in WrathEd.Windows
The current MainWindow is a mess code behind wise atm, I plan to refactor it into appropriate parts when finishing the project.

The problem is that your we:TextureRenderer is not a part of the VisualTree (as it is inside a property). Therefore, the binding cannot find the source Element.
According to ElementName Binding is failing, you can use
Source={x:Reference window}
instead of ElementName=window.

According to the MSDN documentation here
You need to set NotifyOnSourceUpdated to true for your binding

How to add variable Image on User Control

I'm trying to have a user control where an image is passed in from its containing element. The purpose is so that I can reuse a common set of visual elements while only changing the image. For example:
The control usage:
<DataTemplate DataType={x:Type myType}>
<local:MyControl PlotIconSource="..\Images\Scatter.png"/>
</DataTemplate>
The Image inside the control
<UserControl x:Class="MyControl">
<Image Source="{Binding PlotIconSource}"/>
</UserControl>
Finally the dependency property for PlotIconSource in the code-behind for MyControl.xaml.cs.
public ImageSource PlotIconSource
{
get { return (ImageSource)GetValue(PlotIconSourceProperty); }
set { SetValue(PlotIconSourceProperty, value); }
}
public static readonly DependencyProperty PlotIconSourceProperty =
DependencyProperty.Register(
"PlotIconSource",
typeof(ImageSource),
typeof(PlotHeader),
new UIPropertyMetadata());
I'm sure I've missed something along the way so any help would be appreciated.

You might want to bind via RelativeSource or with ElementName:
<UserControl x:Class="MyControl" Name="control">
<Image Source="{Binding PlotIconSource, ElementName=control}"/>
</UserControl>
(Do not set the DataContext, it will be invisible from the outside and mess with bindings meant for an inherited DataContext)

Looks right to me, are you getting an error message or something?