列表框和ItemContainerStyle的错误

Question

I have a simple Listbox

<ListBox Name="GenreListBox" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource ListBoxItemGenreStyle}"          SelectionChanged="GenreListBox_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
  <ListBox.ItemTemplate>
     <DataTemplate >
         <Grid Height="115" Background="Transparent"/>
     </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

and ItemContainerStyle(without VisualStates), for example:

 <Style x:Key="ListBoxItemGenreStyle" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid x:Name="border">
                            <Image Name="img" Source="{Binding picUrl}" DataContext="{TemplateBinding DataContext}" Width="65" Height="65" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30,0,0,0" Opacity="0" ImageOpened="Image_ImageOpened"/>
                            <TextBlock Name="title" Text="{Binding title}" DataContext="{TemplateBinding DataContext}" Foreground="Black" FontFamily="Segoe WP SemiLight" FontSize="36" VerticalAlignment="Top" Margin="111,14,0,0"/>
                            <TextBlock Name="artist" Text="{Binding artist}" DataContext="{TemplateBinding DataContext}" Foreground="{StaticResource RedBrush}" FontFamily="Segoe WP" FontSize="21.333" VerticalAlignment="Top" Margin="111,55,0,0"/>
                            <TextBlock Name="price" Text="{Binding price}"  DataContext="{TemplateBinding DataContext}" Foreground="#FF6E6E6E" FontFamily="Segoe WP"   FontSize="20.8" VerticalAlignment="Bottom"  Margin="111,0,0,8" />
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

First 10 items look normal but if I add 10 new items some of them looks like first item, and if I check data in SelectionChanged method data will be normal. What is wrong with my code?

Here is an example of app that you can build and run If I add 10 items and scroll down you will see that last items look like first, then you shold scroll up and then down then all items look normal.

Screenshots

Answer 1

First, I'm not sure about this, but I guess you're binding listbox with ObservableCollection Melodies , so in your container style, you're binding Melodies class's variables correctly. But I didn't get why you're binding DataContext for same variables in custom ItemContainerStyle as you've already binded them ?? {Binding <something>} means Binding {Binding <something>.DataContext}

I mean for these tags :

<Image Name="img" Source="{Binding picUrl}" DataContext="{TemplateBinding DataContext}" Width="65" Height="65" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30,0,0,0" Opacity="0" ImageOpened="Image_ImageOpened"/>
<TextBlock Name="title" Text="{Binding title}" DataContext="{TemplateBinding DataContext}" Foreground="Black" FontFamily="Segoe WP SemiLight" FontSize="36" VerticalAlignment="Top" Margin="111,14,0,0"/>
<TextBlock Name="artist" Text="{Binding artist}" DataContext="{TemplateBinding DataContext}" Foreground="{StaticResource RedBrush}" FontFamily="Segoe WP" FontSize="21.333" VerticalAlignment="Top" Margin="111,55,0,0"/>
<TextBlock Name="price" Text="{Binding price}"  DataContext="{TemplateBinding DataContext}" Foreground="#FF6E6E6E" FontFamily="Segoe WP"   FontSize="20.8" VerticalAlignment="Bottom"  Margin="111,0,0,8" />

So here you're binding their source / data. But again you're binding its DataContext which in turn is a Data . This might be causing problem. So change above to:

<Image Name="img" Source="{Binding picUrl}" Width="65" Height="65" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30,0,0,0" Opacity="0" ImageOpened="Image_ImageOpened"/>
<TextBlock Name="title" Text="{Binding title}" Foreground="Black" FontFamily="Segoe WP SemiLight" FontSize="36" VerticalAlignment="Top" Margin="111,14,0,0"/>
<TextBlock Name="artist" Text="{Binding artist}" Foreground="{StaticResource RedBrush}" FontFamily="Segoe WP" FontSize="21.333" VerticalAlignment="Top" Margin="111,55,0,0"/>
<TextBlock Name="price" Text="{Binding price}"  Foreground="#FF6E6E6E" FontFamily="Segoe WP"   FontSize="20.8" VerticalAlignment="Bottom"  Margin="111,0,0,8" /> 

I mean simply remove DataContext attributes from these tags . Once more, I'm not so sure for this, but just try it & let me know. Including Binding and DataContext both in same tag looked odd to me. I never did this before. I may not be correct. But still you can try this. I hope this will help. Thanks.