按钮单击时切换WPF动画
我想实现按钮扩展动画，当用户将鼠标悬停在顶部按钮上时，其他各个功能的潜行峰值将显示在用户最初悬停的顶部按钮下方。我编写了下面的XAML来实现它，它正在按预期工作。
XAML：
<Button Name="panel" Margin="0,40,0,0">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..." Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="editBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
初始截图：
当用户将鼠标悬停在蓝色按钮上时，另外两个按钮将从此蓝色按钮后面掉落。很难截取屏幕截图，因为这两个按钮只会在用户悬停在蓝色按钮上时显示。这正是我的问题。
如果用户想要点击下来的另外两个按钮，用户将不得不将光标移离蓝色按钮，这两个额外的按钮将立即消失并隐藏在蓝色按钮后面，从而逃离用户点击。我怎么能克服这个？
如果用户点击蓝色按钮而不是悬停在按钮上，我是否可以覆盖Trigger.ExitActions？或者我可以启动任何其他事件来禁用ExitActions一段时间？
我正在尝试为蓝色按钮创建一个点击事件，并在后面的代码中处理所需的行为，但如果还有其他更好的方法，请告诉我。
1 个答案:
答案 0 :(得分：0)
-
使用
VisualStates一个用于Normal，另一个用于Expanded州。 -
或者，使用
ToggleButton代替Button，以防您的代码如下所示：<Button Name="panel" Margin="0,40,10,31"> <Button.Template> <ControlTemplate x:Name="abc"> <Grid> <Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" > <Button.Template> <ControlTemplate x:Name="addBtn" TargetType="Button"> <StackPanel Orientation="Horizontal" > <TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> </TextBlock> <Grid> <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" StrokeThickness="2" Fill="#00a1f1"> </Ellipse> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Top"/> <Grid.Effect> <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> </Grid.Effect> </Grid> </StackPanel> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> <!--Trigger Property="IsMouseOver" Value="False"> <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter> </--> <Trigger Property="Margin" Value="0,45,10,0"> <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> <Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-"> <Button.Template> <ControlTemplate x:Name="addBtn" TargetType="Button"> <StackPanel Orientation="Horizontal" > <TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> </TextBlock> <Grid> <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" StrokeThickness="2" Fill="#00a1f1"> </Ellipse> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Top"/> <Grid.Effect> <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> </Grid.Effect> </Grid> </StackPanel> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <Trigger Property="Margin" Value="0,85,10,0"> <Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> <ToggleButton Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..."> <ToggleButton.Template> <ControlTemplate x:Name="editBtn" TargetType="ToggleButton"> <StackPanel Orientation="Horizontal" > <TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90"> </TextBlock> <Grid> <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" StrokeThickness="2" Fill="#00a1f1"> </Ellipse> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Top"/> <Grid.Effect> <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> </Grid.Effect> </Grid> </StackPanel> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> <Trigger Property="IsMouseOver" Value="False"> <Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </ToggleButton.Template> </ToggleButton> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding IsChecked, ElementName=editButton}" Value="True"> <DataTrigger.EnterActions> <BeginStoryboard Name="enterBoard"> <Storyboard FillBehavior="HoldEnd"> <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" /> </ThicknessAnimationUsingKeyFrames> <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <BeginStoryboard Name="exitBoard"> <Storyboard> <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" /> </ThicknessAnimationUsingKeyFrames> <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </DataTrigger.ExitActions> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？