添加新控件并调整容器大小以适合

Question

I'm working on a Blackjack game for school and I need a container, which will be containing Image controls.

I want to have a container in which Image controls will be created (through code) to house the images for the cards which the player has hit. This can be up to 9 cards when working with a single deck, like I am.

As for my question: What would be the easiest/lowest impact way to create each Image control so that the center across all of the controls are aligned with the center of my "hand" Image controls?

Here's a quick illustration with what I mean:

So basically: If the amount of cards is uneven (1,3,5,7 or 9), the center of the middle card is centered above the hand.

If the amount of cards is even (2,4,6 or 8), the space in between the 2 middle cards is centered above the hand.

Answer 1

I'd do something like this, replacing Rectangles with Images as appropriate:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0"
            HorizontalAlignment="Center"
            Orientation="Horizontal">
        <Rectangle Width="100"
                Height="100"
                Fill="Blue" />
        <Rectangle Width="100"
                Height="100"
                Fill="Green" />
        <Rectangle Width="100"
                Height="100"
                Fill="Blue" />
        <Rectangle Width="100"
                Height="100"
                Fill="Green" />
        <Rectangle Width="100"
                Height="100"
                Fill="Blue" />
        <Rectangle Width="100"
                Height="100"
                Fill="Green" />
        <Rectangle Width="100"
                Height="100"
                Fill="Blue" />
    </StackPanel>
    <StackPanel Grid.Row="1"
                    HorizontalAlignment="Center"
                    Orientation="Horizontal">
            <Rectangle Width="100"
                       Height="100"
                       Fill="Red" />
            <Rectangle Width="100"
                       Height="100"
                       Fill="Black" />
    </StackPanel>
</Grid>

I've manually filled the StackPanels where normally you'd bind their ItemsSource properties to ObservableCollection(s).