ボタン上の背景イメージがマウスの上に消えます

Question

私のWPFウィンドウアプリケーションでは、マウスの上にマウスを置くと、ボタンの背景イメージが消え、ボタンがイメージを持たないかのように表示されます。私が望むのは、マウスがボタン上にあるとき、またはボタンがクリックされたときに、画像はボタンに表示されなければならず、消えてはいけないということです。

助けてください。

ありがとうございました

Answer 1

あなたには何が起こっているのが普通です。ボタンを作成すると、ボタンを変更または上書きしない場合に備えて、デフォルトのプロパティが使用されます。

この場合、ボタンを作成すると、Backgroundプロパティがオーバーライドされますが、ボタンの通常の状態にのみ適用されます。ホバリング時にもバックグラウンドを変更したい場合は、ボタンに指示する必要があります。この目的のために

は、私はあなたがスタイルを使用してボタンテンプレートを上書きすることをお勧め、次のように：この場合

<Window x:Class="ButtonTest.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <ImageBrush x:Key="ButtonImage" ImageSource="/ButtonTest;component/Resources/ok.png"></ImageBrush> 
    <Style TargetType="Button"> 
     <Setter Property="Background" Value="{StaticResource ButtonImage}"></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
        Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Foreground" Value="Blue" /> 
          <Setter Property="Cursor" Value="Hand" /> 
          <!-- If we don't tell the background to change on hover, it will remain the same --> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
<Grid> 
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> 
</Grid> 
</Window> 

、このスタイルは、すべてのボタンに適用されます。あなたは、あなたのスタイルにx:Keyを追加することによって、スタイルを適用するためにどのボタンを指定してから、ボタンでそれを指定することができます。

<Style TargetType="Button" x:Key="ButtonStyled"> 

..... 

<Button Style="{StaticResource ButtonStyled}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> 

Answer 2

複雑すぎる私は相手に少し遅れていますが、あなたがこのすべてを行っています。

あなたがしなければならないのは、コンテンツと背景を設定されている：

<Button x:Name="YouTubeButton" Width="148" Height="76" BorderBrush="Black" 
    Click="YouTubeButton_Click" Margin="112,20,112,0" 
    MouseEnter="Button_OnMouseEnter" MouseLeave="Button_MouseLeave"> 
    <Button.Content> 
     <Image Source="Images/YouTube.png" /> 
    </Button.Content> 
    <Button.Background> 
     <ImageBrush ImageSource="Images/YouTube.png" /> 
    </Button.Background> 
</Button> 

(Optional - makes the mouse behave like a hand clicking a link) 
#region Button_MouseLeave(object sender, MouseEventArgs e) 
/// <summary> 
/// This event is fired when the mouse leaves a button 
/// </summary> 
private void Button_MouseLeave(object sender, MouseEventArgs e) 
{ 
    // Change the cursor back to default 
    Cursor = null; 
} 
#endregion 

#region Button_OnMouseEnter(object sender, EventArgs e) 
/// <summary> 
/// This event is fired when the mouse hovers over a button 
/// </summary> 
public void Button_OnMouseEnter(object sender, EventArgs e) 
{ 
    // Change the cursor to a Hand pointer 
    Cursor = Cursors.Hand; 
} 
#endregion