Positioning item-count circle on shopping-cart icon

I am trying to position item-count circle on the shopping-cart icon. When I set margins to adjust the item circle it goes out of the box. see image below:

enter image description here

Here is the code of shopping-cart icon with item-count circle of above problem-statement:

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

And here is the complete Button code that I am trying:

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

How can I position/adjust the margins Margin="0 -10 0 0" to put item count exactly on the cart icon? Like this:

enter image description here

Thanks in advance for your answers and suggestions!

Solution

Margin has following settings:

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

In your case Margin="0 -10 0 0" could be replaced through

Margin="20 -10 0 -8"

20 would shift your white border with article count 20px to the right and -8 would shift it 8px to the bottom without to affect other controls, at least in your current layout.

The numbers 20 and -8 are here to present the needed effect only, you should change them so that your button looks like you want.