Bind Element to different DataContext property - wpf

Question

forgive this question - just learning WPF and it's making my brain hurt. Can't get my head around Bindings/DataContexts. XAML below produced via some code monkery (my knowledge of WPF not good enough atm to know what is helpful to post or not):
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:MoveResize" WindowStartupLocation="CenterScreen"
xmlns:paz="clr-namespace:Wpf.Controls.PanAndZoom;assembly=Wpf.Controls.PanAndZoom"
Title="Move and resize" Height="550" Width="750" Loaded="Window_Loaded" KeyDown="Window_KeyDown" KeyUp="Window_KeyUp">
<Window.Resources>
<!-- Custom Thumb Style-->
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="Rectangle" StrokeThickness="1" Stretch="Fill" Opacity="1">
<Rectangle.Stroke>
<SolidColorBrush Color="Black"></SolidColorBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<SolidColorBrush Color="Yellow"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- MoveThumb Template -->
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent" />
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<!-- Abridged for stackoverflow posting -->
<s:ResizeThumb Style="{StaticResource SliderThumbStyle }" Width="9" Height="9" Cursor="SizeNWSE" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll" />
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" />
<Control Template="{StaticResource ResizeDecoratorTemplate}" />
</Grid>
</ControlTemplate>
</Window.Resources>
<paz:ZoomBorder x:FieldModifier="public" Name="zoomBorder" Stretch="None" ZoomSpeed="1.2" Background="SlateBlue" ClipToBounds="True" Focusable="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="4" Grid.Column="1">
<Canvas x:Name="workspace" Background="#555" Width="1920" Height="1080" Margin="97,93,-1275,-654">
<Path x:Name="YellowDiamond" Fill="Yellow" Data="M 0,5 5,0 10,5 5,10 Z" Stretch="Fill" IsHitTestVisible="True" Canvas.Left="10" Canvas.Top="10" Height="124.75" Width="134.5" />
<ContentControl Width="130" MinWidth="50" Height="130" MinHeight="50" Canvas.Top="150" Canvas.Left="150" Template="{StaticResource DesignerItemTemplate}">
<Path x:Name="BlueDiamond" Fill="Blue" Data="M 0,5 5,0 10,5 5,10 Z" Stretch="Fill" IsHitTestVisible="False" />
</ContentControl>
<TextBox x:Name="widthTB" Height="23" Canvas.Left="131" TextWrapping="Wrap" Text="{Binding BastardWidth, Mode=OneWay}" Canvas.Top="348" Width="120" />
</Canvas>
</paz:ZoomBorder>
</Window>
The key line is:
<s:ResizeThumb Style="{StaticResource SliderThumbStyle }" Width="9" Height="9" Cursor="SizeNWSE" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
I'm wanting to set Width and Height to a property stored in certain class (PanAndZoomController). My understanding is that this is presently databound to ResizeThumb.vb. The relevant code behind:
Partial Public Class MainWindow
Private _panZoomControl As New PanAndZoomController
Public Property PanZoomController() As PanAndZoomController
Get
Return _panZoomControl
End Get
Set(ByVal value As PanAndZoomController)
_panZoomControl = value
End Set
End Property
Public Sub New()
InitializeComponent()
End Sub
Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
Me.DataContext = _panZoomControl
End Sub
Private Sub MousewheelMoved(sender As Object, e As MouseWheelEventArgs) Handles Me.MouseWheel
_panZoomControl.ZoomFactor = zoomBorder.ZoomX
End Sub
End Class
Public Class PanAndZoomController
Private _zoomFactor As Double
Public Property ZoomFactor() As Double
Get
Return _zoomFactor
End Get
Set(ByVal value As Double)
_zoomFactor = value
_scaledWidth = 10 * _zoomFactor
End Set
End Property
Private _scaledWidth As Double = 10
Public Property ScaledWidth() As Double
Get
Return _scaledWidth
End Get
Set(ByVal value As Double)
_scaledWidth = value
End Set
End Property
End Class
Thus, Width and Height should be populated from MainWindow.PanZoomController.ScaledWidth. Could someone help out with how to achieve this? In as little XAML as possible, please!? I still need to preserve the binding of that element to s:ResizeThumb due to the code behind.
EDIT: In response to ASh's suggestions.
I've tried NotifyPropertyChanged with what I think is the right way, but still no joy :(
Simplified code scenario. Relevant code behind:
Public Class Workspace
Implements INotifyPropertyChanged
Public Sub NotifyPropertyChanged(ByVal propName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))
End Sub
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Private _canvasZoomFactor As Double = 1
Public Property CanvasZoomFactor() As Double
Get
Return _canvasZoomFactor
End Get
Set(ByVal value As Double)
_canvasZoomFactor = value
_handleWidth = 5 * value
Me.NotifyPropertyChanged("HandleWidth")
End Set
End Property
Private _handleWidth As Double = 5
Public ReadOnly Property HandleWidth() As Double
Get
Return _handleWidth
End Get
End Property
End Class
XAML:
<UserControl x:Name="MainWorkspace" x:Class="Workspace"
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:s="clr-namespace:stigzler.utility.WPFcontrols"
xmlns:local="clr-namespace:stigzler.utility.WPFcontrols"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid SnapsToDevicePixels="false">
<s:ResizeThumb Width="{Binding ElementName=Workspace, Path=HandleWidth,UpdateSourceTrigger=PropertyChanged}"
Height="{Binding ElementName=Workspace, Path=HandleWidth,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource SliderThumbStyle}" Cursor="SizeNWSE" VerticalAlignment="Top"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" />
<Control Template="{StaticResource ResizeDecoratorTemplate}" />
</Grid>
</ControlTemplate>
<ContentControl Width="130" MinWidth="50" Height="130" MinHeight="50" Canvas.Top="150" Canvas.Left="150" Template="{StaticResource DesignerItemTemplate}">
<Path x:Name="BlueDiamond" Fill="Blue" Data="M 0,5 5,0 10,5 5,10 Z" Stretch="Fill" IsHitTestVisible="False" />
</ContentControl>
</UserControl>
Relevant lines:
<s:ResizeThumb Width="{Binding ElementName=Workspace, Path=HandleWidth,UpdateSourceTrigger=PropertyChanged}"
Me.NotifyPropertyChanged("HandleWidth")
Still getting no joy. Any other suggestions (I'm still really struggling to get my head around this binding lark).

Answer 1

"My understanding is that this is presently databound to ResizeThumb.vb" - there can't be a binding to a file with code.
Each binding must have a source to get values. There are some options to provide that source:
specify it directly, e.g.: "{Binding Source={StaticResource}}";
use DataContext - the default option: "{Binding Path=SomeProperty}" - when no source is provided, then the binding will try to find requested property in a DataContext - some data associated with the View (or with part of the View - one might want to work with different data in different parts). Usually there is one DataContext per view (Me.DataContext = _panZoomControl)
use other element as binding source (via RelativeSource or ElementName), if the element are in the same view.
s:ResizeThumb is inside MainWindow view, so RelativeSource should work:
<s:ResizeThumb Style="{StaticResource SliderThumbStyle}"
Width="{Binding Path=PanZoomController.ScaledWidth, RelativeSource={RelativeSource AncestorType = {x:Type s:MainWindow}}}"
Height="{Binding Path=PanZoomController.ScaledWidth, RelativeSource={RelativeSource AncestorType = {x:Type s:MainWindow}}}"
hint: when binding doesn't work for some reason, check Output window in Visual Studio - there can be a message describing binding problem (type mismatch, missing property, incorrect DataContext are common reasons)

Answer 2

In addition to #ASh's answer (+1) on how to actually bind to the properties, you should also implement the INotifyPropertyChanged interface in your PanAndZoomController class in order for the view to be refreshed whenever you set the ZoomFactor and ScaledWidth properties dynamically:
Public Class PanAndZoomController
Implements INotifyPropertyChanged
Private _zoomFactor As Double
Public Property ZoomFactor() As Double
Get
Return _zoomFactor
End Get
Set(ByVal value As Double)
_zoomFactor = value
NotifyPropertyChanged(NameOf(ZoomFactor))
ScaledWidth = 10 * _zoomFactor
End Set
End Property
Private _scaledWidth As Double = 10
Public Property ScaledWidth() As Double
Get
Return _scaledWidth
End Get
Set(ByVal value As Double)
_scaledWidth = value
NotifyPropertyChanged(NameOf(ScaledWidth))
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub NotifyPropertyChanged(info As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(info))
End Sub
End Class