模板與效果的圖像，並觸發

您好我有WPF XAML代碼如下所示模板與效果的圖像，並觸發

<Image Source="/MyProject;component/Resources/Icons/button_cancel_256.png" 
    DockPanel.Dock="Right" 
    Margin="0,1,10,1" 
    RenderTransformOrigin="0.5,0.5" 
    > 
<Image.RenderTransform> 
    <ScaleTransform x:Name="ImageScaleTransform" 
        ScaleX="1" ScaleY="1" 
        /> 
</Image.RenderTransform> 
    <Image.Effect> 
     <DropShadowEffect x:Name="ImageGlowEffect" 
      BlurRadius="20" 
      ShadowDepth="0" 
      Color="White"> 
     </DropShadowEffect> 
    </Image.Effect> 
<Image.Triggers> 
    <EventTrigger RoutedEvent="Image.MouseEnter"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <ColorAnimation 
         Storyboard.TargetName="ImageGlowEffect" 
         Storyboard.TargetProperty="Color" 
         From="White" 
         To="Red" 
         Duration="0:0:1"> 
        </ColorAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="Image.MouseLeave"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <ColorAnimation 
         Storyboard.TargetName="ImageGlowEffect" 
         Storyboard.TargetProperty="Color" 
         From="Red" 
         To="White" 
         Duration="0:0:1"> 
        </ColorAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="Image.MouseLeftButtonDown"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="ImageScaleTransform" 
         Storyboard.TargetProperty="ScaleX" 
         From="1" 
         To=".9" 
         Duration="0:0:0.1"> 
        </DoubleAnimation> 
        <DoubleAnimation 
         Storyboard.TargetName="ImageScaleTransform" 
         Storyboard.TargetProperty="ScaleY" 
         From="1" 
         To=".9" 
         Duration="0:0:0.1"> 
        </DoubleAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 

    <EventTrigger RoutedEvent="Image.MouseLeftButtonUp"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="ImageScaleTransform" 
         Storyboard.TargetProperty="ScaleX" 
         From=".9" 
         To="1" 
         Duration="0:0:0.1"> 
        </DoubleAnimation> 
        <DoubleAnimation 
         Storyboard.TargetName="ImageScaleTransform" 
         Storyboard.TargetProperty="ScaleY" 
         From=".9" 
         To="1" 
         Duration="0:0:0.1"> 
        </DoubleAnimation> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
</Image.Triggers>

現在我想創建一個樣式或模板，這樣我可以將此其他圖像，其中i可以指定顏色。

請幫助我在各種嘗試後都沒能做到。

來源

2012-03-14 VinayChoudhary99

什麼exatcly是問題？您可能已經爲所有這些設置創建了樣式 – EvAlex 2012-03-14 06:43:22

我需要將這些觸發器用於許多圖像，並且我需要某種可應用於所有這些模板的樣式 – VinayChoudhary99 2012-03-14 07:42:00

添加到什麼EvAlex貼，你可以動態地改變特定的顏色到圖像，然後使用DynamicResource和Opacity雙動畫（代替ColorAnimation的），如下...

<Style TargetType="{x:Type Image}" 
      x:Key="DropShadowImageStyle"> 
     <Setter Property="RenderTransform"> 
      <Setter.Value> 
       <ScaleTransform 
        ScaleX="1" 
        ScaleY="1" /> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Effect"> 
      <Setter.Value> 
       <DropShadowEffect 
        BlurRadius="20" 
        ShadowDepth="0" 
        Opacity="0" 
        Color="{DynamicResource MyToColor}"> 
       </DropShadowEffect> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <EventTrigger RoutedEvent="Image.MouseEnter"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation 
           Storyboard.TargetProperty="Effect.Opacity" 
           From="0" 
           To="1"          
           Duration="0:0:1"> 
          </DoubleAnimation> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="Image.MouseLeave"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation 
           Storyboard.TargetProperty="Effect.Opacity" 
           From="1" 
           To="0" 
           Duration="0:0:1"> 
          </DoubleAnimation> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="Image.MouseLeftButtonDown"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation 
           Storyboard.TargetProperty="RenderTransform.ScaleX" 
           From="1" 
           To=".9" 
           Duration="0:0:0.1"> 
          </DoubleAnimation> 
          <DoubleAnimation 
           Storyboard.TargetProperty="RenderTransform.ScaleY" 
           From="1" 
           To=".9" 
           Duration="0:0:0.1"> 
          </DoubleAnimation> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 

      <EventTrigger RoutedEvent="Image.MouseLeftButtonUp"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation 
           Storyboard.TargetProperty="RenderTransform.ScaleX" 
           From=".9" 
           To="1" 
           Duration="0:0:0.1"> 
          </DoubleAnimation> 
          <DoubleAnimation 
           Storyboard.TargetProperty="RenderTransform.ScaleY" 
           From=".9" 
           To="1" 
           Duration="0:0:0.1"> 
          </DoubleAnimation> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
     </Style.Triggers> 
    </Style> 

