c# - 带有自定义数据模板的水平 ListView

Question

我正在开发一个小型 WPF 应用程序，我正在使用 CaliburnMicro 和 MaterialDesign(Flipper Card...为什么？因为我喜欢它)以获得高调的 UI 和灵 active 。我有一个问题，我想在 ListView 中使用自定义数据模板并以水平方式显示联系人列表。与此同时，我的数据没有填充到我在数据模板中使用的设计中。请仔细阅读代码以获得更详细的问题定义。这是现有设计的屏幕截图

基本上我想让它水平放置，这样每个联系人都可以在另一个联系人旁边看到。

先谢谢了，如果有什么地方代码不对请指导，我是WPF的小菜鸟。

以下是模型代码

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

View 模型代码:

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>

这将显示所有项目水平。