locked
Binding to Skew... RRS feed

  • Question

  • I was able to bind one image's ScaleX property using ... ScaleX="{Binding RenderTransform.Value.M11, ElementName=image1}"

    but for the life of me I can't figure out how to bind to SkewX.

    Any help would be appreciated.

    Obviously Value.M11 is ScaleX.  I'm guessing Value.M12 is ScaleY.  What are M21 and M22 for?  Is there a "Microsoft can't use simple descriptions" guide for someone like me someplace?

    ~Christine


    Wednesday, December 28, 2011 10:42 PM

Answers

  • This answer is for WPF, based on the fact that you are using .Value on Transform, if you are using SL, it would be similar, but instead of a TransformGroup it would be a CompositeTransform.

    I believe that once you get skew involved, the values in the transform matrix no longer line up nicely to scale and rotation. The .Value property returns the entire transform in matrix form, so it can be used to multiple with points/vectors to transform them. Probably more info than you want, but here it a link anyway:

    http://en.wikipedia.org/wiki/Transformation_matrix

    The matrix stuff is where the names M11, M12, M21 and M22 come from, they are the entries in the transform matrix.

    I think the RenderTransform property is of type Transform inherited from UIElement, but the actual transform is probably a TransformGroup. I think if I wanted to do this I would use a value converter to cast and find the value you want. Something like what is below.

    The binding would change to just be RenderTransform, but also have the converter specified.

     

     public class TransformConverter : System.Windows.Data.IValueConverter
        {
    
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                System.Windows.Media.TransformGroup tg = value as System.Windows.Media.TransformGroup;
                if (tg != null)
                {
                    foreach (var skewTransform in tg.Children.OfType<System.Windows.Media.SkewTransform>())
                    {
                        return skewTransform.AngleX;
                    }
    
                }
    
                return value;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    


    Wednesday, December 28, 2011 11:39 PM
    Moderator

All replies

  • This answer is for WPF, based on the fact that you are using .Value on Transform, if you are using SL, it would be similar, but instead of a TransformGroup it would be a CompositeTransform.

    I believe that once you get skew involved, the values in the transform matrix no longer line up nicely to scale and rotation. The .Value property returns the entire transform in matrix form, so it can be used to multiple with points/vectors to transform them. Probably more info than you want, but here it a link anyway:

    http://en.wikipedia.org/wiki/Transformation_matrix

    The matrix stuff is where the names M11, M12, M21 and M22 come from, they are the entries in the transform matrix.

    I think the RenderTransform property is of type Transform inherited from UIElement, but the actual transform is probably a TransformGroup. I think if I wanted to do this I would use a value converter to cast and find the value you want. Something like what is below.

    The binding would change to just be RenderTransform, but also have the converter specified.

     

     public class TransformConverter : System.Windows.Data.IValueConverter
        {
    
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                System.Windows.Media.TransformGroup tg = value as System.Windows.Media.TransformGroup;
                if (tg != null)
                {
                    foreach (var skewTransform in tg.Children.OfType<System.Windows.Media.SkewTransform>())
                    {
                        return skewTransform.AngleX;
                    }
    
                }
    
                return value;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    


    Wednesday, December 28, 2011 11:39 PM
    Moderator
  • Uh... Huh...  I'm like a doe caught in headlights at the moment.  None of this makes sence to me.  Blend lets me put a number in to skew something... I should be able to use my handy lil tiny boxes and bind easily to that number. :)

    I found these charts...

     

     

     

    Which makes me think you need to bind to 4 points for it to work  ... M12, M21, OX and OY?  Is that right?

     

    Anyways, thank you for the well thought out answer.  :)  I'm sure I'll understand it some day.

    ~Christine

    Wednesday, December 28, 2011 11:54 PM
  • Matrix math is a tricky topic. The problem is that the values you want are "lost" when you use anything more than a Skew because the matrices are multiplied together to form the final matrix given by .Value. However, using a converter like I showed you can pull out all of the original values. Happy to help further if you need it.
    Wednesday, December 28, 2011 11:57 PM
    Moderator
  • This is just a play/learning project for me anyways.  I mess around with this stuff so I can eventually feel confident enough to use them in my business apps. 

    And you've helped a bunch... the converter's I can do thanks to past help you've give me. :)

    Thank you for your time and Happy New Year.

    ~Christine


    You're a Star!!!  It works.

    I had to add "using System.Linq" and used the following XAML...

    <SkewTransform AngleX="{Binding RenderTransform, Converter={StaticResource TransformConverter}, ElementName=image}"/>

     

    Thanks a bunch!

    Christine

     

    Thursday, December 29, 2011 12:02 AM