处理所选的列表框项目

时间:2012-03-21 18:43:29

标签: silverlight windows-phone-7 listbox mvvm-light

这似乎是一个常见的问题...

我正在使用MVVM Light

我的xaml中定义了一个列表框

<ListBox ItemsSource="{Binding Events}" SelectedItem="{Binding SelectedEvent, Mode=TwoWay}">

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Tap">
            <cmd:EventToCommand Command="{Binding EventPageCommand, Mode=OneWay}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Padding="0,0,0,22">
                <StackPanel>
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Text="{Binding Preview}" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>
        </DataTemplate>

     </ListBox.ItemTemplate>
 </ListBox>

除了用户能够在此列表下方点击并且事件仍然被触发外,这一切都很好用。但

我可以将其修改为使用SelectionChanged,例如:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <cmd:EventToCommand Command="{Binding EventPageCommand, Mode=OneWay}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

但是如果我使用后退按钮,我不能选择相同的项目两次,因为选择实际上没有改变。我可能会进入我的代码隐藏并在页面加载时设置所选的索引= -1,但这看起来很糟糕,我在很多地方都使用列表框而且我不想记得在任何地方都做这个黑客

有什么想法吗?

修改
我在列表框和列表框项目中添加了背景颜色,而我的列表框项目只占用文本占用的空间,列表框占据整个屏幕,延伸到最后一个列表框项目下方。也许一种方法是支撑这个额外的空间。

更新
到目前为止看起来效果最好的是在列表框上设置VerticalAlignmnet="Top"(这会在底部留出额外的空间,不知道为什么,但是滚动结束于列表底部而不是底部屏幕)。然后我禁用列表框本身ScrollViewer.VerticalScrollBarVisibility="Disabled"上的滚动并将整个内容包装在<ScrollViewer>

2 个答案:

答案 0 :(得分:1)

目前,您正在整个列表框中查找Tap事件,而不是单个项目。

这就是我通常使用交互式触发器的方式:

<DataTemplate DataType="{x:Type ViewModel:DataItem}" x:Key="ItemTemplate">
    <ContentControl>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
                <i:InvokeCommandAction Command="{Binding Tap}"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="KeyUp">
                <i:InvokeCommandAction 
                   Command="{Binding RelativeSource={RelativeSource 
                             Mode=FindAncestor, 
                             AncestorType={x:Type ListBox}}, 
                             Path=DataContext.KeyUpCommand}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <TextBox Text="{Binding Name}"/>
    </ContentControl>
</DataTemplate>

在此示例中,Tap事件绑定到ItemsControl的DataContext(数据项)上的命令,而KeyUp事件绑定到ListBox的父DataContext上的命令。

答案 1 :(得分:0)

如果你想要的只是当用户点击一个项目时获得一个事件,你为什么不使用你在模板的Border元素上的触发器代码?

您可能必须使用Source属性将命令绑定到ViewModel,但这也可以轻松实现(将取决于您现在如何设置Page DataContext)