Question

I’ve been working a bit with an image editor in Silverlight for the past week or so. It’s my first encounter with it and I still haven’t fully gotten my head around data bindings and datacontext or mvvm. I have a rotation method and I want to be able to pass the angle value from a text box on my MainPage.xaml to the method.I have an initial value set of 90 and my function rotates the image 90 degrees when I click it. The textbox is empty at runtime and also is clearly not updating my rotation angle.

MainPage.xaml

<Grid DataContext="{Binding Path=Project}" Height="70" Name="grid1" Width="200">
   <Grid.RowDefinitions>
      <RowDefinition Height="35" />
      <RowDefinition Height="35" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="84*" />
      <ColumnDefinition Width="57*" />
      <ColumnDefinition Width="59*" /> 
   </Grid.ColumnDefinitions>

<Button Command="{Binding Path=RotateCWElementCommand}"
      Height="30" Name="btnRotCW" Width="30" Grid.Column="2" Margin="15,0,14,5" Grid.Row="1">
<Image Source="../Assets/Images/Icons/object-rotate-right.png" Grid.Column="1"
      Grid.Row="4" Height="20" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="20" />
</Button>

<TextBlock FontWeight="Bold" HorizontalAlignment="Left" Margin="10,10,0,8" Text="Rotate" VerticalAlignment="Center" />
<TextBlock FontWeight="Bold" HorizontalAlignment="Left" Margin="34,9,0,10" Text="Angle:" VerticalAlignment="Center" Grid.Row="1" />
<TextBox Text="{Binding Path=RotateElement.Angle, Mode=TwoWay}" Height="24" Name="textBox1" Width="52" Grid.Column="1" Margin="0,6,5,5" Grid.Row="1" />
</Grid>

(Relevant code from)
Project.cs-

namespace ImageEditor.Client.BLL
{
public class Project : INotifyPropertyChanged
{

            #region Properties
            private RotateTransform rotateElement;
      public RotateTransform RotateElement
      {
        get { return rotateElement; }
        set
        {
            rotateElement = value;
            NotifyPropertyChanged("RotateElement");

        }
    }

        #endregion
    #region Methods


    private void RotateCWElement(object param)
    {
        FrameworkElement element = this.SelectedElement;
        RotateTransform RotateElement = new RotateTransform();

        RotateElement.Angle = 90;
        RotateElement.CenterX = element.ActualWidth * 0.5;
        RotateElement.CenterY = element.ActualHeight * 0.5;
        element.RenderTransform = RotateElement;


    }

What am I doing wrong here? Is it my datacontext or my binding path that is the problem? What should they be? Formatting is a little off sorry

Answer 1

the UI does not know that a property in your object has changed, since you only notify when your object changes, but not the properties in it:

 private void RotateCWElement(object param) 
 { 
        FrameworkElement element = this.SelectedElement; 
        if (this.RotateElement == null) this.RotateElement = new RotateTransform(); 

        RotateElement.Angle = 90; 
        RotateElement.CenterX = element.ActualWidth * 0.5; 
        RotateElement.CenterY = element.ActualHeight * 0.5; 
        element.RenderTransform = RotateElement; 

        //tell the UI that this property has changed
        NotifyPropertyChanged("RotateElement"); 
 }