CODEWITHSUNDEEP
c#wpflistboxgriditemtemplate
riciloma
riciloma

Reputation: 1866

WPF Image inside Grid won't align

I have a Listbox with this format

<ListBox x:Name="lbAlbumSelect"
                             ScrollViewer.VerticalScrollBarVisibility="Auto"
                             ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                            <DataTemplate>
                       <Button Click="lbAlbumSelect_OnSelectionChanged">
                                   <Button.Content>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="2*"  />
                                            </Grid.ColumnDefinitions>
                                             <Image Grid.Column="0" 
                                                               Source="{Binding album_img_src}"
                                                               HorizontalAlignment="Left"/>
                                                        <TextBlock Grid.Column="1" 
                                                                   TextWrapping="Wrap" 
                                                                   TextAlignment="Right"
                                                                   HorizontalAlignment="Right"
                                                                   Margin="2,0,0,0"
                                                                   Text="{Binding album_name}" />
                                    </Grid>
                                   </Button.Content>
                     </Button>

                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

And It shows data like this

Uncorrect display

But I want to show data like this

Correct display

Without HorizontalContentAlignment set to Stretch, the ListBoxItems wouldn't occupy all the Width of the Parent Control, so I can't remove it. But why Horizontal Alignment=Left in Image doesn't work? Is it overridden or something?

Upvotes: 0

Views: 954

Answers (2)

masterpiece
masterpiece

Reputation: 5

That's right. Inside DataTemplate never set event handler as it may not work properly. I've reviewed your code, if you want to achieve that desired result you need specify width and height of image. Try this, I refactored your code

<ListBox x:Name="lbAlbumSelect"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border Margin="2">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="*"  />
                        </Grid.ColumnDefinitions>
                        <Image  Source="{Binding album_img_src}"
                                Margin="4"
                               Height="75"
                               Width="75"/>
                        <TextBlock Grid.Column="1" 
                               TextWrapping="Wrap" 
                               Margin="4"
                               Text="{Binding album_name}" 
                                   TextAlignment="Justify"/>
                    </Grid>
                </Border>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Let me know if I correctly answered your question.

Upvotes: 0

Clemens
Clemens

Reputation: 128157

You don't need a Button in the ItemTemplate to trigger a SelectionChanged event. Attach a handler for the ListBox's SelectedChanged event instead:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         SelectionChanged="lbAlbumSelect_SelectionChanged">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding album_img_src}"/>
                <TextBlock Grid.Column="1" TextAlignment="Center"
                           Text="{Binding album_name}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The event handler method gets a SelectionChangedEventArgs parameter, which can be used to determine in which way the selection has changed:

private void lbAlbumSelect_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

}

Please note also that there are widely accepted naming convention in the .NET world, where you would use CamelCase for property names. So your view model properties should be AlbumName and AlbumImgSrc (or better AlbumImageSource).

Upvotes: 3

Related Questions