滑块模板上的鼠标悬停触发器

时间:2015-03-26 18:20:26

标签: c# wpf xaml binding

我正在更改标准WPF滑块的模板。我希望你将鼠标移动到滑块占据的区域,拇指开始动画以改变其大小,即使光标不是直接在拇指上方。

但我不知道如何绑定到这样的父母。

我会尝试发布我得到的东西而不会让它看起来很讨厌。这就是我所得到的相关(我想。如果你需要更多,请告诉我)

<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}" x:Name="SliderHorizontal">
                 <Track x:Name="PART_Track" Grid.Row="1">
                  <Track.DecreaseRepeatButton>
                      <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource LeftRepeatButtonTransparent}">
                      </RepeatButton>
                  </Track.DecreaseRepeatButton>
                  <Track.IncreaseRepeatButton>
                      <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RightRepeatButtonTransparent}"/>
                  </Track.IncreaseRepeatButton>
                  <Track.Thumb>
                      <Thumb x:Name="Thumb" Focusable="False" Height="20" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="Auto" Margin="0,0,-5.5,0">

                      </Thumb>
                  </Track.Thumb>
              </Track>
          </Grid>
      </Border>
      <ControlTemplate.Triggers>
             triggers galore
      </ControlTemplate.Triggers>
 </ControlTemplate>

这是拇指本身的模板。它是椭圆grip我想改变它的大小。

<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
            <Ellipse x:Name="grip" Fill="White" Height="15" Width="15" Effect="{StaticResource z-depth1}">
            </Ellipse>
            <ControlTemplate.Triggers>
                more triggers
            </ControlTemplate.Triggers>
        </ControlTemplate>

我将如何进行此绑定? 任何帮助将不胜感激!!

1 个答案:

答案 0 :(得分:0)

在RenderTransform块中,我会添加一个scaleTransform

<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
     .....
     .....
     <ControlTemplate TargetType="{x:Type Thumb}">
         <Canvas x:Name="canvas" SnapsToDevicePixels="true">
             <Canvas.RenderTransform>
                 <TransformGroup>
                     <ScaleTransform ScaleX="1" ScaleY="1"/>
                     <TranslateTransform X="5.5" Y="11"/>
                 </TransformGroup>
             </Canvas.RenderTransform>

然后在控件模板的触发器中,我将添加画布的放大。

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="true">
        <Trigger.EnterActions>
            <BeginStoryboard Name="EnlargeThumb">
                <Storyboard TargetName="canvas" 
                            TargetProperty="RenderTransform.Children[1].ScaleX" >
                    <DoubleAnimation To="2" Duration="0:0:0" />
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <StopStoryboard BeginStoryboardName="EnlargeThumb" />
        </Trigger.ExitActions>
   </Trigger>

注意风格和我得到的不是来自通过visual studio提取的模板。