如何使用一个故事板进行多重控制？ [英] How can i use one storyboard for multipe controls?
问题描述
嘿伙计们，
$ x $ b在xaml中，我使用Window.Resources编写一个当鼠标悬停在我的图像上时触发的Storyboard，另一个鼠标离开图像时触发。
我需要这个动画来处理我将添加到窗口的每个图像，但我不知道该怎么做。现在，假设我要添加另一个图像，动画仅对一个图像产生效果。
我将故事板命名为ScaleImageLargeStoryboard和ScaleImageSmallStoryboard。我在这里添加代码：
< window xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation>
xmlns ：x =http://schemas.microsoft.com/winfx/2006/xaml
xmlns：properties =clr-namespace：EW.Properties
x： Class =EW.MainWindow
WindowStyle =NoneResizeMode =NoResize
ShowInTaskbar =FalseallowsTransparency =True
removed =TransparentMouseDown =Window_MouseDown
WindowStartupLocation =CenterScreenMouseDoubleClick =Window_MouseDoubleClick>
< border borderbrush =White>
BorderThickness =1.5
CornerRadius =10RenderTransformOrigin =0.545,0.488
填充=3>
< border.background>
< lineargradientbrush endpoint =0.5,1startpoint =0.5,0> < gradientstop color =＃FF00F0FFoffset =0.003>
< gradientstop color =＃FF2375F3offset =1>
< stackpanel removed =Transparent>
HorizontalAlignment =Center
VerticalAlignment =Center
高度=515
宽度=748
保证金=5.333,5.333,5.333,5>
< Button x：Name =button
VerticalAlignment =Center
HorizontalAlignment =Center
身高=135
宽度=182
背景={x：Null}
BorderThickness =1
Style = {DynamicResource RoundConrner}
RenderTransformOrigin =0,0Margin =283,20>
< stackpanel>
< Image Source =Resources / AddAccount.png
HorizontalAlignment =Center
VerticalAlignment =Center
RenderTransformOrigin =0.5 ，0.5MouseEnter =Image_MouseEnter>
< Image.RenderTransform>
< scaletransform x：name =ScaleImagexmlns：x =＃unknown >
< /Image.RenderTransform>
< Image.Triggers>
< eventtrigger routedevent =UIElement.MouseEnter> ;
< beginstoryboard>
Storyboard ={DynamicResource ScaleImageLargeStoryboard}/>
< eventtrigger routedevent =UIElement.MouseLeave>
< beginstoryboard storyboard ={DynamicResource ScaleImageSmallStoryboard}>
< /Image.Triggers>
< / Image>
< / Button>
< ; window.resources>
< Style TargetType =Buttonx：Key =RoundConrner>
< setter property =Backgroundvalue =White >
< setter property =TextBlock.TextAlignmentvalue =Center>
< setter property =Template>
< setter.value>
< controltemplate targettype =Button>
< border cornerradius =80removed =Transparent> ;
BorderBrush =白色
BorderThickness =1,1,1,1 Margin =35,15,35,10
>
< contentpresenter x：name =contentPresenterxmlns：x =＃unknown>
ContentTemplate ={TemplateBinding ContentTemplate}
Content ={TemplateBinding Content}
HorizontalAlignment ={TemplateBinding HorizontalContentAlignment}
Margin ={TemplateBinding Padding}
VerticalAlignment ={TemplateBinding VerticalContentAlignment}/>
< br $>
< Style.Triggers>
< trigger property =Image.IsMouseOvervalue =真> < setter property =Image.Effectvalue ={DynamicResource MyEffect}>
< setter property =Image.Effectvalue ={DynamicResource MyEffect}>
< /Style.Triggers>
< / Style>
< dropshadoweffect x：key =MyEffectxmlns：x =＃未知>
ShadowDepth =0.5
颜色=白色
Opacity =100
BlurRadius =1/>
< storyboard x：key =ScaleImageLargeStoryboard>
< doubleanimation duration =0：0：0.2来自=1to =1.45autoreverse =false>
Storyboard.TargetName =ScaleImageStoryboard.TargetProperty =ScaleX/>
< ; doubleanimation duration =0：0：0.2from =1to =1.45autoreverse =False>
Storyboard.TargetName =ScaleImageStoryboard.TargetProperty =ScaleY/>
< storyboard x：key =ScaleImageSmallStoryboard>
< doubleanimation duration =0：0：0.2from =1.45to =1autoreverse =false>
Storyboard.TargetName =ScaleImageStoryboard.TargetProperty =ScaleX/>
< doubleanimation duration =0：0：0.2from =1.45to =1autoreverse =False>
Storyboard.TargetName =ScaleImageStoryboard.TargetProperty =ScaleY/>
我尝试了什么：
其实我不知道怎么样推进该问题...
hey guys,
in xaml, i use Window.Resources to write a Storyboard triggerd when the mouse is over my image and another when the mouse leave the image.
i need this animation to handle each image i will add to the window but i dont know how to do it. for now, assuming i am adding another image, the animation take the effect only on one image.
i named the storyboards "ScaleImageLargeStoryboard" and "ScaleImageSmallStoryboard". i am adding the code here:
<window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:properties="clr-namespace:EW.Properties"
x:Class="EW.MainWindow"
WindowStyle="None" ResizeMode="NoResize"
ShowInTaskbar="False" AllowsTransparency="True"
removed="Transparent" MouseDown="Window_MouseDown"
WindowStartupLocation="CenterScreen" MouseDoubleClick="Window_MouseDoubleClick">
<border borderbrush="White">
BorderThickness="1.5"
CornerRadius="10" RenderTransformOrigin="0.545,0.488"
Padding="3">
<border.background>
<lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#FF00F0FF" offset="0.003">
<gradientstop color="#FF2375F3" offset="1">
<stackpanel removed="Transparent">
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="515"
Width="748"
Margin="5.333,5.333,5.333,5" >
<Button x:Name="button"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="135"
Width="182"
Background="{x:Null}"
BorderThickness="1"
Style="{DynamicResource RoundConrner}"
RenderTransformOrigin="0,0" Margin="283,20">
<stackpanel>
<Image Source="Resources/AddAccount.png"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5, 0.5" MouseEnter="Image_MouseEnter">
<Image.RenderTransform>
<scaletransform x:name="ScaleImage" xmlns:x="#unknown">
</Image.RenderTransform>
<Image.Triggers>
<eventtrigger routedevent="UIElement.MouseEnter">
<beginstoryboard>
Storyboard="{DynamicResource ScaleImageLargeStoryboard}"/>
<eventtrigger routedevent="UIElement.MouseLeave">
<beginstoryboard storyboard="{DynamicResource ScaleImageSmallStoryboard}">
</Image.Triggers>
</Image>
</Button>
<window.resources>
<Style TargetType="Button" x:Key="RoundConrner">
<setter property="Background" value="White">
<setter property="TextBlock.TextAlignment" value="Center">
<setter property="Template">
<setter.value>
<controltemplate targettype="Button">
<border cornerradius="80" removed="Transparent">
BorderBrush="White"
BorderThickness="1,1,1,1" Margin="35,15,35,10"
>
<contentpresenter x:name="contentPresenter" xmlns:x="#unknown">
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Style.Triggers>
<trigger property="Image.IsMouseOver" value="True"> <setter property="Image.Effect" value="{DynamicResource MyEffect}">
<setter property="Image.Effect" value="{DynamicResource MyEffect}">
</Style.Triggers>
</Style>
<dropshadoweffect x:key="MyEffect" xmlns:x="#unknown">
ShadowDepth="0.5"
Color="White"
Opacity="100"
BlurRadius="1"/>
<storyboard x:key="ScaleImageLargeStoryboard">
<doubleanimation duration="0:0:0.2" from="1" to="1.45" autoreverse="false">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<doubleanimation duration="0:0:0.2" from="1" to="1.45" autoreverse="False">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>
<storyboard x:key="ScaleImageSmallStoryboard">
<doubleanimation duration="0:0:0.2" from="1.45" to="1" autoreverse="false">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<doubleanimation duration="0:0:0.2" from="1.45" to="1" autoreverse="False">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>
What I have tried:
actually i dont know how to move forward with that issue...
推荐答案
在你的
< Window.Resources>
//创建两个StoryBoard&给他们x：键即ImageEnterKey& otherOne ImageExitKey
< /Window.Resources>
稍后在代码中落后于你的ImageEnterEvent写此代码：
In Your
<Window.Resources>
//Create Two StoryBoard & give them x:key namely ImageEnterKey & otherOne ImageExitKey
</Window.Resources>
then later in code Behind on Your ImageEnterEvent write this code:
this.BeginStoryboard(FindResource("ImageEnterKey ") as Storyboard);
&代码在你的ImageExitEvent背后写下这段代码：
& in code Behind on Your ImageExitEvent write this code:
this.BeginStoryboard(FindResource("ImageExitKey") as Storyboard);
这篇关于如何使用一个故事板进行多重控制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
