マウスオーバで色を変える


MouseEnter、Leaveで色が変わるボタンのサンプル


Window1.xaml

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

        <Canvas Width="120" Height="44">
            
            <!--Storyboardの定義-->
            <Canvas.Resources>
                
                <!--onMouseEnterの動作を定義-->
                <Storyboard x:Key="onMouseEnter" x:Name="mouseEnterHoge">
                    <ColorAnimation To="Gray"
                        Storyboard.TargetName="brush"
                        Storyboard.TargetProperty="Color"
                        SpeedRatio="10"
                        />
                </Storyboard>
                
                <!--onMouseLeaveの動作を定義-->
                <Storyboard x:Key="onMouseLeave" x:Name="mouseLeaveHoge">
                    <ColorAnimation To="Red"
                        Storyboard.TargetName="brush"
                        Storyboard.TargetProperty="Color"
                        SpeedRatio="10"
                        />
                </Storyboard>
                
            </Canvas.Resources>

            <!--ボタンの定義-->
            <Rectangle x:Name="rectButton" Width="100" Height="40" RadiusX="15" RadiusY="15" Stroke="Gray">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="White" Offset="0" />
                        <GradientStop x:Name="brush" Color="Red" Offset="0.5" />
                        <GradientStop Color="White" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
      
            <!--イベントトリガの定義-->
            <Canvas.Triggers>
                <!--Mouse.MouseEnterイベントの定義-->
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <!--MouseEnterで実行されるStoryboardをマッピング-->
                    <BeginStoryboard x:Name="Triger_onMouseEnter" Storyboard="{DynamicResource onMouseEnter}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <!--MouseLeaveで実行されるStoryboardをマッピング-->
                    <BeginStoryboard x:Name="Triger_onMouseLeave" Storyboard="{DynamicResource onMouseLeave}"/>
                </EventTrigger>
            </Canvas.Triggers>
            
        </Canvas>

        
    </Grid>
</Window>

イベントを実現するためのタグ、属性については以下のとおり。


・Storyboardタグ
x:Key・・・イベントトリガとのマッピングで使用する値
x:Name・・・任意。画面内で一意の値とする
ColorAnimation・・・アニメーションの種類(.NetFrameworkに準拠)
Storyboard.TargetName・・・ターゲットとなるオブジェクトを指定
Storyboard.TargetProperty・・・ターゲットとなるプロパティを指定


・EventTriggerタグ
RoutedEvent・・・イベントの種類(.NetFrameworkに準拠)


・BeginStoryboardタグ
x:Name・・・任意。画面内で一意の値とする
Storyboard・・・Storyboardタグで定義したx:Keyを指定



・動作確認環境
Visual Stadio2008 Express Edition
.NetFrameWork 3.5



↓イベントについてはこちらを参照

http://www.microsoft.com/japan/msdn/windowsvista/wpf/cookingguide/vol3.aspx