<StackPanel Orientation="Horizontal"> 
    <Image Source="MyImage1.JPG" 
      Width="50" Height="50" Margin="5" 
      Style="{StaticResource DropShadowImageStyle}"> 
     <Image.Resources> 
      <Color x:Key="MyToColor">Red</Color> 
     </Image.Resources> 
    </Image> 
    <Image Source="MyImage2.JPG" 
      Width="50" Height="50" Margin="5" 
      Style="{StaticResource DropShadowImageStyle}"> 
     <Image.Resources> 
      <Color x:Key="MyToColor">Blue</Color> 
     </Image.Resources> 
    </Image> 
    <Image Source="MyImage3.JPG" 
      Width="50" Height="50" Margin="5" 
      Style="{StaticResource DropShadowImageStyle}"> 
     <Image.Resources> 
      <Color x:Key="MyToColor">Orange</Color> 
     </Image.Resources> 
    </Image> 
</StackPanel>

來源

2012-03-14 09:37:58

這裏的風格 - 效果很好。問題出在Storyboard.TargetName屬性。我剛剛刪除它並修改了Storyboard.TargetProperty。這就是爲什麼我在評論中問你什麼是你的問題。如果您從一開始就指定了其他信息，那對我來說會容易得多。

<Style TargetType="Image"> 
    <Setter Property="Margin" Value="0,1,10,1"/> 
    <Setter Property="DockPanel.Dock" Value="Right"/> 
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> 
    <Setter Property="RenderTransform"> 
     <Setter.Value> 
      <ScaleTransform ScaleX="1" ScaleY="1" /> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Effect"> 
     <Setter.Value> 
      <DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="White"/> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <EventTrigger RoutedEvent="Image.MouseEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetProperty="Effect.Color" 
          From="White" 
          To="Red" 
          Duration="0:0:1"> 
         </ColorAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 

     <EventTrigger RoutedEvent="Image.MouseLeave"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetProperty="Effect.Color" 
          From="Red" 
          To="White" 
          Duration="0:0:1"> 
         </ColorAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="Image.MouseLeftButtonDown"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Storyboard.TargetProperty="RenderTransform.ScaleX" 
          From="1" 
          To=".9" 
          Duration="0:0:0.1"> 
         </DoubleAnimation> 
         <DoubleAnimation 
          Storyboard.TargetProperty="RenderTransform.ScaleY" 
          From="1" 
          To=".9" 
          Duration="0:0:0.1"> 
         </DoubleAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 

     <EventTrigger RoutedEvent="Image.MouseLeftButtonUp"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Storyboard.TargetProperty="RenderTransform.ScaleX" 
          From=".9" 
          To="1" 
          Duration="0:0:0.1"> 
         </DoubleAnimation> 
         <DoubleAnimation 
          Storyboard.TargetProperty="RenderTransform.ScaleY" 
          From=".9" 
          To="1" 
          Duration="0:0:0.1"> 
         </DoubleAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Style.Triggers> 
</Style>

來源

2012-03-14 08:51:03 EvAlex

ThankYou！它正在尋找什麼。你也可以請告訴如何傳遞顏色的彩色動畫和效果。 – VinayChoudhary99 2012-03-14 09:17:01

進入風格？我認爲這是不可能的。我會考慮創建自定義控件，爲這些設置註冊DependencyProperties，使其成爲默認模板，包括圖像和樣式。然後它可以在那裏使用TemplateBindings。 – EvAlex 2012-03-14 09:25:36

@Vinay/EvAlex，可以實現您在以下解決方案中指定的內容... – 2012-03-14 09:39:13

模板與效果的圖像，並觸發

回答

相關問題