wpfxamlcontainers

DockPanel ind ListItem doesn't stretch


I have a ListView, and I want ListItems with an Image Left, than a text and a second text on the rightside. I have tried different think with Grid and DockPanel, but e.g. the DockPanel doesn't fill the whole width.

                <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="45"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Topliste gesamt" FontSize="16" Margin="10"/>
                    <Grid Background="White" Margin="5" Grid.Row="1">
                    <Border BorderBrush="#25202D" BorderThickness="1" Padding="3" VerticalAlignment="Stretch">
                        <Border.Background>
                            <ImageBrush ImageSource="Assets/HHLogoBack.png" Stretch="Uniform" />
                        </Border.Background>
                        <ListView ItemsSource="{Binding TopOverall}" Margin="10" HorizontalAlignment="Stretch">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <DockPanel HorizontalAlignment="Stretch" Background="Beige" LastChildFill="True">
                                        <Image Source="{Binding Avatar}" DockPanel.Dock="Left" Width="30"  HorizontalAlignment="Center"/>
                                        <TextBlock Text="{Binding PlayerObj.Name}" Foreground="Black" Margin="10,0,0,0"/>
                                        <TextBlock Text="{Binding Points}" DockPanel.Dock="Right" Foreground="Black" VerticalAlignment="Center" Margin="10,0,0,0" />
                                    </DockPanel>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Border>
                </Grid>
            </Grid>

Any hints, where I am wrong?


Solution

    1. Set HorizontalContentAlignment (change style for ListBoxItem)
    2. Set HorizontalAlignment to the last TextBlock HorizontalAlignment="Right"

    XAML:

    <ListBox ItemsSource="{Binding Path=TopOverall}" Margin="10" HorizontalAlignment="Stretch">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel HorizontalAlignment="Stretch" Background="Beige" LastChildFill="True">
                    <Image Source="{Binding Avatar}" DockPanel.Dock="Left" Width="30"  HorizontalAlignment="Center"/>
                    <TextBlock Text="{Binding PlayerObj.Name}" Foreground="Black" Margin="10,0,0,0"/>
                    <TextBlock Text="{Binding Points}" DockPanel.Dock="Right" Foreground="Black" VerticalAlignment="Center" Margin="10,0,0,0"
                                                        HorizontalAlignment="Right"/>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
    

    Output:

    ListView with ListItems

    Hope it helps.