1

如何创建在两个图像之间切换的 WPF 功能区按钮，以及图像之间的动画“擦除”过渡？我不能将两个图像都放在按钮内的网格中并依次为每个图像的不透明度设置动画（如此处所建议） ，因为我不能直接设置功能区的内容，只能设置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>
4

1 回答 1

1

您可以使用 aDrawingImage作为 ImageSource。然后您可以将 a 分配DrawingGroup为 a DrawingImage.Drawing。该绘图组可以包含两个ImageDrawing包装在自己的s 中的DrawingGroups，因此您可以从链接中应用该方法：

<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>

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

于 2013-09-08T14:08:54.850 回答