样式、数据模板和触发器

Question

我对 WPF 很陌生，需要一点帮助。我喜欢将自定义 UserControls 用作Templates，而不是在Style 或ControlTemplates 中定义它们，主要是因为我在编写代码时可以看到结果。这种方法在我开始时效果很好，但我不确定如何检查控件上的触发器并更改 UserControl 模板中的内容。希望有人能理解我在这里想说的话。无论如何，这里有一些代码。我想知道是否在 ListViewItem 控件的 DataTemplate 中选择了来自 ListView[MenuTray] 的项目...

MainWindow.xaml

<Window x:Class="Cellestus.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="1000" Height="650" Loaded="Window_Loaded">

    <Window.Resources>
        <ResourceDictionary Source="/Resources/GlobalResources.xaml" />
    </Window.Resources>

    <Viewbox x:Name="WindowView" Stretch="Fill">
        <Canvas x:Name="WindowCanvas" Width="1000" Height="650" Background="{StaticResource MainWindow_Bg}">
            <!-- other stuf... -->
            <ListView x:Name="MenuTray" Width="1000" Height="60" Canvas.Bottom="0" Style="{StaticResource MenuTray_Style}" />
        </Canvas>
    </Viewbox>
</Window>

MainWindow.xaml.cs，方法：Window_Loded

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // MenuTrayItems.List: ObservableCollection<MenuTrayItem>
    // MenuTrayItem: Class with a couple of string variables, Title, image, page and etc..
    MenuTray.ItemsSource = MenuTrayItems.List; 
}

/Resources/GlobalResources.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:class="clr-namespace:Cellestus.Classes"
                    xmlns:view="clr-namespace:Cellestus.Views">

    <!-- Brushes -->
    <ImageBrush x:Key="MainWindow_Bg" ImageSource="/Images/Backgrounds/MainWindow.png" Stretch="Fill" />

    <LinearGradientBrush x:Key="Gradient_Black" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#2c2c2c" Offset="0" />
        <GradientStop Color="#151515" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="Gradient_LightGray" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#6B6B6B" Offset="1" />
        <GradientStop Color="#D6D7D8" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="Gradient_Gray" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#515151" Offset="0" />
        <GradientStop Color="#282828" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="Gradient_Green" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#77ba53" Offset="0" />
        <GradientStop Color="#5a9c37" Offset="1" />
    </LinearGradientBrush>

    <!-- Templates -->
    <ItemsPanelTemplate x:Key="HorizontalListView">
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>

    <DataTemplate x:Key="MenuTrayItem_Template" DataType="{x:Type class:MenuTrayItem}">
        <view:MenuTrayItemView />
    </DataTemplate>

    <!-- Styles -->
    <Style x:Key="MenuTray_Style" TargetType="{x:Type ListView}">
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="{StaticResource Gradient_Black}" />
        <Setter Property="ItemsPanel" Value="{StaticResource HorizontalListView}" />
        <Setter Property="ItemTemplate" Value="{StaticResource MenuTrayItem_Template}" />
    </Style>

</ResourceDictionary>

/Views/MenuTrayItemView.xaml

<UserControl x:Class="Cellestus.Views.MenuTrayItemView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d">

    <UserControl.Resources>
        <ResourceDictionary Source="/Resources/GlobalResources.xaml" />
    </UserControl.Resources>

    <Border x:Name="ItemContainer" Width="150" Height="60" CornerRadius="10" Background="{StaticResource Gradient_Gray}" MouseEnter="ItemContainer_MouseEnter" MouseLeave="ItemContainer_MouseLeave">
        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Image Margin="0,3,0,0" Width="60" Height="30" Source="{Binding Image, FallbackValue='/Images/Icons/MenuTray/default.png'}" />
            <TextBlock Margin="3,0,0,0" Text="{Binding Title, FallbackValue='title'}" FontSize="10" Foreground="White" />
        </StackPanel>
    </Border>
</UserControl>

/Views/MenuTrayItemView.xaml.cs

private void ItemContainer_MouseEnter(object sender, RoutedEventArgs e)
{
    ItemContainer.Background = FindResource("Gradient_LightGray") as Brush;
}

private void ItemContainer_MouseLeave(object sender, RoutedEventArgs e)
{
    ItemContainer.Background = FindResource("Gradient_Gray") as Brush;
}

这是视觉人物的图像：

如果你做到了这一步。我想知道的是如何在我的DataTemplate/UserControl(MenuTrayView.xaml) 中捕获ListViewItem 控件上的IsSelected 值并将背景更改为静态资源“Gradient_Green”。我知道在我看来我可以处理MouseDown 事件，但我不想这样做。我想知道该项目是否真的被选中。

Answer 1

您需要为您的用户控件创建一个样式，并执行类似的操作

 <Style TargetType="{x:Type local:MenuTrayItemView}">
    <Trigger Property="IsSelected" Value="true"> 
      <Setter Property="background" Value="Static Resource Gradient_Green"/>
    </Trigger>
  </Style.Triggers>
</Style>

如果你有任何问题，请到这里WPF Trigger for IsSelected in a DataTemplate for ListBox items