导航按钮和查看对象的集合在面板选择的一个 [英] Navigate a collection of objects with buttons and view selected one in a panel

问题描述

这是我想做的事：我有一个列表与LT; myCustomType> 。现在我要显示的画布（或与此有关的任何其他容器）上的列表。从 myCustomType 的每个属性（弦数，图像，字符串列表）有一个设计的控制一个画布。基本上我想每个控制在我的画布绑定到一个属性上 myCustomType 。然后我想有一个让我循环在画布上按钮列表< myCustomType> 和更新，同时所有的控制，使所有的控制始终显示的内容一个列表项。

Here is what I want to do: I have a List<myCustomType>. Now I want to display that list on a canvas (or any other container for that matter). Every property from myCustomType (a few strings, an image, a list of strings) has a designed control one the canvas. Basically I want to bind each control on my canvas to one property on myCustomType. Then I want to have buttons on the canvas that allow me to cycle through the List<myCustomType> and updates all controls at the same time so that all controls always show the contents of a single list item.

我一直在四处寻找，但找不到任何东西，我可以作为一个起点使用。

I have been looking around, but couldn't find anything that I could use as a starting point.

是容易实现的？或我要从头代码？

Is that easily achievable? Or do I have to code that from scratch?

推荐答案

下面是一个使用MVVM一个例子。

Here is an example using MVVM.

我的客户模式是非常简单的，看起来像这样：

My Customer model is very simple and looks like this:

public class Customer
{
    public string Name { get; set; }
    public int Age { get; set; }
}

接下来我们需要一个ViewModel该应用程序的主窗口将被绑定到。它拥有的客户和具有为客户之间移动的按钮的方法。该的CollectionView类型支持当前项目的跟踪，是我想类似的WinForms的BindingSource的：

Next we need a ViewModel which the MainWindow of the application will be bound to. It holds the Customers and has the methods for moving between the Customers with buttons. The CollectionView type supports current item tracking and is I suppose something like WinForms's BindingSource:

public class MyViewModel
{
    public ICollectionView Customers { get; set; }

    public void MoveSelectionLeft()
    {
        Customers.MoveCurrentToPrevious();
    }

    public void MoveSelectionRight()
    {
        Customers.MoveCurrentToNext();
    }

    public MyViewModel()
    {
        Customers = new CollectionViewSource
            {
                Source = new[]
                    {
                        new Customer {Name = "John", Age = 25},
                        new Customer {Name = "Jane", Age = 27},
                        new Customer {Name = "Dawn", Age = 31}
                    }
            }.View;
    }
}

接下来我们查看。我使用微卡利简化挂钩行​​动的按钮。只需下载并添加到您的项目Caliburn.Micro.dll的引用：

Next we have the View. I am using Caliburn Micro to simplify hooking up actions to the buttons. Simply download it and add a reference to Caliburn.Micro.dll to your project:

<Window x:Class="WpfApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:cal="http://www.caliburnproject.org" Title="MainWindow" Height="400" Width="400">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.RowSpan="2" ItemsSource="{Binding Customers}" DisplayMemberPath="Name"/>

    <DockPanel Grid.Column="1" LastChildFill="False">
        <Button DockPanel.Dock="Left" Content="&lt;"
                    cal:Message.Attach="[Event Click] = [MoveSelectionLeft]"/>
        <Button DockPanel.Dock="Right" Content="&gt;"
                    cal:Message.Attach="[Event Click] = [MoveSelectionRight]"/>
    </DockPanel>

    <StackPanel Grid.Row="1" Grid.Column="1">
        <DockPanel>
            <TextBlock MinWidth="50" Text="Name" Margin="0,0,5,0"/>
            <TextBox Text="{Binding Customers/Name}"/>
        </DockPanel>
        <DockPanel>
            <TextBlock MinWidth="50" Text="Age" Margin="0,0,5,0"/>
            <TextBox Text="{Binding Customers/Age}"/>
        </DockPanel>
    </StackPanel>
</Grid>

我们有一个列表框绑定到MyViewModel的客户财产，按钮，他们的Click事件已连接到MoveSelection方法和客户领域都绑定到客户/属性，这是短期的Customers.CurrentItem。

We have a ListBox bound to the Customers property of MyViewModel, buttons where their Click event has been attached to the MoveSelection methods, and the Customer fields are bound to the Customers/ property, which is short for Customers.CurrentItem.

假设这是WPF应用程序都需要我们接下来要做的就是设置它的DataContext到MyViewModel的主窗口。

Assuming this is the MainWindow of the WPF app all we need to do next is set its DataContext to MyViewModel. This can be done by adding the following to its constructor in the code-behind:

public MainWindow()
{
    this.DataContext = new MyViewModel();

    InitializeComponent();
}

一切都应该建立现在这样你就可以建立并运行应用程序。它看起来是这样的：

Everything should be setup now so you can build and run the application. It will look something like this:

这篇关于导航按钮和查看对象的集合在面板选择的一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！