イメージをマウスオーバーで表示するにはどうすればいいですか？ WPF

Question

Button私はWindow.Resourcesで画像を追加しています。 Window.Resources

<Window.Resources> 
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png" /> 
</Window.Resources> 

そしてButtonためのXAML、

<Button Name="Button1" Height="25" Grid.Column="0" 
     Grid.Row="0" Background="{StaticResource MyResource}" Click="Button1_OnClick" > stuff 
</Button> 

ため

XAMLは、私が取得しています問題は、ときにボタンのマウスオーバー画像が消えるということです。私はかなりのことを試みましたが、私はこの行動を止めることができません。私はまだあなたの上にいることを示す色の変化でマウスオーバーで通常のボタンとして機能するボタンが欲しいですが、私はこれについてどうやって行くのか分かりません。

編集：私がImageBrushと行ったreassonは、私がボタンに画像を適合させることができるようになっていました。

EDIT 2：通常のマウスオーバーのように色を変更するにはイメージが必要です。

Answer 1

OKので、それはまた、あなたが不透明度を減らすことによって、ボタンの上にある表示され、この方法が唯一のXAMLを必要として、私は、

これを考え出した私は、これが有効であることが見出さはるかにクリーンです。

<Style x:Key="OpacityButton" TargetType="Button"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="Cursor" Value="Hand" /> 
    <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border Name="border" BorderThickness="1" 
        Padding="2,2,2,2" BorderBrush="#FFEE82EE" 
        Background="{TemplateBinding Background}" 
        CornerRadius="5"> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center" /> 
       </Border> 
      <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Opacity" Value="0.5" /> 
        </Trigger> 
      </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

この次の方法では、XAMLの後ろのコードを使用し、ちょうどXAMLを使用するなど、きれいではありませんが、私はあなたの背後にあるコードを使用する可能性がある場合があるかもしれません推測していますので、私はこの方法を表示するつもりです同じように。

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Background="Transparent"> 
         <ContentPresenter /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
    </Setter> 
</Style> 

は、ボタンでIは場合

<Button Name="Button1" Style="{StaticResource TransparentStyle}" Grid.Column="0" Grid.Row="0" Height="50" Width="70" Click="Button1_OnClick" MouseEnter="Button1_OnMouseEnter" MouseLeave="Button1_OnMouseLeave"> 
    <StackPanel Orientation="Horizontal"> 
      <Image x:Name="image4" Stretch="UniformToFill" /> 
    </StackPanel> 
</Button> 

が次にコードビハインドで、

private void Button1_OnMouseEnter(object sender, MouseEventArgs e) 
    { 
     string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1211794133.png"; 
     image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource; 
    } 

private void Button1_OnMouseLeave(object sender, MouseEventArgs e) 
    { 
     string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1313321102.jpg"; 
     image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource; 
    } 

これは、2つの画像間の切り替え、画像ソースを変更するMouseEnterとMouseLeaveイベントを追加しましたマウスが入ったり出たりして、普通のマウスがあなたに与える効果が得られます。

Answer 2

これを試してみてください：

<Button Name="Button1" Height="25" Grid.Column="0" 
    Grid.Row="0" Click="Button1_OnClick"> 
     <Border Background="{StaticResource MyResource}"> 
      <TextBlock Text="stuff"/> 
     </Border> 
    </Button> 

Answer 3

ボタンControlTemplateを使用してMouseOverに基づいてBackgroundを設定することもできます。これは、すべてがxamlで行われているように、よりクリーンなものにします。

<Window.Resources> 
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png" /> 
    <ImageBrush x:Key="MyResource2" ImageSource="Pics\Button2.png" /> 
    <Style x:Key="MyButtonStyle" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Background" Value="{StaticResource MyResource}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
          BorderThickness="0" 
          Background="Transparent"> 
          <ContentPresenter HorizontalAlignment="Center" 
              VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" Value="{StaticResource MyResource}"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="False"> 
          <Setter Property="Background" Value="{StaticResource MyResource2}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
<Button Name="Button1" 
     Style="{StaticResource MyButtonStyle}" 
     Height="25" 
     Grid.Column="0" 
     Grid.Row="0" 
     Click="Button1_OnClick">stuff</Button>