設置填充到一個LinearGradientBrush的按鈕點擊

Question

僅供參考，我用這MSDN教程：https://msdn.microsoft.com/en-us/library/bb613545(v=vs.100).aspx

我已經完成了教程，我只是想從360旋單擊EventTrigger動畫更改爲一個簡單的變化LinearGradientBrush。

My GradientStopCollections按照教程。一個是改變一個，我想在動畫中使用，當我按一下按鈕

<GradientStopCollection x:Key="MyGlassGradientStopsResource"> 
     <GradientStop Offset="0.2" Color="WhiteSmoke" /> 
     <GradientStop Offset="0.4" Color="Transparent" /> 
     <GradientStop Offset="0.5" Color="WhiteSmoke" /> 
     <GradientStop Offset="0.75" Color="Transparent" /> 
     <GradientStop Offset="0.9" Color="WhiteSmoke" /> 
     <GradientStop Offset="1" Color="Transparent" /> 
    </GradientStopCollection> 

    <GradientStopCollection x:Key="MyRedGlassGradientStopsResource"> 
     <GradientStop Offset="0.2" Color="IndianRed" /> 
     <GradientStop Offset="0.4" Color="Transparent" /> 
     <GradientStop Offset="0.5" Color="IndianRed" /> 
     <GradientStop Offset="0.75" Color="Transparent" /> 
     <GradientStop Offset="0.9" Color="IndianRed" /> 
     <GradientStop Offset="1" Color="Transparent" /> 
    </GradientStopCollection> 

    <LinearGradientBrush x:Key="MyGlassBrushResource" 
         GradientStops="{StaticResource MyGlassGradientStopsResource}" 
         Opacity="0.75" 
         StartPoint="0,0" 
         EndPoint="1,1" /> 

    <LinearGradientBrush x:Key="MyRedGlassBrushResource" 
         GradientStops="{StaticResource MyRedGlassGradientStopsResource}" 
         Opacity="0.75" 
         StartPoint="0,0" 
         EndPoint="1,1" /> 

按鈕本身。受影響的矩形是glassCube矩形。

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" /> 
     <Setter Property="Width" Value="90" /> 
     <Setter Property="Margin" Value="10" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Width="{TemplateBinding Width}" 
          Height="{TemplateBinding Height}" 
          ClipToBounds="True"> 

         <!-- Outer rectangle with rounded corners --> 
         <Rectangle x:Name="outerRectangle" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Fill="Transparent" 
            RadiusX="20" 
            RadiusY="20" 
            Stroke="{TemplateBinding Background}" 
            StrokeThickness="5" /> 

         <!-- Inner rectangle with rouded corners --> 
         <Rectangle x:Name="innerRectangle" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Fill="{TemplateBinding Background}" 
            RadiusX="20" 
            RadiusY="20" 
            Stroke="Transparent" 
            StrokeThickness="20" /> 

         <!-- Glass Rectangle --> 
         <Rectangle x:Name="glassCube" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Fill="{StaticResource MyGlassBrushResource}" 
            Opacity="0" 
            RadiusX="10" 
            RadiusY="10" 
            RenderTransformOrigin="0.5,0.5" 
            StrokeThickness="2"> 
          <Rectangle.Stroke> 
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
            <LinearGradientBrush.GradientStops> 
             <GradientStop Offset="0.0" Color="LightBlue" /> 
             <GradientStop Offset="1.0" Color="Gray" /> 
            </LinearGradientBrush.GradientStops> 
           </LinearGradientBrush> 
          </Rectangle.Stroke> 

          <!-- 
           These tranforms have no effect as they are declared here. 
           The reason the transforms are included is to be targets for animation 
           (See later) 
          --> 
          <Rectangle.RenderTransform> 
           <TransformGroup> 
            <ScaleTransform /> 
            <RotateTransform /> 
           </TransformGroup> 
          </Rectangle.RenderTransform> 

          <!-- A BevelBitmapEffect if applied to give the button a "Bevelled" look --> 
          <Rectangle.BitmapEffect> 
           <BevelBitmapEffect /> 
          </Rectangle.BitmapEffect> 

         </Rectangle> 


         <!-- Present content (text) of the button --> 
         <DockPanel Name="myContentPresenterDockPanel"> 
          <ContentPresenter x:Name="myContentPresenter" 
               Margin="20" 
               Content="{TemplateBinding Content}" 
               TextBlock.Foreground="Black" /> 
         </DockPanel> 

        </Grid> 
       </ControlTemplate> 
       <!---Snipped the triggers--> 
      </Setter.Value> 

