Как в модели-представлении (MVVM) получить элемент ListView при наведении на него курсора?

Как сделать так, чтобы при наведении на элемент, border становился видимым, а textblock внутри имел такой же текст, как textblock, связанный с "Name", который находится внутри ListView?
  • 5 ноября 2023 г. 18:08
Ответы на вопрос 1
В модели-представлении (ViewModel) в MVVM-архитектуре не должно быть прямой зависимости от элементов пользовательского интерфейса, таких как ListView или его элементы. MVVM рекомендует использовать привязку данных, чтобы связать свойства в представлении с соответствующими свойствами в модели-представлении.

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

1. Создайте стиль для элемента ListView:
```xaml
<Style TargetType="ListViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Border x:Name="Border" Background="Transparent">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
```
Этот стиль определяет, что при наведении курсора мыши на элемент ListView его фон должен стать светло-серым.

2. Свяжите свойство "Name" внутри ListView с элементами в представлении.
```xaml
<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Border x:Name="ItemBorder" Background="{Binding IsSelected, Converter={StaticResource BooleanToBackgroundConverter}}">
                    <TextBlock Text="{Binding Name}" />
                </Border>
                <TextBlock Text="{Binding Name}" Grid.Column="1" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```
Здесь создана привязка данных для свойства "Name" в модели-представлении. Стиль элемента Border задает привязку фона через конвертер, который определен в ресурсах, чтобы изменить фон в зависимости от выбранности элемента.

3. В модели-представлении у вас должны быть свойства:
```csharp
private ObservableCollection<Item> items;
public ObservableCollection<Item> Items
{
    get { return items; }
    set { items = value; OnPropertyChanged(); }
}
```
Где Item - это класс, содержащий свойство "Name".

Теперь, когда курсор мыши наведен на элемент ListView, фон Border будет меняться, а текст внутри каждого элемента будет соответствовать свойству "Name".
Похожие вопросы