Add sample page for LayoutTransformControl

[Odonno]

Issue: #1817

PR Type

• Sample app changes

What is the current behavior?

No sample page for the LayoutTransformControl.

What is the new behavior?

A sample page for the LayoutTransformControl.

Other information

I added the sample page with supported Transform operations (Rotate, Scale, Skew).

I still need to add an image.

@nmetulev I also noticed there is no Markdown documentation for it. I think we should do it. Maybe another PR?

[skendrot]

To show that's it's doing more than just animating the object, surround it with elements like border or rectangle to show how items around it change as well

[michael-hawker]

Think main thing is just missing an icon, but expanded example could be useful. Maybe found a separate bug, not sure, thoughts?

[michael-hawker]

Icon missing from PR?

[michael-hawker]

Agree with @skendrot, could be useful to show more of what it's doing compared to a RenderTransformOrigin.

I did notice that with similar values in Skew though that at some point the layout transform seems to start behaving differently...

    <Grid Background="{StaticResource Brush-Grey-01}" Grid.Row="1"
          HorizontalAlignment="Center" VerticalAlignment="Center"
          RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
          <TransformGroup>
            <RotateTransform Angle="-2.25" />
            <ScaleTransform ScaleX="2.21"
                          ScaleY="2.2" />
            <SkewTransform AngleX="-120"
                           AngleY="180" />
          </TransformGroup>
        </Grid.RenderTransform>
      <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
        <TextBlock Foreground="White" Text="This is a test message." />
      </Grid>
    </Grid>

Compared to when there are less large values:

Would this be a bug somewhere?

[Odonno]

Well. Your example is much more complicated than the code you gave. One thing I can notice is that in your large example, the first rendered grid is correct but not the second one.

[michael-hawker]

@Odonno both images are the same example, only difference is the change in Skew Angles (-20, 20) for the bottom and (-120, 180) for the top. The top rectangle in each image is the Layout Transform and the bottom rectangle is the Render Transform. I just added it into the example as another row of the main grid.

[Odonno]

I have achieved to replicate the second render and here is the configuration I set:

<controls:LayoutTransformControl Background="{StaticResource Brush-Grey-01}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     RenderTransformOrigin="0.5,0.5">
      <controls:LayoutTransformControl.Transform>
        <TransformGroup>
          <RotateTransform Angle="-2.25" />
          <ScaleTransform ScaleX="2.21"
                        ScaleY="2.2" />
          <SkewTransform AngleX="80"
                          AngleY="0" />
        </TransformGroup>
      </controls:LayoutTransformControl.Transform>

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
        <TextBlock Foreground="White" Text="This is a test message." />
      </Grid>
    </controls:LayoutTransformControl>

[Odonno]

@michael-hawker Oh, I see. It is not the same method you used. I suppose that's maybe because the Matrix is not altered in the same order as it is with the default RenderTransform.

[Odonno]

Not sure but changing the +/- values should not be that hard.

@xyzzer may have an idea.

[xyzzer]

Not time to look into it now.
Here's the sample I provided in WRTXT:
https://github.com/xyzzer/WinRTXamlToolkit/blob/master/WinRTXamlToolkit.Sample/Views/Controls/LayoutTransformControlTestView.xaml

[michael-hawker]

I'll take a quick look later and see. Seems like a bug we should fix for 3.0. It'll be a separate issue, so we don't necessarily have to hold up this PR over it.

I'll pull the update later and take a look at the new sample.

[Odonno]

@michael-hawker Should we create an issue for this and/or have you found out the bug?

[michael-hawker]

Sample looks good, I created issue #2006 for the bug about the layout. Think we should port some of the Matrix helper functions and then use those to perform the operation.

[Odonno]

@michael-hawker Yes. Now I have an image. But you will all of my designer work at my best. I think it's really ugly. I hope @nmetulev will contact his designer to make a proper one. :)

And I also a border on the example.

[skendrot]

The image only needs to be 120x80. as is it can be compressed by about 50%.

[nmetulev]

I actually like the icon :)

[nmetulev]

Use an actual color here instead of a resource so it can be easily copy/pasted. Should this background go on the Border below? Do we need to set the HorizontalAlignment and VerticalAlignment on both the LayoutTraformControl and the Border?

[nmetulev]

quick grammar fix here, should be "is a control that applies Matrix transformations"

[nmetulev]

Can we not use Matrix, Composite, or Translation Transform?

[Odonno]

I just checked. Indeed, MatrixTransform and TransformGroup are supported. But TranslationTransform is not handled (no effect) and CompositeTransform is not supported (throw exception).

Should I update the docs with warning for those not supported?

[nmetulev]

Remove en-us from url so the localization works.

[nmetulev]

ping @Odonno

[nmetulev]

Looks good to me. Just make sure to add the links to the transforms in the docs and good to merge

[nmetulev]

Link to the docs for these transforms

[windowstoolkitbot]

This PR is linked to unclosed issues. Please check if one of these issues should be closed: #1817