WPF変更ボタンマウスを動かしたときの画像

Question

私はwpfを初めて使用しています。マウスのホバリング時にボタンの画像を変更しようとしています。

コードは次のとおりです。

<Button x:Name="SignlePlayerButton" Content="Button" HorizontalAlignment="Left" Margin="37,104,0,0" VerticalAlignment="Top" Width="150" Height="57" BorderThickness="0" Click="SignlePlayerButton_Click"> 
    <Button.Background> 
     <ImageBrush ImageSource="Design/singleplayer.jpg"/> 
    </Button.Background> 
</Button> 

私は、このXAMLコードに何を追加する必要がありますか？

Answer 1

これを試してください。それはあなたのために働くはずです。

<Window x:Class="testscroll.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:testscroll" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     Title="MainWindow" 
     Width="525" 
     Height="350" 
     mc:Ignorable="d"> 
    <Grid> 
     <Button x:Name="SignlePlayerButton" 
       Width="150" 
       Height="57" 
       Margin="37,104,0,0" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       BorderThickness="0" 
       Click="SignlePlayerButton_Click"> 
      <Button.Background> 
       <ImageBrush ImageSource="Design/singleplayer.jpg" /> 
      </Button.Background> 
      <ControlTemplate TargetType="Button"> 
       <Border Name="border" 
         Background="Transparent" 
         BorderThickness="0"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <ImageBrush ImageSource="/Design/SOMEOTHERIMAGE.jpg" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="False"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <ImageBrush ImageSource="/Design/singleplayer.jpg" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button> 
    </Grid> 
</Window> 

Answer 2

あなたのボタンのスタイルとして次のスタイルを設定してみてください。

<Style x:Key="ChangeContentOnMouseOver" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="False"> 
       <Setter Property="Content"> 
        <Setter.Value> 
         <Image Source="Images/RedButtonBackGround.jpg"/> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Content"> 
        <Setter.Value> 
         <Image Source="Images/Koala.jpg"/> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

小さな説明：あなたは、マウスを使ってボタンの上になります たびに、コンテンツ画像を切り替えられます。

更新＃1 - アニメーションでスタイル

<Style x:Key="ChangeContentOnMouseOverWithAnimationWhenPressed" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"> 
     <Setter Property="Background" Value="{StaticResource RedButtonBackGround}"/> 
     <Setter Property="Foreground" Value="Yellow"></Setter> 
     <Setter Property="Width" Value="50"></Setter> 
     <Setter Property="Height" Value="50"></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5"> 
         <Grid.RenderTransform> 
          <ScaleTransform></ScaleTransform> 
         </Grid.RenderTransform> 
         <Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1"/> 
         <Border x:Name="RectangleVisibleOnMouseMove" Opacity="0" CornerRadius="5" Background="{StaticResource KoalaImageBrushKey}" BorderThickness="1"/> 
         <Border x:Name="RectangleVisibleOnCklick" Opacity="0" CornerRadius="5" Background="Blue" BorderThickness="1"/> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <EventTrigger RoutedEvent="Button.MouseEnter"> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
         <EventTrigger RoutedEvent="Button.MouseLeave"> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
         <EventTrigger RoutedEvent="Button.PreviewMouseDown"> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.1" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
         <EventTrigger RoutedEvent="Button.PreviewMouseUp"> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
            Storyboard.TargetProperty="(FrameworkElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.1" /> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.0" /> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsPressed" Value="True"> 
       <Setter Property="Foreground" Value="White"></Setter> 
      </Trigger> 
      <Trigger Property="IsPressed" Value="False"> 
       <Setter Property="Foreground" Value="Yellow"></Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

押しアップデート＃1のための説明： ここではボタンコントロールを完全に再テンプレートで、あなたがを必要としますが、独自のコンテンツを定義することができますさらに、（通常のボタンのように）押したときにアニメートされます。アニメーションは、いくつかのパラメータを持つボタンのスケーリングです。

あなたはそれがどのように見えるかを確認することができます

よろしく。