2014-06-05 61 views
1

我想創建一個按鈕模板。除了當我將鼠標移動到按鈕上方時,所有的工作都可以找到,文本的顏色應該變成白色。 XAML代碼:Wpf按鈕鼠標移動改變顏色

<!--Control colors.--> 
    <Color x:Key="ControlNormalColor">#FFFFFF</Color> 
    <Color x:Key="ControlMouseOverColor">#999999</Color> 
    <Color x:Key="DisabledControlColor">#FFFFFF</Color> 
    <Color x:Key="DisabledForegroundColor">#999999</Color> 
    <Color x:Key="ControlPressedColor">#999999</Color> 

    <!-- FocusVisual --> 

    <Style x:Key="ButtonFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border> 
         <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- Button --> 
    <Style TargetType="Button"> 
     <Setter Property="SnapsToDevicePixels" Value="true" /> 
     <Setter Property="OverridesDefaultStyle" Value="true" /> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" /> 
     <Setter Property="MinHeight" Value="29px" /> 
     <Setter Property="MinWidth" Value="103px" /> 
     <Setter Property="FontFamily" Value="Century Gothic" /> 
     <Setter Property="FontSize" Value="20" /> 
     <Setter Property="Foreground" Value="#999999" /> 
     <Setter Property="FontWeight" Value="Bold"></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border"> 
         <Border.Background> 
          <SolidColorBrush Color="{DynamicResource ControlNormalColor}" /> 
         </Border.Background> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.5" /> 
            <VisualTransition GeneratedDuration="0" To="Pressed" /> 
           </VisualStateGroup.Transitions> 

           <VisualState x:Name="Normal" /> 

           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
             Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
             Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
             Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" /> 
             </ColorAnimationUsingKeyFrames> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
             Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter Margin="2" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        RecognizesAccessKey="True" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

我的問題,我必須做些什麼才能使按鈕中的文本在鼠標懸停上變爲白色?此代碼是從互聯網複製的。我在WPF世界很新。雖然我理解大約在這段代碼中,但我對WPF的瞭解有限。

回答

3

你要添加更多的ColorAnimationUsingKeyFrames在鼠標懸停的VisualState更改前景色鼠標懸停時發生,你可以用下面的代碼代碼

<Color x:Key="ControlNormalColor">#FFFFFF</Color> 
    <Color x:Key="ControlMouseOverColor">#999999</Color> 
    <Color x:Key="DisabledControlColor">#FFFFFF</Color> 
    <Color x:Key="DisabledForegroundColor">#999999</Color> 
    <Color x:Key="ControlPressedColor">#999999</Color> 

    <!-- FocusVisual --> 

    <Style x:Key="ButtonFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border> 
         <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- Button --> 
    <Style TargetType="Button"> 
     <Setter Property="SnapsToDevicePixels" Value="true" /> 
     <Setter Property="OverridesDefaultStyle" Value="true" /> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" /> 
     <Setter Property="MinHeight" Value="29px" /> 
     <Setter Property="MinWidth" Value="103px" /> 
     <Setter Property="FontFamily" Value="Century Gothic" /> 
     <Setter Property="FontSize" Value="20" /> 
     <Setter Property="Foreground" Value="#999999" /> 
     <Setter Property="FontWeight" Value="Bold"></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border"> 
         <Border.Background> 
          <SolidColorBrush Color="{DynamicResource ControlNormalColor}" /> 
         </Border.Background> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.5" /> 
            <VisualTransition GeneratedDuration="0" To="Pressed" /> 
           </VisualStateGroup.Transitions> 

           <VisualState x:Name="Normal" /> 

           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
            Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" /> 
             </ColorAnimationUsingKeyFrames> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
            Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlNormalColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
            Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
            Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" /> 
             </ColorAnimationUsingKeyFrames> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
            Storyboard.TargetName="Border"> 
              <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter Margin="2" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       RecognizesAccessKey="True" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
1

通過使用風格觸發器我們可以得到它。對鼠標移過,我們可以在二傳手設置背景顏色

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0"> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="DarkGoldenrod"/> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button>