Question

我在一个ListBox的ItemTemplate中有一个Image。 XAML中是否有一种方法可以根据ListBox的SelectedItem？

切换其可见性

换句话说，我希望图像只有在选择了ListBoxItem时才可见，但是为了避免代码隐藏。

感谢。

Answer 1

在列表框的ItemContainerStyle中（在Blend中，右键单击对象和时间线中的ListBox，然后选择编辑其他模板/编辑生成的项容器（ItemContainerStyle）/编辑副本...选择名称和位置在enusing对话框中的新样式。）

在生成的样式中，找到ContentPresenter标记。在该区域的某个位置（取决于您的特定布局需求），您将要删除Image项。设置其可见性以绑定到模板化父级的IsSelected属性...

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

正如您在上面的标记中看到的那样，您必须使用值转换器，因此无法使用某些代码... IsSelected是一个布尔值，Visibility是System.Windows.Visibility枚举的成员。要将表单转换为另一个，您需要一个从一个值域切换到另一个值域的ValueConverter。布尔/可见性转换器是相当常见的，我在下面包含了一个简单的转换器（我倾向于使用一个“库存”，我使用它包含一个参数来设置映射“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;
    }
}

Answer 2

编辑ListBox的ItemContainerStyle，然后您将可以访问ListBox项的所有状态。这些包括焦点和选定状态。如果您在Blend中执行此操作，则应该在ListBox的上下文菜单中的“编辑其他模板”下。

那么你应该能够改变所选状态的布局，这应该是你需要的吗？

Answer 3

您可以使用ListBox的SelectionChanged事件执行此操作。

<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;
    }
}

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

3 个答案: