How to get variables in the class used in Style in WPF? - wpf

Question

In my MainWindow, there's ContentControl defined like this:
<ContentControl x:Name="rectangle" Width="150" Height="150" Canvas.Top="150" Canvas.Left="470" Selector.IsSelected="True" Style="{StaticResource DesignerItemStyle}">
<Rectangle Fill="Blue" Stretch="Fill" IsHitTestVisible="False" />
</ContentControl>
and the DesignerItem.xaml is (which used to class called MoveThumb and RotateThumb:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dr="clr-namespace:DragAndRotate">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MoveThumb.xaml" />
<ResourceDictionary Source="RotateDecorator.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="DesignerItemStyle" TargetType="ContentControl">
<Setter Property="MinHeight" Value="50" />
<Setter Property="MinWidth" Value="50" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<Control Name="RotateDecorator"
Template="{StaticResource RotateDecoratorTemplate}"
Visibility="Collapsed" />
<dr:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll" />
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="RotateDecorator" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I want to get the angle of rectangle which will be changed during rotating and binding it to a textbox in MainWindow. I tried a global variable by creating a new class called bridge implements INotifyPropertyChanged including the real time changed variable by the RotateThumb and bind it to TextBox in MainWindow but it doesn't work, which is also not elegant in my opinion.
Is there any way to get the changing variable in class RotateThumb and bind it to TextBox? Thank you in advance.
RotateDecorator.xaml just provides metaphor to show the Control can be drag to rotate. And below is RotateThumb and I wanna rotateTransform.Angle changed in DragDelta:
public class RotateThumb : Thumb
{
private Point centerPoint;
private Vector startVector;
private double initialAngle;
private Canvas designerCanvas;
private ContentControl designerItem;
private RotateTransform rotateTransform;
public RotateThumb()
{
DragDelta += new DragDeltaEventHandler(RotateThumb_DragDelta);
DragStarted += new DragStartedEventHandler(RotateThumb_DragStarted);
}
private void RotateThumb_DragStarted(object sender, DragStartedEventArgs e)
{
this.designerItem = DataContext as ContentControl;
if (this.designerItem != null)
{
this.designerCanvas = VisualTreeHelper.GetParent(designerItem) as Canvas;
if (this.designerCanvas != null)
{
this.centerPoint = this.designerItem.TranslatePoint(new Point(this.designerItem.Width * this.designerItem.RenderTransformOrigin.X, this.designerItem.Height * this.designerItem.RenderTransformOrigin.Y), this.designerCanvas);
Point startPoint = Mouse.GetPosition(this.designerCanvas);
this.startVector = Point.Subtract(startPoint, this.centerPoint);
this.rotateTransform = this.designerItem.RenderTransform as RotateTransform;
if (this.rotateTransform == null)
{
this.designerItem.RenderTransform = new RotateTransform(0);
this.initialAngle = 0;
}
else
this.initialAngle = this.rotateTransform.Angle;
}
}
}
void RotateThumb_DragDelta(object sender, DragDeltaEventArgs e)
{
if (this.designerItem != null && this.designerCanvas != null)
{
Point current = Mouse.GetPosition(this.designerCanvas);
Vector deltaVector = Point.Subtract(current, this.centerPoint);
double angle = Vector.AngleBetween(this.startVector, deltaVector);
RotateTransform rotateTransform = this.designerItem.RenderTransform as RotateTransform;
rotateTransform.Angle = this.initialAngle + Math.Round(angle, 0);
this.designerItem.InvalidateMeasure();
}
}
}
And below is the Bridge, 'cause I don't how to angle in RotateThumb, so I create "bridge" and hope MainWindow.Textbox's context can be bind to it:
public class Bridge : INotifyPropertyChanged
{
private string angletext;
public string Angle
{
get { return angletext; }
set
{
if (value != angletext)
{
angletext = value;
Console.WriteLine(angletext);
OnPropertyChanged(new PropertyChangedEventArgs("Angle"));
}
}
}
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
{
PropertyChanged(this, e);
}
}
public event PropertyChangedEventHandler PropertyChanged;
public static Bridge bridge = new Bridge();

Answer 1

Your's is one of those cases where a normal binding is somewhat useless.
In the RotateThumb class, I'd expose a custom tailored RoutedCommand which fires a command carrying the current angle on every thumb change. Since the RoutedCommand bubbles up the visual tree, it's quite easy to catch the incoming notifications in the Window.
The only (relative) problem is to get notified as soon the visual tree is completely built. Since there's no (supposed) thumb value's change, the owning window won't be notified. However, you may assume that the initial (default) thumb value is known by the window.
Hope it helps.