Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sample page for LayoutTransformControl #1917

Merged
merged 8 commits into from
Apr 23, 2018
Merged

Add sample page for LayoutTransformControl #1917

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
967be92
docs(LayoutTransformControl): add sample page for the control
Odonno Mar 22, 2018
516ae95
docs(LayoutTransformControl): add border in example & image for the s…
Odonno Mar 23, 2018
505f92d
docs(LayoutTransformControl): reduce image size
Odonno Mar 23, 2018
a46a25d
docs(LayoutTransformControl): add markdown documentation
Odonno Mar 24, 2018
44dc31e
docs(LayoutTransformControl): improve markdown documentation
Odonno Apr 22, 2018
e660de8
merge
Odonno Apr 22, 2018
1572aba
refactor(LayoutTransformGroup): simplify example page
Odonno Apr 22, 2018
9b4e59f
docs(LayoutTransformGroup): add links to list of possible transformat…
Odonno Apr 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,7 @@
<Content Include="SamplePages\RadialGradientBrush\RadialGradientBrushXaml.bind">
<SubType>Designer</SubType>
</Content>
<Content Include="SamplePages\LayoutTransformControl\LayoutTransformControlXaml.bind" />
</ItemGroup>
<ItemGroup>
<Compile Include="App.xaml.cs">
Expand Down Expand Up @@ -575,6 +576,9 @@
<Compile Include="SamplePages\InAppNotification\InAppNotificationPage.xaml.cs">
<DependentUpon>InAppNotificationPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\LayoutTransformControl\LayoutTransformControlPage.xaml.cs">
<DependentUpon>LayoutTransformControlPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\ListViewExtensions\ListViewExtensionsPage.xaml.cs">
<DependentUpon>ListViewExtensionsPage.xaml</DependentUpon>
</Compile>
Expand Down Expand Up @@ -926,6 +930,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="SamplePages\LayoutTransformControl\LayoutTransformControlPage.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="SamplePages\MarkdownParser\MarkdownParserPage.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down
30 changes: 30 additions & 0 deletions ....Toolkit.Uwp.SampleApp/SamplePages/LayoutTransformControl/LayoutTransformControlPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<Page
x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.LayoutTransformControlPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<controls:LayoutTransformControl Background="{StaticResource Brush-Grey-01}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<controls:LayoutTransformControl.Transform>
<TransformGroup>
<RotateTransform Angle="{Binding Path=Angle.Value, Mode=TwoWay}" />
<ScaleTransform ScaleX="{Binding Path=ScaleX.Value, Mode=TwoWay}"
ScaleY="{Binding Path=ScaleY.Value, Mode=TwoWay}" />
<SkewTransform AngleX="{Binding Path=SkewX.Value, Mode=TwoWay}"
AngleY="{Binding Path=SkewY.Value, Mode=TwoWay}" />
</TransformGroup>
</controls:LayoutTransformControl.Transform>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
<TextBlock Foreground="White" Text="This is a test message." />
</Grid>
</controls:LayoutTransformControl>
</Grid>
</Page>
30 changes: 30 additions & 0 deletions ...olkit.Uwp.SampleApp/SamplePages/LayoutTransformControl/LayoutTransformControlPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// ******************************************************************
// Copyright (c) Microsoft. All rights reserved.
// This code is licensed under the MIT License (MIT).
// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
// ******************************************************************

using Windows.UI.Xaml.Controls;

namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
{
/// <summary>
/// A page that shows how to use the LayoutTransformControl control.
/// </summary>
public sealed partial class LayoutTransformControlPage : Page
{
/// <summary>
/// Initializes a new instance of the <see cref="LayoutTransformControlPage"/> class.
/// </summary>
public LayoutTransformControlPage()
{
InitializeComponent();
}
}
}
29 changes: 29 additions & 0 deletions ....Toolkit.Uwp.SampleApp/SamplePages/LayoutTransformControl/LayoutTransformControlXaml.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<controls:LayoutTransformControl Background="{StaticResource Brush-Grey-01}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<controls:LayoutTransformControl.Transform>
<TransformGroup>
<RotateTransform Angle="@[Angle:DoubleSlider:0:-180.0-180.0]" />
<ScaleTransform ScaleX="@[ScaleX:DoubleSlider:1:0.0-5.0]"
ScaleY="@[ScaleY:DoubleSlider:1:0.0-5.0]" />
<SkewTransform AngleX="@[SkewX:DoubleSlider:0:-180.0-180.0]"
AngleY="@[SkewY:DoubleSlider:0:-180.0-180.0]" />
</TransformGroup>
</controls:LayoutTransformControl.Transform>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

image

    <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:

image

Would this be a bug somewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Contributor Author

@Odonno Odonno Mar 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@xyzzer may have an idea.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
<TextBlock Foreground="White" Text="This is a test message." />
</Grid>
</controls:LayoutTransformControl>
</Grid>
</Page>
8 changes: 8 additions & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,14 @@
"XamlCodeFile": "StaggeredPanel.bind",
"Icon": "/SamplePages/StaggeredPanel/StaggeredPanel.png",
"DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/docs/controls/StaggeredPanel.md"
},
{
"Name": "LayoutTransformControl",
"Type": "LayoutTransformControlPage",
"About": "Control that implements support for transformations as if applied by LayoutTransform.",
"CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/LayoutTransformControl",
"XamlCodeFile": "LayoutTransformControlXaml.bind",
"Icon": "/SamplePages/LayoutTransformControl/LayoutTransformControl.png"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon missing from PR?

}
]
},
Expand Down