這是我想使用的glassCube矩形的填充從MyGlassGradientStopsResource刷到MyGlassGradientStopsResource刷改變觸發。

<EventTrigger RoutedEvent="Button.Click"> 
<EventTrigger.Actions> 
    <BeginStoryboard> 
     <Storyboard> 
      <ColorAnimation Duration="0:0:0.5" 
          Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty="Rectangle.Fill" 
          To="{StaticResource MyRedGlassBrushResource}"/> 

     </Storyboard> 
    </BeginStoryboard> 
</EventTrigger.Actions> 

然而，試圖做到這一點給了我一個XAMLParseException。錯誤列表中的錯誤顯示爲「System.Windows.Media.LinearGradientBrush」類型的對象不能應用於期望類型爲「System.Nullable`1 [[System.Windows.Media.Color，PresentationCore ，Version = 4.0.0.0，Culture = neutral，PublicKeyToken = 31bf3856ad364e35]]「。

任何想法我可能做錯了什麼？我試圖找出如何在EventTrigger中將填充更改爲不同的LinearGradientBrush，但無濟於事。我可能只是吮​​吸我的搜索字詞，或者搜索一般。任何幫助非常感謝

Answer 1

我做了一些修改你的風格。另外，我修復了你的Storyboard。

它現在應該正常工作。

<Style TargetType="{x:Type Button}"> 
      <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" /> 
      <Setter Property="Width" Value="90" /> 
      <Setter Property="Margin" Value="10" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True"> 
          <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" RadiusX="20" RadiusY="20" Stroke="{TemplateBinding Background}" StrokeThickness="5" /> 
          <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" Stroke="Transparent" StrokeThickness="20" /> 
          <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="1" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" StrokeThickness="2"> 
           <Rectangle.Style> 
            <Style TargetType="Rectangle"> 
             <Setter Property="Fill" Value="{StaticResource MyGlassBrushResource}"></Setter> 
            </Style> 
           </Rectangle.Style> 
           <Rectangle.Stroke> 
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
             <LinearGradientBrush.GradientStops> 
              <GradientStop Offset="0.0" Color="LightBlue" /> 
              <GradientStop Offset="1.0" Color="Gray" /> 
             </LinearGradientBrush.GradientStops> 
            </LinearGradientBrush> 
           </Rectangle.Stroke> 
           <Rectangle.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform /> 
             <RotateTransform /> 
            </TransformGroup> 
           </Rectangle.RenderTransform> 

           <!-- A BevelBitmapEffect if applied to give the button a "Bevelled" look --> 
           <Rectangle.BitmapEffect> 
            <BevelBitmapEffect /> 
           </Rectangle.BitmapEffect> 

          </Rectangle> 


          <!-- Present content (text) of the button --> 
          <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="Center"> 
           <ContentPresenter x:Name="myContentPresenter" Content="{TemplateBinding Content}" TextBlock.Foreground="Black" /> 
          </DockPanel> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <EventTrigger RoutedEvent="Button.Click"> 
           <EventTrigger.Actions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="glassCube" Storyboard.TargetProperty="Fill" Duration="0:0:0.5" BeginTime="0"> 
               <ObjectAnimationUsingKeyFrames.KeyFrames> 
                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource MyRedGlassBrushResource}" /> 
               </ObjectAnimationUsingKeyFrames.KeyFrames> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger.Actions> 
          </EventTrigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 

       </Setter.Value> 

      </Setter> 
     </Style> 

注意

您不能設置畫筆的ColorAnimation。改爲使用ObjectAnimationUsingKeyFrames。如果你仍然需要一個BrushAnimation，看看here