ListBox with DockPanel Alignment

Question

I have a listbox in which I pass 5 items in each row. Xml file:

<ListBox x:Name="DatabaseBox">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
    <DataTemplate>
            <DockPanel">
                <Image x:Name="ToggleFavoriteImage" Width="15" Height="15" Tag="{Binding Tag}" Source="{Binding ImageSource}" MouseLeftButtonDown="ToggleFavoriteImage_MouseLeftButtonDown"/>
                <TextBlock x:Name="ListBoxSName" Width="220" Text="{Binding Name}" Margin="30,0,0,0" FontSize="11" MouseLeftButtonDown="ListBoxSName_MouseLeftButtonDown"/>
                <Button x:Name="ListBoxSCoyntry" Height="17" Content="{Binding City}" FontSize="11" Click="ListBoxSCity_Click"/>
                <Button x:Name="ListBoxSCity"  Height="17" Content="{Binding Genre}" FontSize="11" Click="ListBoxSGenre_Click"/>
                <Button x:Name="ListBoxSGenre" Height="17" Content="{Binding Country}" FontSize="11" Click="ListBoxSCountry_Click"/>
            </DockPanel>
    </DataTemplate>
</ListBox.ItemTemplate>
    
</ListBox>

What I want to do is have Image and TextBlock docked Left, and all the others Docked right side by side. I tried DockPanel.Dock ="Rigth" for all the Buttons but things get very messed up.

Anyone with an idea?

Answer 1

Wrap each visual group in a stack panel and apply the docking to the stackpanel, like so:

<DockPanel>
    <StackPanel DockPanel.Dock="Left">
         <Image x:Name="ToggleFavoriteImage" Width="15" Height="15" Tag="{Binding Tag}" Source="{Binding ImageSource}" MouseLeftButtonDown="ToggleFavoriteImage_MouseLeftButtonDown"/>
         <TextBlock x:Name="ListBoxSName" Width="220" Text="{Binding Name}" Margin="30,0,0,0" FontSize="11" MouseLeftButtonDown="ListBoxSName_MouseLeftButtonDown"/>
    </StackPanel>
    <StackPanel DockPanel.Dock="Right">
         <Button x:Name="ListBoxSCoyntry" Height="17" Content="{Binding City}" FontSize="11" Click="ListBoxSCity_Click"/>
         <Button x:Name="ListBoxSCity"  Height="17" Content="{Binding Genre}" FontSize="11" Click="ListBoxSGenre_Click"/>
         <Button x:Name="ListBoxSGenre" Height="17" Content="{Binding Country}" FontSize="11" Click="ListBoxSCountry_Click"/>
    </StackPanel>
</DockPanel>

Answer 2

Use a Grid, DockPanel is not a good control. Also Grids have size-sharing, which is often useful for items controls.