WPF image à l'intérieur Grille ne seront pas alignés

Question

J'ai un Listbox avec ce 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> 

et il montre des données comme celui-ci

Mais je veux montrer des données comme celui-ci

Sans HorizontalContentAlignment mis à Stretch, le ListBoxItem s n'occuperait pas toute la largeur de la commande parent, donc je ne peux pas l'enlever. Mais pourquoi Horizontal Alignment=Left dans Image ne fonctionne pas? Est-ce que c'est annulé ou quelque chose?

Answer 1

Vous n'avez pas besoin d'un bouton dans ItemTemplate pour déclencher un événement SelectionChanged. Joindre un gestionnaire pour l'événement SelectedChanged de la zone de liste à la place:

<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> 

La méthode de gestionnaire d'événement est un paramètre SelectionChangedEventArgs, qui peut être utilisé pour déterminer de quelle manière la sélection a changé:

private void lbAlbumSelect_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 

} 

---

Notez également qu'il existe des conventions de dénomination largement acceptées dans le monde .NET, où vous utiliseriez CamelCase pour les noms de propriété. Ainsi, les propriétés de votre modèle de vue doivent être AlbumName et AlbumImgSrc (ou mieux AlbumImageSource).

Answer 2

C'est vrai. Inside DataTemplate ne définit jamais le gestionnaire d'événements, car il risque de ne pas fonctionner correctement. J'ai passé en revue votre code, si vous voulez réaliser ce résultat désiré vous devez spécifier la largeur et la taille de l'image. Essayez, je refactorisé votre 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> 

Laissez-moi savoir si je répondu correctement à votre question.