使用样式设置嵌套子级属性的动画[WPF]

sulc1iza 于 2023-06-24 发布在其他

关注(0)|答案(2)|浏览(132)

我有一个按钮里面有图像。图像的源只是一个SVG，我已经转换成XAML代码。我如何使SVG的颜色动画化。
我想创建一个样式，改变我可以用在所有按钮与SVG图像的图像的颜色。
下面是按钮的代码：

<Button Background="Transparent"
                                BorderThickness="0"
                                Style="{StaticResource VideoControl}">
                            <Image>
                                <Image.Source>
                                    <DrawingImage>
                                        <DrawingImage.Drawing>
                                            <DrawingGroup ClipGeometry="M0,0 V29 H26 V0 H0 Z">
                                                <DrawingGroup.Children>
                                                    <GeometryDrawing Brush="White" Geometry="F1 M26,29z M0,0z M24,11.0359C26.6667,12.5755,26.6667,16.4245,24,17.9641L6.75,27.9234C4.08334,29.463,0.75,27.5385,0.75,24.4593L0.75,4.54071C0.75,1.46151,4.08333,-0.462994,6.75,1.07661L24,11.0359z" />
                                                </DrawingGroup.Children>
                                            </DrawingGroup>
                                        </DrawingImage.Drawing>
                                    </DrawingImage>
                                </Image.Source>
                            </Image>
                        </Button>

以下是我的尝试：

<Style TargetType="Button" x:Key="VideoControl">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>

            <!--This is done to prevent the Window Control Buttons from being focused-->
            <Setter Property="Focusable" Value="False"/>

            <!--This overrides the default behaviour of the button when hovering over it-->
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                                Padding="0"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <!--Animations-->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetProperty=""
                                    To="#F0AD2B"
                                    Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>

如你所见我试着摆弄周围的Storyboard.TargetProperty，但我无法达到bursh的颜色的图像源。

wpf

来源：https://stackoverflow.com/questions/76512453/animating-nested-childrens-properties-using-a-style-wpf

2条答案

按热度按时间

9w11ddsr1#

您可以将GeometryDrawing的笔刷绑定到Button的Foreground属性

<GeometryDrawing
    Brush="{Binding Foreground,
            RelativeSource={RelativeSource AncestorType=Button}}"
    .../>

并将其动画化

<Style TargetType="Button" x:Key="VideoControl">
    ...
    <Setter Property="Foreground">
        <Setter.Value>
            <SolidColorBrush Color="White"/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="#F0AD2B"
                            Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

还应该有一个<Trigger.ExitActions>停止BeginStoryboard或将动画变回白色。

赞(0）回复(0）举报 2023-06-24

q8l4jmvw2#

您应该将Brush绑定到Button的属性。下面的示例使用了Foreground属性。如果你想从Button.Foreground中分离图像的颜色，你应该扩展Button并创建一个ImageButton，定义例如：ImageForeground和ImageBackground属性，您可以改为绑定到这些属性。
然后使用EventTrigger在MouseEnter（启动动画）和MouseLeave（使用StopStoryboard停止动画或使用BeginStoryboard还原动画）上设置动画。ColorAnimation目标是Button.Foreground.Color属性（SolidColorBrush.Color属性）。

<!-- Control the image color by setting the Foreground property -->
<Button Background="Transparent"
        Foreground="OrangeRed"
        BorderThickness="0">

  <!-- Dynamic content -->
  <Image>
    <Image.Source>
      <DrawingImage>
        <DrawingImage.Drawing>
          <DrawingGroup ClipGeometry="M0,0 V29 H26 V0 H0 Z">
            <DrawingGroup.Children>
              <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
                               Geometry="F1 M26,29z M0,0z M24,11.0359C26.6667,12.5755,26.6667,16.4245,24,17.9641L6.75,27.9234C4.08334,29.463,0.75,27.5385,0.75,24.4593L0.75,4.54071C0.75,1.46151,4.08333,-0.462994,6.75,1.07661L24,11.0359z" />
            </DrawingGroup.Children>
          </DrawingGroup>
        </DrawingImage.Drawing>
      </DrawingImage>
    </Image.Source>
  </Image>

  <Button.Style>

    <!-- Reusable Style -->
    <Style TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Border Name="border"
                    Padding="0"
                    Background="{TemplateBinding Background}">
              <ContentPresenter HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
            </Border>

            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard x:Name="MouseOverAnimation">
                  <Storyboard>
                    <ColorAnimation Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)"
                                    To="#F0AD2B"
                                    Duration="0:0:0.2" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>

              <EventTrigger RoutedEvent="MouseLeave">
                <StopStoryboard BeginStoryboardName="MouseOverAnimation" />
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Button.Style>
</Button>

赞(0）回复(0）举报 2023-06-24

我来回答

使用样式设置嵌套子级属性的动画[WPF]

2条答案

相关问题

热门标签

最新问答