首先:我只是想开始使用WPF并稍微使用它,所以事情可能不是完全最优的,我对任何建议的改进感到高兴。
我正在为我的按钮设置以下样式和模板,并尝试在鼠标悬停时将它们放大,而对于点击则更小,这几乎可以正常工作:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Name="ButtonGrid" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" ClipToBounds="True" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<ScaleTransform></ScaleTransform>
</Grid.RenderTransform>
<Viewbox Stretch="Uniform">
<Canvas Name="svg2" Width="100" Height="100">
<Canvas.RenderTransform>
<TranslateTransform X="-322.04954" Y="-476.16966"/>
</Canvas.RenderTransform>
<Path Name="path2985" Fill="#FFFFFFFF" StrokeThickness="2" Stroke="#FFDB2325" StrokeMiterLimit="4">
<Path.Data>
<PathGeometry Figures="m 166.96292 92.089554 c 0 43.240226 -35.05313 78.293346 -78.293349 78.293346 -43.240223 0 -78.29335 -35.05312 -78.29335 -78.293346 0 -43.240224 35.053127 -78.29335 78.29335 -78.29335 43.240219 0 78.293349 35.053126 78.293349 78.29335 z" FillRule="NonZero"/>
</Path.Data>
<Path.RenderTransform>
<MatrixTransform Matrix="0.6305699 0 0 0.6305699 316.13718 468.10076"/>
</Path.RenderTransform>
</Path>
<Path Name="path2987" Fill="#FFDB2325">
<Path.Data>
<PathGeometry Figures="m 145.26718 89.259674 a 61.314068 61.314068 0 1 1 -122.628138 0 61.314068 61.314068 0 1 1 122.628138 0 z" FillRule="NonZero"/>
</Path.Data>
<Path.RenderTransform>
<MatrixTransform Matrix="0.63076923 0 0 0.63076923 319.0945 469.8674"/>
</Path.RenderTransform>
</Path>
</Canvas>
</Viewbox>
<!-- Present Content (text) of the button. -->
<DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter x:Name="myContentPresenter" Margin="20"
Content="{TemplateBinding Content}"
TextBlock.Foreground="White" />
</DockPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.08" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.08" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.00" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.00" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="0.95" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="0.95" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.00" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.00" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
问题是,当我单击一个按钮时,MouseOver Trigger不再执行或者缩放不起作用。因此按钮不再在MouseOver上放大。
非常感谢提示:)
答案 0 :(得分:0)
将IsMouseOver触发器更改为MultiTrigger并将IsPressed触发器移动到IsMouseOver多触发器上方,如下所示。
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="0.95" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="0.95" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.08" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.08" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsPressed" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard >
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.08" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.08" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.00" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.00" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>