6

I've got a button with an image in it and it's being styled by the following:

<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 is as follows:

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

The problem is that the width doesn't change when my mouse goes over. (Or at least - the width of the image does not...)

I believe there is a "scale" transform I can use to enlarge the button and all it's contents? how would I do that here...?

Thanks.

4

1 に答える 1

18

あなたのテンプレートはかなり最小限に見えますが、あなたが始めたばかりだと思いますが、これは、幅をアニメーション化するのではなく、ScaleTransform を使い始めるのに役立ちます。

ScaleTransformは、Button 自体またはテンプレートの Border のみの RenderTransform プロパティに適用できます。Scale (つまり、Translate、Rotate、Skew などの他の変換で構成される複合変換) 以外のことを行いたい場合、これを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 の Border に適用します。

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

次に、MouseEnter トリガーを変更してそのプロパティをターゲットにし、幅については 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

于 2010-04-09T00:07:47.003 に答える