Как я могу переключить видимость изображения в ListBox 'ItemTemplate на основе SelectedItem

Question

У меня есть изображение внутри ItemTemplate для ListBox.Есть ли способ в XAML переключать свою видимость на основе ListBox 'SelectedItem?

Другими словами, я хочу, чтобы изображение было видимым только в том случае, если выбран ListBoxItem, но хочу избежать использования кода для этого.

Спасибо.

Answer 1

В ItemContainerStyle для списка (в Blend щелкните правой кнопкой мыши ListBox на объектах и ​​временной шкале и выберите «Редактировать дополнительные шаблоны» / «Редактировать контейнер сгенерированного элемента» (ItemContainerStyle) / «Редактировать копию ...» новый стиль в привлекательном диалоговом окне.)

В сгенерированном стиле найдите тег ContentPresenter. Где-то в этой области (в зависимости от ваших конкретных требований макета) вы захотите удалить свой элемент изображения. Установите его видимость для привязки к свойству IsSelected шаблонного родителя ...

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

Как видно из приведенной выше разметки, вам необходимо использовать преобразователь значений, поэтому вы не можете отказаться от использования НЕКОТОРОГО кода ... IsSelected - логическое значение, Visibility - член перечисления System.Windows.Visibility. Чтобы преобразовать одну форму в другую, вам понадобится ValueConverter, который переключается из одной области значений в другую. Преобразователь Boolean / Visibility довольно распространен, и я включил простой ниже (у меня, как правило, есть «фондовый», который я использую, который включает параметр, чтобы установить, какое значение сопоставить «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

Отредактируйте ItemContainerStyle в ListBox, и вы получите доступ ко всем состояниям для элементов ListBox. К ним относятся сфокусированные и выбранные состояния. Если вы делаете это в Blend, это должно быть в разделе «Редактировать дополнительные шаблоны» контекстного меню ListBox.

Тогда вы сможете изменить макет для выбранного состояния, что должно быть тем, что вам нужно?

Answer 3

Это можно сделать с помощью события SelectionChanged объекта ListBox.

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