在WPF中制作产品卡片控件

rwqw0loc 于 11个月前发布在其他

关注(0)|答案(1)|浏览(188)

我试图在WPF中复制这些产品卡。
这就是我想要的结果：

的数据
我已经设法创建卡，但我有问题时，试图歪斜的矩形是在卡上，这是我的代码：

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

字符串
结果是这样的：
这就是我的代码：

的

wpf

来源：https://stackoverflow.com/questions/77428920/make-product-card-control-in-wpf

1条答案

按热度按时间

bqujaahr1#

由于整个边界的顶部和底部并不平行，因此仅使用一个边界是不可能做到这一点的。
将所有元素放置在Canvas中也会更理想。
下面是我的实现的一个例子，由一个Canvas和三个子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.**但我宁愿使用几何和绘图为背景创建一个笔刷。

赞(0）回复(0）举报 12个月前

我来回答

在WPF中制作产品卡片控件

1条答案

相关问题

热门标签

最新问答