在购物车图标上定位商品计数圆圈

Question

我正在尝试将商品计数圆圈放置在购物车图标上。当我设置边距来调整项目圆圈时，它会开箱即用。见下图：

这是上述问题陈述中带有商品计数圆圈的购物车图标的代码：

<StackPanel HorizontalAlignment="Left" Margin="-35 0 0 0" Cursor="Hand" >
    <Border Background="White" Width="10" Height="10" CornerRadius="5" HorizontalAlignment="Left"
            Margin="0 -10 0 0">
        <TextBlock HorizontalAlignment="Center" Text="0" TextAlignment="Center" VerticalAlignment="Center"
FontSize="7" Foreground="#772EA4" />
    </Border>
    <Image HorizontalAlignment="Left" Width="35" Height="35">
        <Image.Source>
            <BitmapImage UriSource="/KioskHive;component/Resources/Images/shopping-cart.png" />
        </Image.Source>
    </Image>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Margin="45,-30,-35,0" Text="Checkout" />
</StackPanel>

这是我正在尝试的完整

Button

代码：

<Button Grid.Column="1" x:Name="btnCheckout" Foreground="White" Width="180" Height="50" 
Background="#772EA4" FontSize="18.7" BorderThickness="0" Margin="11,0,0,0" FlowDirection="LeftToRight" HorizontalAlignment="Left"
Style="{StaticResource PoppinsFont}" Click="CheckoutButton_Click">
     <StackPanel HorizontalAlignment="Left" Margin="-35 0 0 0" Cursor="Hand" >
        <Border Background="White" Width="10" Height="10" CornerRadius="5" HorizontalAlignment="Left"
                Margin="0 -10 0 0">
            <TextBlock HorizontalAlignment="Center" Text="0" TextAlignment="Center" VerticalAlignment="Center"
FontSize="7" Foreground="#772EA4" />
        </Border>
        <Image HorizontalAlignment="Left" Width="35" Height="35">
            <Image.Source>
                <BitmapImage UriSource="/KioskHive;component/Resources/Images/shopping-cart.png" />
            </Image.Source>
        </Image>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Margin="45,-30,-35,0" Text="Checkout" />
    </StackPanel>
    <Button.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="25"/>
        </Style>
    </Button.Resources>
</Button>

如何定位/调整边距

Margin="0 -10 0 0"

以将项目计数准确地放在购物车图标上？像这样：

先感谢您的回答和建议！

Answer 1

保证金有以下设置：

Margin = "left-margin top-margin right-margin bottom-margin"

在您的情况下，Margin =“0 -10 0 0”可以通过更改

Margin="20 -10 0 -8"

20 会将文章计数的白色边框向右移动 20px， -8 会将其移动 8px 到底部而不影响其他控件

这里的数字20和-8只是为了呈现所需的效果，您应该更改它们，以便您的按钮看起来像您想要的。