CODEWITHSUNDEEP
wpf
CoderForHire
CoderForHire

Reputation: 439

WPF ListBox Item Style - Horizontal Alignment Issue

Here's the list I'm creating

You can see that there's a border around each list item. For some reason, the border does not stretch horizontally.

Here's the ListBox XAML:

    <ListBox Grid.Row="3"
             Grid.Column="0"
             BorderBrush="SteelBlue"
             ItemsSource="{Binding Devices}"
             SelectedItem="{Binding SelectedDevice}"
             MaxWidth="350">

        <ListBox.Resources>
            <Style TargetType="ListBoxItem">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
                </Style.Resources>
            </Style>
        </ListBox.Resources>

        <ListBox.ItemTemplate>
            <DataTemplate>

                <Border HorizontalAlignment="Stretch"
                        BorderBrush="SteelBlue"
                        CornerRadius="3"
                        MinHeight="65"
                        Margin="3">

                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="BorderThickness" Value="0" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="BorderThickness" Value="1" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>

                    <Grid>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Image Grid.Row="0" 
                               Grid.RowSpan="2"
                               Grid.Column="0"
                               Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
                               Height="50"
                               Width="50"
                               Margin="5"/>
                        <TextBlock Grid.Row="0"
                                   Grid.Column="1"
                                   Text="{Binding UnitIdentifier}"
                                   Style="{StaticResource devicetextStyle}"
                                   Margin="2"/>
                        <TextBlock Grid.Row="1"
                                   Grid.Column="1"
                                   Text="{Binding IPAddress}"
                                   Style="{StaticResource devicetextStyle}"
                                   Margin="2"/>

                    </Grid>

                </Border>

            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

I've got the border's HorizontalAlignment set to Stretch.Anyone see what's wrong?

Thanks

Upvotes: 0

Views: 287

Answers (1)

Michal Ciechan
Michal Ciechan

Reputation: 13888

What your looking for is HorizontalContentAlignment="Stretch" on the ListBox

<ListBox Grid.Row="3"
             Grid.Column="0"
             BorderBrush="SteelBlue"
             ItemsSource="{Binding Devices}"
             SelectedItem="{Binding SelectedDevice}"
             HorizontalContentAlignment="Stretch"
             MaxWidth="350">

Upvotes: 1

Related Questions