在按钮上将Fill设置为LinearGradientBrush单击

时间:2016-07-24 07:22:14

标签: wpf xaml

供参考,我正在使用此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,但无济于事。我可能只是在搜索我的搜索或一般搜索。非常感谢任何帮助

1 个答案:

答案 0 :(得分: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