在WPF中进行产品卡片控制

Question

我正在尝试在 WPF 中重现这些产品卡。

这就是我想要得到的结果：

我已成功创建卡片，但在尝试倾斜卡片上的矩形时遇到问题，这是我的代码：

<Border CornerRadius="12,12,12,12" HorizontalAlignment="Left" Height="268" Margin="389,134,0,0" VerticalAlignment="Top" Width="198" Background="#FFCCCCCC" BorderThickness="1,1,1,1">
            <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" CornerRadius="0,12,12,12" Background="#FFF7542E" BorderBrush="#FFF7542E" BorderThickness="2" Margin="67,0,0,-92" RenderTransformOrigin="1,1" HorizontalAlignment="Left" Width="129" Grid.Row="1" Height="236" VerticalAlignment="Bottom">                        <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>

这就是结果：

这是我通过代码得到的：

Answer 1

由于整个 Border 的顶部和底部彼此不平行，因此仅用一个 Border 无法做到这一点。
将所有元素放置在 Canvas 中也会更加优化。
这是我的实现示例，由一个画布和三个子边框组成。

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

Answer 2

对于此类工作，您可以使用 Blend for Visual Studio。它将允许您手动调整红色边框的变换

这里是 Blend 概述页面的链接 https://learn.microsoft.com/en-us/visualstudio/xaml-tools/creating-a-ui-by-using-blend-for-visual-studio?view=vs- 2022