具有自定义数据模板的水平 ListView

Question

我正在开发一个小型 WPF 应用程序，我正在使用 CaliburnMicro 和 MaterialDesign（Flipper Card...为什么？因为我喜欢它）来实现高调的 UI 和灵活性。我有一个问题，我想在列表视图中使用自定义数据模板并以水平方式显示联系人列表。除此之外，我的数据没有填充到我在数据模板中使用的设计中。请浏览代码以获取更详细的问题定义。这是现有设计的屏幕截图

基本上我希望它水平放置，以便每个联系人都可以在另一个联系人旁边看到。

提前谢谢你，如果某处代码错误请指导，我是WPF中的小NOOB。

以下是型号代码

public class Person
{
    private string _firstName;
    private string _lastName;
    private string _fullName;

    public string Fullname
    {
        get { return _fullName; }
        set
        {
            _fullName = _firstName + _lastName;
        }
    }


    public string LastName
        {
            get { return _lastName; }
            set { _lastName = value; }
        }
    public string FirstName
    {
            get { return _firstName; }
            set { _firstName = value; }
        }

ViewModel 代码：

public class HomeViewModel : Screen
{
    private Person _person;
    private List<Person> _myContacts = new List<Person>();

    public List<Person> MyContacts
    {
        get { return _myContacts; }
        set
        {
            _myContacts = value;
            //NotifyOfPropertyChange(() => MyContacts);
        }
    }
    public Person Person
    {
        get { return _person; }
        set
        {
            _person = value;
            NotifyOfPropertyChange(() => Person);
        }
    }

    public HomeViewModel()
    {
        MyContacts.Add(new Person { FirstName = "Tony", LastName = "Stark" });
        MyContacts.Add(new Person { FirstName = "Bruce", LastName = "Banner" });
    }}

XAML 代码：

<ListView Grid.Column="0" Grid.Row="2" x:Name="MyContacts">
        <ListView.ItemTemplate>
            <DataTemplate>
                <materialDesign:Flipper Style="{StaticResource MaterialDesignCardFlipper}">
                    <materialDesign:Flipper.FrontContent>
                        <Grid Height="256" Width="200">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="160" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <materialDesign:ColorZone Mode="PrimaryLight" VerticalAlignment="Stretch">
                                <materialDesign:PackIcon Kind="AccountCircle" Height="128" Width="128"
                                             VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </materialDesign:ColorZone>
                            <StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <TextBlock x:Name="Person_FullName"/>
                                <Button Style="{StaticResource MaterialDesignFlatButton}"
                            Command="{x:Static materialDesign:Flipper.FlipCommand}"
                            Margin="0 4 0 0"
                            >EDIT</Button>
                            </StackPanel>
                        </Grid>
                    </materialDesign:Flipper.FrontContent>
                    <materialDesign:Flipper.BackContent>
                        <Grid Height="256" Width="200">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <materialDesign:ColorZone Mode="Accent" Padding="6">
                                <StackPanel Orientation="Horizontal">
                                    <Button Style="{StaticResource MaterialDesignToolForegroundButton}"
                            Command="{x:Static materialDesign:Flipper.FlipCommand}"
                            HorizontalAlignment="Left">
                                        <materialDesign:PackIcon Kind="ArrowLeft" HorizontalAlignment="Right" />
                                    </Button>
                                    <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">EDIT USER</TextBlock>
                                </StackPanel>
                            </materialDesign:ColorZone>
                            <Grid Grid.Row="1" Margin="0 6 0 0" HorizontalAlignment="Center" VerticalAlignment="Top"
                      Width="172">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <TextBox materialDesign:HintAssist.Hint="First name" materialDesign:HintAssist.IsFloating="True"
                             Margin="0 12 0 0" x:Name="Person_FirstName"/>
                                <TextBox Grid.Row="1" materialDesign:HintAssist.Hint="Last name" materialDesign:HintAssist.IsFloating="True"
                             Margin="0 12 0 0" x:Name="Person_LastName"/>

                                <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0 12 0 0" HorizontalAlignment="Right">
                                    <TextBlock VerticalAlignment="Center">Email Contact</TextBlock>
                                    <ToggleButton Margin="8 0 0 0"></ToggleButton>
                                </StackPanel>
                                <StackPanel Grid.Row="3" Orientation="Horizontal" Margin="0 12 0 0" HorizontalAlignment="Right">
                                    <TextBlock VerticalAlignment="Center">Telephone Contact</TextBlock>
                                    <ToggleButton Margin="8 0 0 0"></ToggleButton>
                                </StackPanel>
                            </Grid>
                        </Grid>
                    </materialDesign:Flipper.BackContent>
                </materialDesign:Flipper>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

@user1672994 请查看此屏幕截图

Answer 1

将 ListView 的 ItemsPanel 设置为水平 StackPanel。像这样：

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal"></StackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

这将显示所有项目Horizontally。