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

Wpf 单击按钮时将填充设置为LinearGradientBrush,wpf,xaml,Wpf,Xaml,作为参考,我使用此MSDN教程: 我已经完成了教程,我只是想将Click EventTrigger动画从360旋转更改为LinearGradientBrush的简单更改 我的GradientStopCollections符合教程的要求。一个是我单击按钮时希望在动画中使用的已更改的 <GradientStopCollection x:Key="MyGlassGradientStopsResource"> <GradientStop Offset="0.2" Col

作为参考,我使用此MSDN教程:

我已经完成了教程,我只是想将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>

这就是我试图使用的触发器,将玻璃立方体矩形的填充从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,但没有效果。我可能只是在搜索的措辞上很差劲,或者在搜索的总体上很差劲。非常感谢您的帮助

我对您的风格做了一些修改。还有,我修复了你的故事板

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

 <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。改为使用关键帧使用对象动画。如果您仍然需要一个
画笔动画
,请看一看

我已经测试过了,效果非常好,谢谢。标记已解决