1

イメージ間のアニメーション化された「ワイプ」トランジションを使用して、2 つのイメージを切り替える WPF リボン ボタンを作成するにはどうすればよいですか? ボタン内の aa グリッド内に両方の画像を配置し、各画像の不透明度を順番にアニメーション化することはできません (ここで提案されているように)。リボンのコンテンツを直接設定することはできず、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

DrawingImageを ImageSource として使用できます。DrawingGroup次に、を として割り当てることができますDrawingImage.Drawing。その描画グループImageDrawingには、独自DrawingGroupの にラップされた 2 つの を含めることができるため、リンクからアプローチを適用できます。

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

効果に不可欠な OpacityMask を使用できるように、ラッピングする DrawingGroups が使用されます。

于 2013-09-08T14:08:54.850 に答える