カスタムボタンがIsMouseOverに反応しない

Question

ボタンの中央に大きなアイコンを表示するために、コントロールのIconButton（Buttonから派生）を作成しました。すべてがうまくいくように見えますが、トリガーします。マウスが私のコントロールの上にあるとき、背景が変わるはずです。背後

コード：

public class IconButton : System.Windows.Controls.Button 
{ 
    public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(System.Windows.Media.ImageSource), typeof(IconButton)); 

    public System.Windows.Media.ImageSource Image 
    { 
     get 
     { 
      return (System.Windows.Media.ImageSource)GetValue(ImageProperty); 
     } 
     set 
     { 
      SetValue(ImageProperty, value); 
     } 
    } 

    public IconButton() 
    { 
     SetResourceReference(StyleProperty, "IconsStyle"); 
    } 
} 

XAML：

<Style x:Key="IconsStyle" TargetType="local:IconButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:IconButton"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" 
         CornerRadius="10" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         MaxHeight="{TemplateBinding MaxHeight}" 
         MaxWidth="{TemplateBinding MaxWidth}" 
         MinHeight="{TemplateBinding MinHeight}" 
         MinWidth="{TemplateBinding MinWidth}" 
         Height="{TemplateBinding Height}" 
         Width="{TemplateBinding Width}" 
         HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
        <Border.Background> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,2"> 
          <GradientStop Offset="0" Color="Green"/> 
          <GradientStop Offset="2" Color="White"/> 
         </LinearGradientBrush> 
        </Border.Background> 
        <Grid VerticalAlignment="Stretch" 
          HorizontalAlignment="Stretch" 
          Background="Transparent"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="2*"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <Image 
          VerticalAlignment="Center" 
          HorizontalAlignment="Center" 
          Source="{TemplateBinding Image}"/> 
         <ContentControl 
          VerticalAlignment="Bottom" 
          Grid.Row="1" 
          Padding="0" 
          FontSize="12" 
          HorizontalAlignment="Center" 
          HorizontalContentAlignment="Center" 
          VerticalContentAlignment="Center" 
          Content="{TemplateBinding Content}" 
          Background="Transparent"/> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
            <GradientStop Offset="-1" Color="Green"/> 
            <GradientStop Offset="0.5" Color="White"/> 
            <GradientStop Offset="2" Color="Green"/> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

そのコードと何が問題なのですか？なぜマウスを動かしても背景が変わらないのですか？

Answer 1

Backgroundプロパティが使用されることはありません。

以下のようにスタイルを変更してください。

Background="{TemplateBinding Background}" 

を境界コントロールに割り当て、スタイルセッターによってデフォルトの背景を定義します。

<Style x:Key="IconsStyle" TargetType="local:IconButton"> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,2"> 
       <GradientStop Offset="0" Color="Green"/> 
       <GradientStop Offset="2" Color="White"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:IconButton"> 
       <Border Background="{TemplateBinding Background}" ... > 
        ... 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
            <GradientStop Offset="-1" Color="Green"/> 
            <GradientStop Offset="0.5" Color="White"/> 
            <GradientStop Offset="2" Color="Green"/> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

ContentControlに名前を付けて、このようなプロパティと要素名を設定してみてください。これで問題は解決します。あなたはIsMouseOverトリガーに設定されている

<ContentControl x:Name="ContentControl1" 
    VerticalAlignment="Bottom" 
    Grid.Row="1" 
    Padding="0" 
    FontSize="12" 
    HorizontalAlignment="Center" 
    HorizontalContentAlignment="Center" 
    VerticalContentAlignment="Center" 
    Content="{TemplateBinding Content}" 
    Background="Transparent"/> 
</Grid> 
</Border> 
<ControlTemplate.Triggers> 
<Trigger Property="IsMouseOver" Value="True"> 
<Setter TargetName="ContentControl1" Property="Background" > 
    <Setter.Value> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Offset="-1" Color="Green"/> 
      <GradientStop Offset="0.5" Color="White"/> 
      <GradientStop Offset="2" Color="Green"/> 
     </LinearGradientBrush> 
    </Setter.Value> 
</Setter> 
</Trigger> 
</ControlTemplate.Triggers>