代码之家 › 专栏 › 技术社区 › Martin Plante

如何基于SelectedItem在ListBox的ItemTemplate中切换图像的可见性

windows-phone-7 silverlight

Martin Plante · 技术社区 · 14 年前

我在列表框的ItemTemplate中有一个图像。XAML中有没有一种方法可以根据列表框的SelectedItem来切换其可见性?

换句话说,我希望图像仅在选中ListBoxItem时可见,但要避免代码隐藏。

谢谢。

3 回复 | 直到 14 年前

Ben Gracewood 14 年前

编辑ListBox的ItemContainerStyle,然后您就可以访问ListBox项的所有状态。这些包括集中和选定的状态。如果您在Blend中执行此操作,它应该位于列表框上下文菜单的“编辑其他模板”下。

然后您应该能够更改所选状态的布局,这应该是您所需要的?

John Garland 14 年前

在列表框的ItemContainerStyle中(在Blend中,右键单击对象和时间线中的列表框,然后选择编辑其他模板/编辑生成的项目容器(ItemContainerStyle)/编辑副本。。。在“使用”对话框中选择新样式的名称和位置。)

<Image Source="{Binding Property2}" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}"/>

正如您在上面的标记中所看到的,您必须使用值转换器,因此不能脱离使用某些代码…IsSelected是一个布尔值,Visibility是系统.Windows.Visibility枚举。要从一个值域转换到另一个值域,需要一个从一个值域切换到另一个值域的ValueConverter。布尔/可见性转换器相当常见,我在下面提供了一个简单的转换器(我倾向于使用一个“stock”转换器,其中包含一个参数,用于设置要将“true”映射到哪个值以使其更灵活,但为了简洁起见,省略了它…)

public class BooleanToVisibilityConverter : IValueConverter
{
    public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture)
    {
        var booleanValue = (Boolean)value;
        return booleanValue ? Visibility.Visible : Visibility.Collapsed;
    }

    public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture)
    {
        var visibilityValue = (Visibility) value;
        return visibilityValue == Visibility.Visible;
    }
}

DaveB 14 年前

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer Height="500" Width="200">
        <ListBox x:Name="lstItems" SelectionChanged="lstItems_SelectionChanged">
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Selected.png" Visibility="Collapsed"/>
                    <TextBlock Text="Item 1"/>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Selected.png" Visibility="Collapsed"/>
                    <TextBlock Text="Item 2"/>
                </StackPanel>
            </ListBoxItem>
        </ListBox>
    </ScrollViewer>
</Grid>

处理事件:

private void lstItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    HideAllSelected();
    ListBoxItem item = lstItems.SelectedItem as ListBoxItem;
    StackPanel sp = item.Content as StackPanel;
    Image img = sp.Children[0] as Image;
    img.Visibility = Visibility.Visible;
}

private void HideAllSelected()
{
    foreach (ListBoxItem item in lstItems.Items)
    {
        StackPanel sp = item.Content as StackPanel;
        Image img = sp.Children[0] as Image;
        img.Visibility = Visibility.Collapsed;
    }
}