WPF 做卡片列表

页面效果

代码

<Window x:Class="WpfApp2.ListBox"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="ListBox" Height="450" Width="800" Loaded="ListBox_OnLoaded">
    <Window.Resources>
        <!--GridView Header样式 去除Gridview自带的Header框-->
        <Style TargetType="{x:Type GridViewColumnHeader}" >
            <!--<Setter Property="HorizontalContentAlignment" Value="Center"/>-->
            <Setter Property="Visibility" Value="Hidden"/>
            <Setter Property="Height" Value="0"></Setter>
        </Style>
        <!--ListView 布局样式 使图片可以横向展示-->
        <Style  TargetType="{x:Type ListView}" >
            <Setter Property='ItemsPanel'>
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel  Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource   AncestorType=ScrollContentPresenter}}"></WrapPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--ListView Item样式和点击后样式模板-->
        <ControlTemplate x:Key="ListViewItemTemplate" TargetType="ListBoxItem">
            <Border Name="Border">
                <StackPanel>
                    <GridViewRowPresenter>
                    </GridViewRowPresenter>
                </StackPanel>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="true">
                    <Setter TargetName="Border"  Property="Background" Value="#ffff"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border"  Property="Background" Value="#ffff00"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="Green"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!--ListView Item样式和点击后样式-->
        <Style TargetType="ListViewItem">
            <Setter Property="Template" Value="{StaticResource ListViewItemTemplate}"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"></Setter>
        </Style>

    </Window.Resources>
    <Grid>
        <!-- ListView 中的ScrollViewer.HorizontalScrollBarVisibility="Disabled" 代码的意思是为了让WrapPanel 可以自带换行-->
        <ListView Name="lbList" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListView.View>
                <GridView >
                    <GridView.Columns>
                        <GridViewColumn >
                            <GridViewColumnHeader></GridViewColumnHeader>
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="10 20 0 0" >
                                        <Border Width="112" Height="167" Name="Bor_Movie1" >
                                            <Border.Background>
                                                <ImageBrush ImageSource="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1601785919991&amp;di=5aa5504ee4337c2f857951b6759a5072&amp;imgtype=0&amp;src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3616242789%2C1098670747%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D900%26h%3D1350"></ImageBrush>
                                            </Border.Background>
                                        </Border>
                                        <Label MaxWidth="112"  Margin="0,10,0,0" >
                                            <TextBlock TextWrapping="Wrap" TextAlignment="Center" FontSize="12" FontWeight="Bold" Text="{Binding Name}" Height="27" Width="105"></TextBlock>
                                        </Label>
                                    </StackPanel>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>