列表框绑定上的选定项

本文关键字：绑定 列表 | 更新日期: 2023-09-27 18:14:39

我有一个绑定的ListBox，但我怎么能添加一个事件选定的项目?

MainPage.xaml: 

<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Name="list" SelectionChanged="list_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding ImageUri}" 
                           Stretch="None" 
                           Height="100"/>
                    <StackPanel Width="360" >
                        <TextBlock Text="{Binding Text}"
                                   Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        <TextBlock Text="{Binding Opis}" 
                                   Style="{StaticResource PhoneTextSubtleStyle}"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

MainPage.xaml.cs: 

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        ObservableCollection<SampleData> dataSource = 
            new ObservableCollection<SampleData>();
        dataSource.Add(new SampleData() 
        { 
            ImageUri = "Images/appbar.delete.rest.png", 
            Text = "Item1", 
            Description = "blablabla" 
        });
        dataSource.Add(new SampleData() 
        { 
            ImageUri = "Images/appbar.delete.rest.png", 
            Text = "Item2", 
            Description = "blablabla" 
        });
        dataSource.Add(new SampleData()
        { 
            ImageUri = "Images/appbar.download.rest.png", 
            Text = "Item3", 
            Description = "blablabla" 
        });
        this.list.ItemsSource = dataSource;         
    }
    private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (list.SelectedItem == null) return;
        //what next?
    }
    public class SampleData
    {
        public string Text { get; set; }
        public string Description { get; set; }
        public string ImageUri { get; set; }
    }
}

我想点击例如Item2，并进入页面Page2.xaml。

我的项目从VS2010: http://www.przeklej.pl/plik/wp7sampleproject6-7z-00368v7i196u

列表框绑定上的选定项

如果你使用像MVVMlight这样的MVVM堆栈，这很简单，因为你只需在视图模型中为选定项目创建一个完整属性，然后像绑定其他任何东西一样绑定到它。例如，使用上面的代码，我将这样做:

        /// <summary>
    /// The <see cref="SelectedListItem" /> property's name.
    /// </summary>
    public const string SelectedStickPropertyName = "SelectedListItem";
    private SampleData _selectedItem;
    /// <summary>
    /// Gets the SelectedStick property.
    /// TODO Update documentation:
    /// Changes to that property's value raise the PropertyChanged event. 
    /// This property's value is broadcasted by the Messenger's default instance when it changes.
    /// </summary>
    public SampleData SelectedListItem
    {
        get
        {
            return _selectedItem;
        }
        set
        {
            if (_selectedItem == value || value == null)
            {
                return;
            }
            var oldValue = _selectedItem;
            _selectedItem = value;
            // Update bindings, no broadcast
            RaisePropertyChanged(SelectedStickPropertyName);
        }
    }

然后在你的Listbox XAML中绑定Listbox Selected Item到上面的属性(前提是你已经设置了数据上下文属性:

)
<ListBox Name="list" SelectionChanged="list_SelectionChanged" SelectedItem="{Binding SelectedListItem, Mode=TwoWay}">

这样您就可以查询Selected Item Property来查找值

看看默认情况下作为新Databound应用程序的一部分创建的代码。它展示了如何通过查询SelectionChanged事件处理程序中的e.AddedItems属性来访问SelectedItem。

我个人会使用带有命令绑定的按钮，但我想你可以这样开始:

public MainPage()
{
    InitializeComponent();
    ObservableCollection<SampleData> dataSource = new ObservableCollection<SampleData>();
    dataSource.Add(
        new SampleData()
        {
            ImageUri = "Images/appbar.delete.rest.png",
            Text = "Item1",
            Description = "blablabla",
            TargetUri = new Uri("Page1.xaml", UriKind.Relative)
        });
    dataSource.Add(
        new SampleData()
        {
            ImageUri = "Images/appbar.delete.rest.png",
            Text = "item2",
            Description = "blablabla",
            TargetUri = new Uri("Page2.xaml", UriKind.Relative)
        });
    dataSource.Add(
        new SampleData()
        {
            ImageUri = "Images/appbar.download.rest.png",
            Text = "Item3",
            Description = "blablabla",
            TargetUri = new Uri("Page3.xaml", UriKind.Relative)
        });
    this.list.ItemsSource = dataSource;
}
private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var data = list.SelectedItem as SampleData;
    if (data == null)
    {
        return;
    }
    NavigationService.Navigate(data.TargetUri);
}
public class SampleData
{
    public string Text { get; set; }
    public string Description { get; set; }
    public string ImageUri { get; set; }
    public Uri TargetUri { get; set; }
}
*编辑

如果你想点击一个项目来使用命令导航，你可以这样做:

public class SampleData
{
    public string Text { get; set; }
    public string Description { get; set; }
    public string ImageUri { get; set; }
    public Uri TargetUri { get; set; }
    public ICommand NavigateCommand { get; private set; }
    public SampleData()
    {
        NavigateCommand =
            new DelegateCommand(
                () => NavigationService.Navigate(TargetUri);
    }
}

要获得一个NavigationService实例-你可以自己实现它或简单地使用App.RootFrame来执行导航调用。您可以大致如下定义命令绑定:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Button
            Command={Binding NavigateCommand}>
            <Button.Template>
                <ControlTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImageUri}" 
                               Stretch="None" 
                               Height="100"/>
                        <StackPanel Width="360" >
                            <TextBlock Text="{Binding Text}"
                                       Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="{Binding Description}" 
                                       Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                </StackPanel>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </DataTemplate>
</ListBox.ItemTemplate>
相关文章：