带有按钮和文本块的可观察集合答案

【问题标题】：observable collection with buttons and textblocks带有按钮和文本块的可观察集合
【发布时间】：2013-10-06 12:00:30
【问题描述】：

我有一个ObservableCollection，里面有很多东西。每个项目都有名为Text 和Anzahl 的属性。这 2 个属性应显示在 2 个不同的文本块中。我已经做到了。在我的AppBar 中，我有两个按钮。一个用于显示下一个项目，一个用于后退。

我可以通过绑定来实现吗？最简单的方法是什么？

【问题讨论】：

要为您的问题提供有效的解决方案，查看您已经完成的代码会很有帮助。
我有一个名为 MainListe 的可观察集合，其中包括一个名为“Text”和“Anzahl”的字段。我将这 2 个绑定到我的 texboxes。它工作正常，但现在我只想通过集合切换按钮。
它被分割成这么多巨大的类，以至于很难过滤掉重要的内容。如果您能告诉我如何实现按钮操作，那就太好了，这样用户就可以逐步完成每个项目。
ObservableCollection 绑定到什么？列表框？数据网格？ TextBlock 如何绑定到列表中的特定项目？它们是在该容器的 DataTemplate 中定义的吗？
Obeservable Collection 被设置为两个文本块的数据上下文。 textblock.text 绑定到每个项目的属性。

标签： c# xaml binding windows-phone-8 windows-phone-7.1

【解决方案1】：

首先将“下一个”和“上一个”按钮绑定到命令，然后在命令操作中，针对当前元素设置属性“Foo”和“Bar”（它们是绑定到各自文本块的属性）。

为了遍历您的 ObservableCollection，在类范围内维护一个索引变量，例如

int iterator=0;

在你的行动中（上一个和下一个）这样做

public void NextAction()
{
    iterator++;
    Foo=MainList[iterator].Text;
    Bar=MainList[iterator].Anzal;
}

public void PreviousAction()
{
    iterator--;
    Foo=MainList[iterator].Text;
    Bar=MainList[iterator].Anzal;
}

别忘了在你的 Foo 和 Bar 属性的 set 方法中实现 RaisePropertyChange..

【讨论】：

【解决方案2】：

正如其他人所提到的，当我们没有上下文时，很难准确地提供帮助。将您的问题提炼成最小的代码表示会非常有帮助。例如，如果您的控件绑定到类上的单个属性，Rushi Soni 的答案将起作用，但如果您将 TextBlocks 直接绑定到 ObservableCollection，则还有另一个答案：

默认情况下，绑定到集合的非列表控件（如TextBlock）将显示列表中的“当前”项。 WPF 维护一个跟踪当前项目的集合的（有点神奇的）视图。您可以通过调用CollectionViewSource.GetDefaultView(ObservableCollection) 访问集合视图，并在返回的ICollectionView 接口上使用方法MoveCurrentToPrevious、MoveCurrentToNext、IsCurrentBeforeFirst 和IsCurrentAfterLast 操作当前项。

此场景的完整代码：

XAML：

<UserControl.Resources>
    <!-- the MyCollection type is derived from ObservableCollection<MyItem> -->
    <my:MyCollection x:Key="myCollection">
        <my:MyItem Text="One" Anzhal="1"/>
        <my:MyItem Text="Two" Anzhal="2"/>
        <my:MyItem Text="Three" Anzhal="3"/>
    </my:MyCollection>
</UserControl.Resources>

<!-- data context of the top level control is the observable collection defined here in XAML, but
could also be created and assigned in code -->
<DockPanel Name="grid1" DataContext="{StaticResource myCollection}"  >
    <!-- navigation controls -->
    <Grid DockPanel.Dock="Top" >
        <Button HorizontalAlignment="Left" Content="&lt; Previous" Name="buttonPrev" Click="buttonPrev_Click" />
        <Button HorizontalAlignment="Right" Content="Next &gt;" Name="buttonNext" Click="buttonNext_Click" />
    </Grid>

    <!-- display of the current item -->
    <TextBlock Padding="5" DockPanel.Dock="Top" Text="{Binding Text}" />
    <TextBlock Padding="5" DockPanel.Dock="Top" Text="{Binding Anzhal}" />

    <!-- list display of all items (not necessary but helpful for visualizing the behavior) -->
    <ListBox ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" DisplayMemberPath="Text" />
</DockPanel>

集合和包含项的类定义：

public class MyCollection : ObservableCollection<MyItem> { }

public class MyItem
{
    // NOTE: these must be get/set properties in order for binding to work
    public string Text { get; set; }
    public int Anzhal { get; set; }
}

以及处理 Next/Previous 按钮点击的代码，它演示了到达集合末端时的环绕：

ICollectionView GetView()
{
    // use FindResource() to retrieve the collection since it is defined in XAML
    // Then we retrieve WPF's view into the collection so we can manipulate the 
    // current item (next, previous)

    return CollectionViewSource.GetDefaultView(FindResource("myCollection"));
}

private void buttonNext_Click(object sender, RoutedEventArgs e)
{
    var view = GetView();

    // wrap around behavior
    view.MoveCurrentToNext();
    if (view.IsCurrentAfterLast) {
        view.MoveCurrentToFirst();
    }
}

private void buttonPrev_Click(object sender, RoutedEventArgs e)
{
    var view = GetView();

    // wrap around behavior
    view.MoveCurrentToPrevious();
    if (view.IsCurrentBeforeFirst) {
        view.MoveCurrentToLast();
    }
}

希望对您有所帮助。

【讨论】：