XNA/XAML 鼠標懸停時動畫邊框顏色 (XNA/XAML Animate border color on mouseover)


問題描述

XNA/XAML 鼠標懸停時動畫邊框顏色 (XNA/XAML Animate border color on mouseover)

I am making an image gallery in XNA and XAML. I need to have images with borders and on mouseover I want to change the border color. I tried different things which didn't work. When the IMAGE is mouseOvered the animation to change the border color should be triggered. Here is my code:

 <Border Name="myBorder"
            BorderThickness="5"
            BorderBrush="White"
            Width="100"
            Height="100"
            Padding="0"
            Margin="15"
            CornerRadius="10">
        <Border.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="Image.IsMouseOver" Value="True">
                        <Setter Property="Border.BorderBrush" Value="Yellow"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
            <Image Name="myImage1" 
                   HorizontalAlignment="Center" 
                   Stretch="Fill" />
    </Border>

I also used EventTrigger and Storyboard with mo success. Is there someone who knows how to do this?


參考解法

方法 1:

Ok, I solved the problem thanks to this post

I should have removed the BorderBrush from the border definition. Now this works:

        <Border Name="myBorder"
            BorderThickness="5"
            Width="100"
            Height="100"
            Padding="0"
            Margin="15"
            CornerRadius="10">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <Trigger Property="Image.IsMouseOver" Value="True">
                        <Setter Property="Border.BorderBrush" Value="Yellow"/>
                    </Trigger>
                    <Trigger Property="Image.IsMouseOver" Value="False">
                        <Setter Property="Border.BorderBrush" Value="White"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Image Name="myImage1" HorizontalAlignment="Center" Stretch="Fill" />
    </Border>

(by mahsa.teimourikiamahsa.teimourikia)

參考文件

  1. XNA/XAML Animate border color on mouseover (CC BY-SA 3.0/4.0)

#animation #mouseover #storyboard #xna #xaml






相關問題

Iphone app PNG 序列動畫 - 如何在不崩潰的情況下以最佳方式使用 OPENgle (Iphone app PNG sequence animation - How to use OPENgle optimally without crashing)

jquery切換幻燈片和切換旋轉動畫 (jquery toggle slide and toggle rotation animate)

如何在三次貝塞爾方法上禁用 css3 過渡鼠標離開效果? (How to disable css3 transition mouseleave effect on cubic-bezier method?)

Android:故事書(動畫、聲音、圖片) (Android: Storybooks (animation, sounds, pictures))

JQuery 動畫凌亂 (JQuery Animations Messy)

拉斐爾對角變換對象和無限setIntervals (Raphael transform object diagonally and infinite setIntervals)

使用 mouseover 和 mouseout 時避免生澀的動畫 (Avoiding jerky animation when using mouseover and mouseout)

在 C 中復制 Spinrite 動畫效果 (Replicating Spinrite Animation Effect in C)

將樣式作為參數傳遞給 jquery animate (passing style as argument to jquery animate)

如何設置 UIButton 的圖像並隨後將其刪除(動畫) (How to setImage of a UIButton and subsequently remove it (animation))

單擊消息後的 MessageKit 動畫 (MessageKit animation after click on message)

連續貝塞爾動畫,不繼承變化時的緩動功能 (Continuous bezier animation without inheriting easing-function on change)







留言討論