Изменение видимости кнопки при наведении на элемент списка

@RaevskiAnatoly · Регистрация: 04.03.2017

Студворк — интернет-сервис помощи студентам

Есть список, элементы в котором это stackpanel с textblock и кнопкой. Когда наводишь на элемент списка, кнопка должна появляться, но на моей памяти (через триггер) у меня ни разу такое провернуть и не получалось. Элементы списка определены через DataTemplate:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ListBox>
                <ListBox.ItemTemplate>
                        <DataTemplate>
                                <!-- код триггера (который не работает и не подразумевает это)
                        <DataTemplate.Triggers>
                            <Trigger Property="StackPanel.IsMouseOver" Value="True">
                                <Setter Property="Свойства кнопки Visibility" Value="Visible"></Setter>
                            </Trigger>
                        </DataTemplate.Triggers> -->
                                <StackPanel Orientation="Horizontal">
                                        <TextBlock>Some</TextBlock>
                                        <Button Content="Удалить"
                                                Visibility="Hidden"></Button>
                                </StackPanel>
                        </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsSource>
                        <system:String>12345</system:String><!-- кол-во символов определит кол-во показываемых элементов-->
                </ListBox.ItemsSource>
        </ListBox>

Готовая папка солюшена для теста:
TestProject.zip

@novikov.ea · 14.10.2018, 10:07

XML
1
2
3
4
5
6
7
8
9
10
11
<StackPanel Orientation="Horizontal">
    <DataTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Visibility" TargetName="RemoveButton" Value="Visible" />
        </Trigger>
    </DataTemplate.Triggers>
    <TextBlock>Some</TextBlock>
    <Button x:Name="RemoveButton"
            Content="Удалить"
            Visibility="Hidden"></Button>
</StackPanel>

@Элд Хасп · 14.10.2018, 11:22

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        <ListBox x:Name="listBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <!-- код триггера (который не работает и не подразумевает это)
                        <DataTemplate.Triggers>
                            <Trigger Property="StackPanel.IsMouseOver" Value="True">
                                <Setter Property="Свойства кнопки Visibility" Value="Visible"></Setter>
                            </Trigger>
                        </DataTemplate.Triggers> -->
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Some</TextBlock>
                        <Button Content="Удалить">
                            <Button.Style>
                                <Style TargetType="Button">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}}" Value="true">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}}" Value="false">
                                            <Setter Property="Visibility" Value="Hidden"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsSource>
                <sys:String>12345</sys:String>
                <!-- кол-во символов определит кол-во показываемых элементов-->
            </ListBox.ItemsSource>
        </ListBox>

Добавлено через 4 минуты
Но лучше StackPanel заменить на Grid. Иначе возможна ситуация когда строка ListBox больше вложенной StackPanel и, следовательно, появится участок строки выходящий за границы StackPanel и поведение на нём будет иным.

Добавлено через 12 минут
novikov.ea, Ваш вариант почему-то запустить мне не удалось. На второй строке выдаёт ошибку "член Triggers не распознан." Попытался изменить так

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                    <StackPanel Orientation="Horizontal">
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Visibility" TargetName="RemoveButton" Value="Visible" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>
                        <TextBlock>Some</TextBlock>
                        <Button x:Name="RemoveButton"
                                Content="Удалить"
                                Visibility="Hidden"
                                />
                    </StackPanel>

Но тоже не работает. TargetName="RemoveButton" - не видит кнопку.

@RaevskiAnatoly · 14.10.2018, 18:37 **[ТС]**

Элд Хасп, отладка показала, что бинд свойства проходит успешно, то есть не пишет в лог о ошибке привязки. Однако, ничего не работает. Пробовал задавать другие свойства, вроде IsEnabled, IsCaptured все тоже. Проверял перекрывает может быть StackPanel текстблок или еще что, тоже нет. Надо копать в чем-о другом. А вы проверяли работоспособность своего варианта?

@Элд Хасп · 14.10.2018, 19:07

Сообщение от RaevskiAnatoly

А вы проверяли работоспособность своего варианта?

