网格内的 WPF 图像不会对齐

Question

我有一个这种格式的列表框

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

而且它显示的数据是这样的

但我想显示这样的数据

没有 HorizontalContentAlignment 设置为 Stretch，ListBoxItems 不会占据父控件的所有宽度，所以我无法删除它。但是为什么 Horizontal Alignment=Left in Image 不起作用？它是被覆盖了吗？

Answer 1

您不需要 ItemTemplate 中的 Button 来触发 SelectionChanged 事件。改为附加 ListBox 的 SelectedChanged 事件的处理程序：

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

事件处理程序方法获取一个 SelectionChangedEventArgs 参数，可用于确定选择的更改方式：

private void lbAlbumSelect_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

}

另请注意，在 .NET 世界中有广泛接受的命名约定，您可以将 CamelCase 用于属性名称。所以你的视图模型属性应该是 AlbumName 和 AlbumImgSrc （或者更好 AlbumImageSource）。

Answer 2

没错。在 DataTemplate 内部永远不要设置事件处理程序，因为它可能无法正常工作。我已经查看了您的代码，如果您想获得所需的结果，您需要指定图像的宽度和高度。试试这个，我重构了你的代码

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

如果我正确回答了您的问题，请告诉我。

网格内的 WPF 图像不会对齐

WPF Image inside Grid won't align

c#

wpf

listbox

grid

itemtemplate