使用按钮导航对象集合，并在面板中查看所选对象 [英] Navigate a collection of objects with buttons and view selected one in a panel

问题描述

这是我想要做的：我有一个列表< 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，该应用程序的MainWindow将被绑定。它拥有客户，并具有使用按钮在客户之间移动的方法。 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;
    }
}

接下来我们有View。我正在使用Caliburn Micro来简化对按钮的挂钩操作。只需下载它，并将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>

我们有一个ListBox绑定MyViewModel的Customers属性，其Click事件已附加到MoveSelection方法的按钮，Customer字段绑定到Customers / property，这是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应用程序的MainWindow，我们下一步需要做的是将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屋！