Конечно!
Может быть это связанно с тем, что Вы использовали для контейнера StackPanel. Так как она уменьшается до размеров видимых элементов, то за их границей реакции не будет.

@Элд Хасп · 14.10.2018, 19:11

Да, мне что-то сразу в голову не пришло - можно привязку сделать не на StackPanel, а на LisBoxItem. Тогда реагирует на любое место в строке.

XML
1
2
3
4
5
6
7
8
9
10
11
12
                            <Button.Style>
                                <Style TargetType="Button">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="true">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="false">
                                            <Setter Property="Visibility" Value="Hidden"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>

@RaevskiAnatoly · 14.10.2018, 20:01 **[ТС]**

Сообщение от Элд Хасп

Так как она уменьшается до размеров видимых элементов, то за их границей реакции не будет.

Точно, и по-моему даже H...Alignment = stretch не помогает, да?
Я думаю Grid слишком тяжелый контейнер, тогда уж лучше DockPanel?

Добавлено через 8 минут
Элд Хасп, Да, это куда надежней. У меня до не работало, т.к. я у кнопки задавал Visibility=Hidden. А триггеры работают по обратному механизму. Можно убрать триггер "включение видимости", оставить только один. И все равно работать будет. Т.к. изначально IsMouseOver установится в false, тогда видимость кнопки перейдет в hidden, а потом по принципу обртаного механизма, когда IsMouseOver=true, тогда вернется предыдущее значение - true. (Если изначально ставить hidden у кнопки, то вернется hidden и ничего не работает)

@Элд Хасп · 14.10.2018, 20:07

Сообщение от RaevskiAnatoly

Точно, и по-моему даже H...Alignment = stretch не помогает, да?

Stack - в направлении компоновки (ориентации) не растягивается.

Сообщение от RaevskiAnatoly

Я думаю Grid слишком тяжелый контейнер, тогда уж лучше DockPanel?

Нет, grid лучше для данной задачи. Сделайте две колонки: первая ширина "*" для текстблок, вторая ширина "Auto" - для кнопки.

Добавлено через 3 минуты

Сообщение от RaevskiAnatoly

Можно убрать триггер "включение видимости", оставить только один.

Можно. Но я предпочитаю, если есть возможность, устанавливать явно. Уже сталкивался с таким, когда, после обновления системы или FW, значения по умолчанию менялись. И элемент начинал работать по другому.
Возьмите пример с дефолтных стилей элементов - там ни чего не оставляют на волю случая.

@RaevskiAnatoly · 14.10.2018, 20:08 **[ТС]**

Сообщение от Элд Хасп

Нет, grid лучше для данной задачи. Сделайте две колонки: первая ширина "*" для текстблок, вторая ширина "Auto" - для кнопки.

Установить растягивание в горизонт. А эти два элемента по бокам припечатать. И кнопку нужно, чтобы она была строго в самом боку (не люблю, когда кнопки разъезжают из-за размеров др элементов). Так что и док подойдет.

@Элд Хасп · 14.10.2018, 20:14

Сообщение от RaevskiAnatoly

Установить растягивание в горизонт. А эти два элемента по бокам припечатать. И кнопку нужно, чтобы она была строго в самом боку (не люблю, когда кнопки разъезжают из-за размеров др элементов). Так что и док подойдет.

Если Вы потом захотите редактировать строки и замените TextBlock на TextBox - возможно опять будут проблемы из-за DockPanel.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@RaevskiAnatoly 34 / 35 / 12 Регистрация: 04.03.2017 Сообщений: 444
	14.10.2018, 18:37 [ТС]
	Элд Хасп, отладка показала, что бинд свойства проходит успешно, то есть не пишет в лог о ошибке привязки. Однако, ничего не работает. Пробовал задавать другие свойства, вроде IsEnabled, IsCaptured все тоже. Проверял перекрывает может быть StackPanel текстблок или еще что, тоже нет. Надо копать в чем-о другом. А вы проверяли работоспособность своего варианта? 0

Изменение видимости кнопки при наведении на элемент списка

Решение