Question

I have a normal listbox with a custom template to show the items. What I cannot manage is to stretch the template horizontally over the full widtg of the list box.

My problem is, that all of the elements in the main window are put dynamically, and they resize along with the window size changed method. I’ve searched through the net and the idea was to put HorizontalAligment=”Stretch”. This I tried, everywhere possible, with no significant success.

my xaml code goes like this:

<UserControl x:Class="LiveGames.Dealer.UsersList"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         Background="Transparent">
<Border CornerRadius="10" BorderBrush="White" BorderThickness="2" >
     <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="PlayerTemplate">
                <WrapPanel>
                    <Border CornerRadius="10" BorderBrush="White" BorderThickness="2" >
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0.0" x:Name="gradientOne_Name" Color="Red" />
                                <GradientStop Offset="1.0" x:Name="gradientTwo_Name" Color="DarkRed" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <Grid >
                            <Grid.ColumnDefinitions x:Uid="5">
                                <ColumnDefinition  Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Name="RowH" Height="50"/>
                            </Grid.RowDefinitions>

                            <!--  <TextBlock VerticalAlignment="Center" Margin="5" Grid.Column="0" Grid.Row="1" Text="Player: " FontSize="18" />-->
                            <TextBlock VerticalAlignment="Center" Margin="5" Grid.Column="0" Text="{Binding Path=ID}" FontSize="22" FontWeight="Bold"/>
                        </Grid>
                    </Border>
                </WrapPanel>
            </DataTemplate>
        </Grid.Resources>
        <Canvas>
            <ListBox Name="userList" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding}"  ItemTemplate="{StaticResource PlayerTemplate}" HorizontalContentAlignment="Stretch">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem" >
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Canvas>
    </Grid>
</Border>

Does anybody have any idea how to do this, maybe even in the code behind?

M

Answer 1

You can try this:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="Width" Value="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}"></Setter>
</Style>