Горизонтальный ListView с пользовательским шаблоном данных - PullRequest
Новая
       36

Горизонтальный ListView с пользовательским шаблоном данных

0 голосов
/ 20 мая 2018

Я работаю над одним небольшим приложением WPF и использую CaliburnMicro и MaterialDesign (Flipper Card ... почему? Потому что мне понравилось) для высокого профиля пользовательского интерфейса и гибкости.У меня есть одна проблема, что я хочу показать список контактов в виде списка с пользовательским шаблоном данных и в горизонтальной плоскости.Наряду с этим мои данные не заполняются в дизайне, который я использовал в шаблоне данных.Пожалуйста, просмотрите код, чтобы получить более подробное описание проблемы.Вот снимок экрана существующего дизайна Sample

По сути, я хочу, чтобы он был сделан горизонтально, чтобы каждый контакт можно было видеть рядом с другим.

СпасибоВы заранее, если где-то код неправильный, пожалуйста, руководство, я маленький NOOB в 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; }
        }

Код модели представления: 

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 Пожалуйста, проверьте этот снимок экрана Screen Shot after editing

1 Ответ

0 голосов
/ 20 мая 2018

Установите ItemsPanel ListView в горизонтальную StackPanel.Как это: 

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

При этом отобразятся все элементы Horizontally.

...