2016-06-21 58 views
0

我已经创建了控件IconButton(派生自Button)在我的按钮的中心显示大图标。一切似乎工作正常,但触发。当鼠标超过我的控制时,背景应该会改变。自定义按钮不对IsMouseOver反应

后面的代码:

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> 

什么是错的代码?为什么当我将鼠标移动到其上时,背景不会改变?

回答

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

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>