Question

我正在使用C＃开发WPF应用程序。

我已经在一个带有DataTemplate的窗口中添加了一个TreeView。但我需要一些样式触发器来实现这个DataTemplates，如MouseOver，IsFocused等。

你可以帮帮我吗？谢谢你的帮助。

<TreeView 
   x:Name="twLayer" 
   Background="{x:Null}" 
   HorizontalContentAlignment="Stretch" 
   VerticalContentAlignment="Top" 
   Padding="0" 
   SnapsToDevicePixels="True" 
   ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
   ScrollViewer.VerticalScrollBarVisibility="Auto" 
   BorderThickness="0" 
   Cursor="Hand">
   <TreeView.Resources>
      <HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}">
         <Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353"  BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
            <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
               <Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True">
                  <Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
                     <Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" />
                  </Border>
               </Border>
               <TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </HierarchicalDataTemplate>
      <DataTemplate DataType="{x:Type loc:ChannelItem}">
         <Border Width="250" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
            <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
               <Border BorderThickness="1" BorderBrush="Black" VerticalAlignment="Center" SnapsToDevicePixels="True">
                  <Border BorderThickness="1" BorderBrush="White" SnapsToDevicePixels="True">
                     <Grid Width="16" Height="16" Background="{Binding Path=ChannelColor}" SnapsToDevicePixels="True"/>
                  </Border>
               </Border>
               <TextBlock Margin="5,3,0,0" Text="{Binding Path=Name}" Foreground="White" FontFamily="Calibri" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </DataTemplate>
      <DataTemplate DataType="{x:Type loc:EffectItem}">
         <Border Width="250" Height="18" BorderBrush="#FF383838" Background="#FF535353"  BorderThickness="1,0,1,1" Padding="2"  OverridesDefaultStyle="True">
            <StackPanel Orientation="Horizontal"  SnapsToDevicePixels="True">
               <Image Width="10" Height="10" VerticalAlignment="Center"  HorizontalAlignment="Left" Source="icons/iconFX.png" SnapsToDevicePixels="True"/>
               <TextBlock  Margin="6,0,0,0" Text="{Binding Path=Name}" Foreground="White" FontSize="10" FontFamily="Calibri" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </DataTemplate>
   </TreeView.Resources>
</TreeView>

Answer 1

你可以使用像

这样的VisualState

<VisualStateManager.VisualStateGroups>
   <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlNormalColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
 </VisualStateManager.VisualStateGroups>

Answer 2

您可以将Trigger添加到TriggersCollection的{{1}}中，如下所示：

Style

您也可以在其他<HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}"> <Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" > <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True"> <Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True"> <Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True"> <Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" /> </Border> </Border> <TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/> </StackPanel> <Border.Style> <Style TargetType="{x:Type Border}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="BorderBrush" Value="LightGreen" /> </Trigger> <Trigger Property="IsFocused" Value="False"> <Setter Property="BorderBrush" Value="Gray" /> </Trigger> </Style.Triggers> </Style> </Border.Style> </Border> </HierarchicalDataTemplate>的根Border元素上执行类似的操作。您可以在MSDN上的Trigger Class页面上找到更多信息。

WPF TreeView DataTemplate触发器

2 个答案: