「ズーム」を実行するためにボタン上のXAML（ControlTemplate内）のスケール変換

Question

画像が入ったボタンがあり、次のようにスタイルが整っています。

<ControlTemplate x:Key="IconButton" TargetType="Button">
            <Border>
                <ContentPresenter Height="80" Width="80" />
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Opacity">
                            <DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" />
                            <DoubleAnimation From="0.5" To="1" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Width">
                            <DoubleAnimation From="80" To="95" Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

ボタンは次のとおりです。

            <Button Template="{StaticResource IconButton}" Name="btnExit">
                <Image Source="Images/Exit.png" />
            </Button>

問題は、マウスが渡ったときに幅が変わらないことです。 （または少なくとも - 画像の幅はそうではありません...）

ボタンとそのすべての内容を拡大するために使用できる「スケール」変革があると思いますか？ここでどうやってそれをしますか...？

ありがとう。

Answer 1

あなたのテンプレートはかなり最小限であるように見えますが、私はあなたの唯一のことを始めたばかりであると仮定していますが、これは幅をアニメーション化するのではなく、Scaletransformを使用することを始めるのに役立ちます。

scaletransform に適用できます renderTransform ボタン自体のプロパティまたはテンプレートの境界のみ。これはaになる可能性があります TransformGroup 単なるスケール以上のことをしたい場合（つまり、翻訳、回転、ゆがんだなどの他のトランフォームで構成される複合変換）が、それをシンプルに保ち、例のために、次のようなものはボタンに単一のスカルトランフォーム値を適用します。

<Button Template="{StaticResource IconButton}" Name="btnExit">
    <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
    </Button.RenderTransform>
    <Image Source="Images/Exit.png" />
</Button>

または、これはcontroltemplateの境界に適用されます。

<ControlTemplate x:Key="IconButton" TargetType="Button">
    <Border Background="Blue" x:Name="render">
        <Border.RenderTransform>
            <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
        </Border.RenderTransform>
        <ContentPresenter Height="80" Width="80" />
    </Border>
    ...
    ...

次に、マウスエンタートリガーを変更してそのプロパティをターゲットにし、幅については、ScaletransformのScalexプロパティをターゲットにしたいと思うでしょう。次のストーリーボードでは、X方向にボタンを2.5回拡張します（追加 TargetName="render" に <Storyboard... ボタンとは対照的に、境界に変換を適用することを選択した場合）。

<EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
        <Storyboard TargetProperty="RenderTransform.ScaleX">
            <DoubleAnimation To="2.5" Duration="0:0:0.2" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

多くの変換を備えたTransformGroupを使用する場合、TargetProperty値を次のようなものに変更します RenderTransform.(TransformGroup.Children)[0].ScaleX Scaletransformがグループの最初の子であると仮定します。

これにより、必要なもので稼働して走るはずです。

Hth