Question

如何在两个图像之间切换创建WPF功能区按钮，并使用动画＆＃34;擦除＆＃34;图像之间的过渡？我不能将这两个图像放在按钮内的网格内，并依次设置每个图像的不透明度（如建议的here），因为我无法直接设置功能区的内容，只有LargeImageSource / SmallImageSource和Label属性。

更新

我尝试了BorisB。的建议以及上面链接中的动画，但现在没有图像显示在功能区按钮中。删除动画，不透明蒙版和多个图像，并保留以下代码也根本不显示图像。

<RibbonToggleButton Label="Dashboard" Name="btnDashboard" IsChecked="True">
  <RibbonToggleButton.LargeImageSource>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <ImageDrawing ImageSource="/Icons/Dashboard.png" />
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </RibbonToggleButton.LargeImageSource>
</RibbonToggleButton>

Answer 1

您可以使用DrawingImage作为ImageSource。然后，您可以将DrawingGroup指定为DrawingImage.Drawing。该绘图组可以包含两个ImageDrawing包裹在他们自己的DrawingGroup中，因此您可以从链接中应用该方法：

<Grid>
    <Ribbon>
        <RibbonTab x:Name="HomeTab" Header="Home">
            <RibbonGroup x:Name="Group1" Header="Group1">
                <RibbonButton x:Name="Button1" Label="Button1">
                    <RibbonButton.LargeImageSource>
                        <DrawingImage>
                            <DrawingImage.Drawing>
                                <DrawingGroup>
                                    <DrawingGroup>
                                        <ImageDrawing Rect="0, 0, 32, 32" ImageSource=ImageOne.png"/>
                                    </DrawingGroup>
                                    <DrawingGroup>
                                        <ImageDrawing Rect="0, 0, 32, 32" ImageSource="ImageTwo.png"/>
                                        <DrawingGroup.OpacityMask>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
                                                <GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
                                            </LinearGradientBrush>
                                        </DrawingGroup.OpacityMask>
                                    </DrawingGroup>
                                </DrawingGroup>
                            </DrawingImage.Drawing>
                        </DrawingImage>
                    </RibbonButton.LargeImageSource>
                </RibbonButton>
            </RibbonGroup>
        </RibbonTab>
    </Ribbon>
</Grid>
<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="TransparentStop" 
                         Storyboard.TargetProperty="Offset" By="1"  Duration="0:0:2"   />
                    <DoubleAnimation Storyboard.TargetName="BlackStop" 
                         Storyboard.TargetProperty="Offset" By="1" Duration="0:0:2" 
                         BeginTime="0:0:0.05" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

使用包装DrawingGroups，因此您可以使用OpacityMask，这对效果至关重要。

功能区按钮上的图像过渡动画

1 个答案: