WPF中子元素的样式触发器

Question

我正在编写自定义滚动条。当鼠标悬停在网格（滚动条）上时，它应该增加其高度和拇指的高度，更改背景等。除了拇指的高度外，一切都完成了，因为拇指是网格的子元素而不是其属性之一。

这是完整的模板代码，给我异常"TargetName "ellipse"未找到"。

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid MaxHeight="28">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="2"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition MaxWidth="2"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
            <Track.DecreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageLeftCommand"
                    Style="{StaticResource ScrollBarPageButtonStyle}">
                </RepeatButton>
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb IsTabStop="False" Margin="0,1,0,1" BorderBrush="{StaticResource StandardBorderBrush}">
                    <Thumb.Template>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Rectangle Height="12" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
                                            Fill="{StaticResource StandardBrush}" RadiusX="5" RadiusY="5"></Rectangle>
                        </ControlTemplate>
                    </Thumb.Template>                        
                </Thumb>                    
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageRightCommand"
                    Style="{StaticResource ScrollBarPageButtonStyle}">
                </RepeatButton>
            </Track.IncreaseRepeatButton>
        </Track>
        <Grid.Resources>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Gray"></Setter>
                        <Setter TargetName="ellipse" Property="Height" Value="28"></Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="Transparent"></Setter>
                        <Setter TargetName="ellipse" Property="Height" Value="14"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
    </Grid>
</ControlTemplate>

- Manvinder

Answer 1

使用 ControlTemplate.Triggers 来为您的拇指模板添加触发器，例如：

  <Track.Thumb>
     <Thumb IsTabStop="False" Margin="0,1,0,1" BorderBrush="Blue">
        <Thumb.Template>
           <ControlTemplate TargetType="{x:Type Thumb}">
              <Rectangle Height="12" x:Name="ellipse"  Stroke="Blue"
                                        Fill="Wheat" RadiusX="5" RadiusY="5"></Rectangle>
                   <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"  Value="True">
                             <Setter TargetName="ellipse" Property="Height" Value="28"></Setter>
                          </DataTrigger>
                          <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"  Value="True">
                                <Setter TargetName="ellipse" Property="Height" Value="14"></Setter>
                           </DataTrigger>
                    </ControlTemplate.Triggers>
                 </ControlTemplate>
               </Thumb.Template>
           </Thumb>
   </Track.Thumb>

您的样式触发器将被更新。

 <Style TargetType="Grid">
     <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" Value="Gray"></Setter>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background" Value="Transparent"></Setter>
          </Trigger>
       </Style.Triggers>
   </Style>

- Nitin

---

嗨，我已经尝试了这个解决方案，现在它不仅无法识别椭圆形，也无法识别MainGrid。 - Manvinder

谢谢，它可以工作了。有一个小问题是你将两个触发器属性都设置为True，其中一个应该是true。不管怎样还是谢谢。 - Manvinder