2012-03-02 193 views
2

我在互聯網中找到了一個漂亮的玻璃按鈕的以下模板。 ,你可以看到它有按鈕背景屬性設置,在wpf中更改按鈕模板的背景顏色

<Setter TargetName="border" Property="Background" Value="#FF000000" /> 

但如果我改變了在融入任何其他值時,按鈕的背景那倒改變.. 我必須改變直接在Setter標記中的值將影響使用此模板的表單中的所有按鈕... 如何更改代碼以使用此模板爲不同的按鈕提供不同的背景?

<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}"> 
     <ControlTemplate.Resources> 
      <Storyboard x:Key="Timeline1"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
               Storyboard.TargetName="glow" 
               Storyboard.TargetProperty="(UIElement.Opacity)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" /> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
      <Storyboard x:Key="Timeline2"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
               Storyboard.TargetName="glow" 
               Storyboard.TargetProperty="(UIElement.Opacity)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </ControlTemplate.Resources> 
     <Border BorderBrush="#FFFFFFFF" 
       BorderThickness="0" 
       CornerRadius="4,4,4,4"> 
      <Border x:Name="border" 
        Background="#7F000000" 
        BorderBrush="#FF000000" 
        BorderThickness="1" 
        CornerRadius="4,4,4,4"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="0.507*" /> 
         <RowDefinition Height="0.493*" /> 
        </Grid.RowDefinitions> 
        <Border x:Name="glow" 
          Grid.RowSpan="2" 
          Width="Auto" 
          HorizontalAlignment="Stretch" 
          CornerRadius="4,4,4,4" 
          Opacity="0"> 
         <Border.Background> 
          <RadialGradientBrush> 
           <RadialGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1.702" ScaleY="2.243" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="0" /> 
             <TranslateTransform X="-0.368" Y="-0.152" /> 
            </TransformGroup> 
           </RadialGradientBrush.RelativeTransform> 
           <GradientStop Offset="0" Color="#B28DBDFF" /> 
           <GradientStop Offset="1" Color="#008DBDFF" /> 
          </RadialGradientBrush> 
         </Border.Background> 
        </Border> 
        <ContentPresenter Grid.RowSpan="2" 
             Width="Auto" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" /> 
        <Border x:Name="shine" 
          Width="Auto" 
          Margin="0,0,0,0" 
          HorizontalAlignment="Stretch" 
          CornerRadius="4,4,0,0"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0.494,0.028" EndPoint="0.494,0.889"> 
           <GradientStop Offset="0" Color="#99FFFFFF" /> 
           <GradientStop Offset="1" Color="#33FFFFFF" /> 
          </LinearGradientBrush> 
         </Border.Background> 
        </Border> 
       </Grid> 
      </Border> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsPressed" Value="True"> 
       <Setter TargetName="shine" Property="Opacity" Value="0.4" /> 
       <Setter TargetName="border" Property="Background" Value="#FF000000" /> 
       <Setter TargetName="border" Property="BorderBrush" Value="#FF000000" /> 
       <Setter TargetName="glow" Property="Visibility" Value="Hidden" /> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource Timeline1}" /> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}" /> 
       </Trigger.ExitActions> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 

回答

1

您可以使用綁定:

<Setter TargetName="border" Property="Background" 
     Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}" /> 

這種方式,您可以設置各個按鈕的背景下,以及由二傳手使用的背景將被綁定到該按鈕的Background財產。

<Button Background="Red" Content="First" /> 
<Button Background="Blue" Context="Second" /> 
+0

嗨感謝您的回答...有一個例外蔭:{「表達式類型不是有效的樣式值。」} 我怎樣才能解決這個問題? – lebhero 2012-03-02 22:54:03

+0

@lebhero查看我的更新回答 – 2012-03-02 23:08:16

+0

謝謝...我認爲有些東西我不明白在模板中..背景將設置按鈕的背景按下時,但如果我想改變按鈕的背景按之前? 如果我直接在模板中改變背景的值,它會在按下之前改變按鈕的顏色,這正是我需要的......我怎麼做到這一點?(改變按鈕的facecolor)謝謝 – lebhero 2012-03-02 23:39:57