自定義按鈕不對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屬性，你是在IsMouseOver觸發設置。

您應該修改樣式，如下所示。它增加了一個

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一個名稱，然後嘗試設置屬性和元素名稱。這應該可以解決您的問題。從未使用過

<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>