none
WPF 改变按钮(或Image)大小(Animation) RRS feed

  • 问题

  • 背景:想实现一个动态导航栏

    有3个或3个以上的Button(或Image),初始状态其中一个Button比较大,当鼠标移动到另一个Button上时,大的按钮变小,鼠标
    移动到(MouseEnter)的按钮变大(这种变大的状态在鼠标离开时(MouseLeave)要保持住,直到鼠标移动到其他按钮上时才能缩小)。
    谢谢大家了。

    PS:类似于FishEye效果,可是又有点不同, FishEye效果是只要鼠标MouseLeave按钮就会缩小。
    2009年10月24日 11:56

答案

  • 楼主你好,

    -->初始状态其中一个Button比较大,当鼠标移动到另一个Button上时,大的按钮变小,鼠标
    移动到(MouseEnter)的按钮变大(这种变大的状态在鼠标离开时(MouseLeave)要保持住,直到鼠标移动到其他按钮上时才能缩小)。
    谢谢大家了。


    你用一个IsMouseOver属性触发器来做,把mouse移动到的button变大, 再加一个MouseEnter事件,判断当前哪一个button是最大的,在后台中使其变小。下面是一个trigger的例子:


        <Style TargetType="Button">

                        <Setter Property="RenderTransform">

                            <Setter.Value>

                                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTransform" />

                            </Setter.Value>

                        </Setter>

                        <Style.Triggers>

                            <Trigger Property="IsMouseOver" Value="True" >

                                <Setter Property="RenderTransform">

                                    <Setter.Value>

                                        <ScaleTransform ScaleX="1" ScaleY="2" />

                                    </Setter.Value>

                                </Setter>

                            </Trigger>

                        </Style.Triggers>

     </Style>


    谢谢。


    Jim Zhou -MSFT
    • 已标记为答案 Gunag 2009年10月27日 15:11
    2009年10月27日 8:35
    版主

全部回复

  • 描述不太清楚
    不过你的需求 可以用blend设计工具容易做到 你自己尝试一下

    2009年10月26日 7:24
  • 楼主你好,

    -->初始状态其中一个Button比较大,当鼠标移动到另一个Button上时,大的按钮变小,鼠标
    移动到(MouseEnter)的按钮变大(这种变大的状态在鼠标离开时(MouseLeave)要保持住,直到鼠标移动到其他按钮上时才能缩小)。
    谢谢大家了。


    你用一个IsMouseOver属性触发器来做,把mouse移动到的button变大, 再加一个MouseEnter事件,判断当前哪一个button是最大的,在后台中使其变小。下面是一个trigger的例子:


        <Style TargetType="Button">

                        <Setter Property="RenderTransform">

                            <Setter.Value>

                                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTransform" />

                            </Setter.Value>

                        </Setter>

                        <Style.Triggers>

                            <Trigger Property="IsMouseOver" Value="True" >

                                <Setter Property="RenderTransform">

                                    <Setter.Value>

                                        <ScaleTransform ScaleX="1" ScaleY="2" />

                                    </Setter.Value>

                                </Setter>

                            </Trigger>

                        </Style.Triggers>

     </Style>


    谢谢。


    Jim Zhou -MSFT
    • 已标记为答案 Gunag 2009年10月27日 15:11
    2009年10月27日 8:35
    版主