2014-07-14 40 views
1

我正在嘗試創建一個按鈕,它將是特定顏色(如紅色)。在MouseOver上,按鈕顏色變成其他顏色(比如黑色)。在鼠標上更改按鈕顏色 - XAML

這是我已經試過:

<Style x:Key="CategoryButton" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Background" Value="Black"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

而且我用它作爲:

<Button x:Name="btnCat1" Click="btnCat1_Click" Background="#FFFF1D1D" Style="{StaticResource CategoryButton}"> 
    Hello ... 
</Button> 

的問題是,當我說Background="#FFFF1D1D"觸發顏色不進行任何更改按鈕。

回答

2

這是因爲您在Button聲明中指定了Background(換句話說,它是一個本地值),它優先於Style觸發器。有關WPF的屬性優先級,請參見msdn,Dependency Property Value Precedence

從與這個問題相關的屬性頁的簡短摘錄:

最高優先級被列爲第一
3.局部值。
6.樣式觸發器。
8.樣式設置器

解決的辦法是刪除本地值和與所述樣式設置它來代替。

<Button x:Name="btnCat1" 
     Click="btnCat1_Click" 
     Style="{StaticResource CategoryButton}"> 
    Hello ... 
</Button> 

<Style x:Key="CategoryButton" TargetType="Button"> 
    <!-- Set background property here --> 
    <Setter Property="Background" Value="#FFFF1D1D" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Center" 
             VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="Black"/> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

你也可以繼承的風格如果你不希望爲所有CategoryButton的

<Style x:Key="RedCategoryButton" 
     BasedOn="{StaticResource CategoryButton}" 
     TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="#FFFF1D1D" /> 
</Style> 
1

背景您可以使用XAMLWPF按鈕造型的擴展例子如下所示(地方在Windows ResourceDictionary文件):

<Style TargetType="Button" x:Key="Button_Command"> 
    <Setter Property="Foreground" Value="#a0a0a0"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="ButtonBackground" BorderBrush="#909090"> 
        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        <Border.BorderThickness>0</Border.BorderThickness> 
        <Border.CornerRadius>2</Border.CornerRadius> 
        <Border.Background> 
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
          <GradientStop Color="#e0e0e0" Offset="0" /> 
          <GradientStop Color="#808080" Offset="1" /> 
         </LinearGradientBrush> 
        </Border.Background> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="ButtonBackground" Property="Background"> 
          <Setter.Value> 
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" > 
            <GradientStop Color="#f0f0f0" Offset="0" /> 
            <GradientStop Color="#c0c0c0" Offset="0.81" /> 
            <GradientStop Color="#d50101" Offset="0.81" /> 
            <GradientStop Color="#f50101" Offset="1" /> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="ButtonBackground" Property="Background"> 
          <Setter.Value> 
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" > 
            <GradientStop Color="#f0f0f0" Offset="0" /> 
            <GradientStop Color="#c0c0c0" Offset="0.75" /> 
            <GradientStop Color="#d50101" Offset="0.75" /> 
            <GradientStop Color="#f50101" Offset="1" /> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

注意不同的造型相關的<Trigger Property="IsMouseOver" Value="True"><Trigger Property="IsPressed" Value="True">

希望這會有所幫助。問候,