WPF: Aligning GRID contents with respect to a bitmap - wpf

Question

I have to display few strings under a bitmap . At a time maximum number of strings that can displayed are 5 and not always all the 5 strings will be displayed. Also the length of the strings vary. Whatever be the case, I want to display these strings in a visually appealing manner under the bitmap. Like, if just one string, I want to position it centrally under the bitmap. If 2 strings, I want to space the strings nicely and center it under the bitmap and so.
I know only at run time the strings to display, number of strings ( min 1 and max 5) to display and also length of string.
I wrote the below XAML code, but I am unable to position the strings nicely for all my conditions. Bitmap1 is a circle, bitmap2 is left arrow and bitmap3 is right arrow.
Can someone help me here?
<Grid x:Name="Graphics" Grid.Column="1" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.319*"/>
<RowDefinition Height="0.56*"/>
<RowDefinition Height="0.321*"/>
</Grid.RowDefinitions>
<Image Height="72" Source="/DataBinding;component/Bitmap1.bmp" Stretch="Fill" Width="108" Grid.Row="1" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.408*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.408*"/>
</Grid.ColumnDefinitions>
<Image x:Name="Next" Height="48" Width="48" Grid.Column="2" Source="/DataBinding;component/Bitmap3.bmp" HorizontalAlignment="Left" />
<Image x:Name="Prev" Width="48" Height="48" Grid.Column="0" Source="/DataBinding;component/Bitmap2.bmp" HorizontalAlignment="Right"/>
<Grid HorizontalAlignment="Center" ShowGridLines="True" Width="Auto" Grid.ColumnSpan="3" Margin="38,69,41,-40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Visibility="Visible" Text="String1" Padding="10" Grid.Column="0" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String2" Padding="10" Grid.Column="1" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String3" Padding="10" Grid.Column="2" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String4" Padding="10" Grid.Column="3" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String5" Padding="10" Grid.Column="4" FontSize="14.667" TextAlignment="Center" Foreground="White" />
</Grid>
</Grid>
</Grid>

Answer 1

What you want to do is create a custom panel by creating a custom control based on panel. Override ArrangeOverride and then place things exactly where you want them as if you have a canvas to work with, because your panel is like a canvas when you override ArrangeOverride. Grids are a custom panel themselves :-)

Answer 2

<StackPanel Name="stack1" Orientation="Horizontal" Width="Auto" Background="Red" >
<TextBlock FontSize="14.667" Width="Auto" TextAlignment="Center">
<Run x:Name="String1" Text="String1" />
<Run x:Name="String2" Text="String2" />
<Run x:Name="String3" Text="String3" />
<Run x:Name="String4" Text="String4" />
<Run x:Name="String5" Text="String5" />
</TextBlock>
</StackPanel>
</Grid>
</Grid>