wpflayouttransformcardskew

Make product card control in WPF

I'm trying to reproduce these product cards in WPF.

This is the result I want to get:
enter image description here

I have managed to create the card but I have problems when trying to skew the rectangle that is on the card, this is my code:

<Border
    Width="198"
    Height="268"
    Margin="389,134,0,0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Background="#FFCCCCCC"
    BorderThickness="1,1,1,1"
    CornerRadius="12,12,12,12">
    <Grid>
        <Grid Margin="44,-15,-58,81" RenderTransformOrigin="0.5,0.5">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="199" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="-1" ScaleY="-1" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=myBorder}" />
            </Grid.OpacityMask>
            <Border
                x:Name="myBorder"
                Grid.Row="1"
                Width="129"
                Height="236"
                Margin="67,0,0,-92"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Background="#FFF7542E"
                BorderBrush="#FFF7542E"
                BorderThickness="2"
                CornerRadius="0,12,12,12"
                RenderTransformOrigin="1,1">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1.061" ScaleY="0.992" />
                        <SkewTransform AngleX="7.578" AngleY="19.685" />
                        <RotateTransform Angle="5.876" />
                        <TranslateTransform X="0" Y="-24.4097" />
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </Grid>
    </Grid>
</Border>

And this is the result:

This is what I get with my code:
enter image description here

Solution

  • Since the top and bottom sides of the whole Border are not parallel to each other, it will not be possible to do this with just a one Border.
    It will also be more optimal to place all elements in Canvas.
    Here is an example of my implementation consisting of a Canvas and three child Borders.

        <Canvas Width="200" Height="400"
            VerticalAlignment="Center" HorizontalAlignment="Center">
        <Border CornerRadius="12,12,12,12"
                Height="300" Width="200" Background="#FFCCCCCC"
                Canvas.Top="100">
        </Border>
        <Border CornerRadius="12,12,0,12"
                Background="#FFF7542E"
                Width="130" Height="150"
                Canvas.Left="70">
            <Border.RenderTransform>
                <SkewTransform AngleX="0" AngleY="20"/>
            </Border.RenderTransform>
        </Border>
        <Border CornerRadius="12,12,0,12"
                Background="#FFF7542E"
                Width="130" Height="150"
                Canvas.Left="70"
                Canvas.Top="50">
            <Border.RenderTransform>
                <SkewTransform AngleX="0" AngleY="45"/>
            </Border.RenderTransform>
        </Border>
    </Canvas>

    enter image description here

    P.S. But I would rather create a brush for the Background using Geometry and Drawing.