在按钮单击时将填充设置为 LinearGradientBrush

Question

作为参考，我正在使用这个 MSDN 教程：https://msdn.microsoft.com/en-us/library/bb613545(v=vs.100).aspx

我已经完成了教程，我只是想将 Click EventTrigger 动画从 360 度旋转更改为 LinearGradientBrush 的简单更改。

按照教程，我的 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 中将 Fill 更改为不同的 LinearGradientBrush，但无济于事。我可能只是在搜索措辞或一般搜索方面很糟糕。非常感谢任何帮助

Answer 1

我对你的风格做了一些修改。另外，我修复了你的故事板。

它现在应该可以正常工作了。

 <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