I'm trying to reproduce these product cards in WPF.
This is the result I want to get:
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:
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>
P.S. But I would rather create a brush for the Background using Geometry and Drawing.