2015-07-12 153 views
5

我創建了帶有樣式的按鈕,但創建按鈕樣式後,它失去了按鈕的默認效果,當我直接在按鈕中放置屬性比我會得到像點擊時我可以看到藍色的默認效果background.I也嘗試把可視化管理器,但它不工作。請有人可以幫助我知道我做錯了什麼Silverlight按鈕鼠標懸停喜歡懸停效果

我的按鈕樣式:

<Style TargetType="Button" x:Key="MenuButtonStyle"> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="FontFamily" Value="Sitka Heading"/> 
    <Setter Property="FontSize" Value="20"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="Button"> 
     <Grid> 
      <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="Pressed"> 
       <Storyboard> 
        <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement" 
            Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
            To="Blue"/> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
               Storyboard.TargetName="normalImage"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
               Storyboard.TargetName="mouseOverImage"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
       <VisualState x:Name="MouseOver"> 
       <Storyboard> 
        <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement" 
            Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
            To="Blue"/> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
               Storyboard.TargetName="normalImage"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
               Storyboard.TargetName="mouseOverImage"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Border BorderBrush="Black" BorderThickness="0,0,0,0.5" Margin="30,0,0,0" 
        Grid.ColumnSpan="2"/> 
      <TextBlock x:Name="ButtonTextElement" 
        Text="{TemplateBinding Content}" Margin="30,0" 
        Foreground="{TemplateBinding Foreground}" Grid.Column="0" 
        VerticalAlignment="{TemplateBinding VerticalAlignment}" /> 
      <Image x:Name="normalImage" Source="/Assets/menu-arrow-left.png" 
       Grid.Column="1" Stretch="None" HorizontalAlignment="Right" 
       Margin="0,0,30,0" /> 
      <Image x:Name="mouseOverImage" Source="/Assets/menu-arrow-left-hover.png" 
       Grid.Column="1" Stretch="None" HorizontalAlignment="Right" 
       Visibility="Collapsed" Margin="0,0,30,0" /> 
     </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

我也VisualStateManager這樣

<ColorAnimation Storyboard.TargetName="MouseOverVisualElement" 
          Storyboard.TargetProperty="TextBlock.Foreground" To="Red" /> 

My Button Tag

<Button Style="{StaticResource MenuButtonStyle}" Content="Home"/> 
+0

希望有人能幫我解決這個問題。請 – Milind

+1

檢查你的xaml。根網格的背景爲空,因此mouseHover未正確檢測到。你可以設置你想要的任何背景顏色,你甚至可以將其設置爲透明。但是你必須設置它,並且應該正確檢測懸停。 – Martin

+0

@Martin在許多情況下,背景是獲得hittestvisibility的一個問題,但由於它是一個控件模板,它通過控件自動繼承。所以這也不能解決它。如果我有時間並且舉個例子,我會稍後擺脫它。 –

回答

1

您的模板有幾個問題。首先:您必須確保由Storyboard.TargetName標識的元素及其屬性(您要更改)由Storyboard.TargetProperty標識實際上是有意義的。您可以更改SolidColorBrush的顏色,並且可以將SolidColorBrush用於Textblock.Foreground屬性,但不能直接設置前景屬性顏色,因爲前景實際上是Brush(而不是Color)。其次:如果您覆蓋控件的模板,則必須提供原始模板中的所有VisualStates,這意味着您還必須定義FocusStates。 這裏是一個模板,做什麼你正在嘗試做的:

<ControlTemplate TargetType="Button"> 
     <Grid> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 

          <ColorAnimation 
           Duration="0" 
           Storyboard.TargetName="ButtonTextElement" 
           Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
           To="Red"/> 

         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Pressed"> 
         <Storyboard> 
          <ColorAnimation 
           Duration="0" 
           Storyboard.TargetName="Background" 
           Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
           To="#FF6DBDD1"/> 
          <ColorAnimation 
           Duration="0" 
           Storyboard.TargetName="ButtonTextElement" 
           Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" 
           To="Red"/> 


         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Disabled"> 
         <Storyboard> 
          <DoubleAnimation 
           Duration="0" 
           Storyboard.TargetName="DisabledVisualElement" 
           Storyboard.TargetProperty="Opacity" 
           To=".55"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="FocusStates"> 
        <VisualState x:Name="Focused"> 
         <Storyboard> 
          <DoubleAnimation 
           Duration="0" 
           Storyboard.TargetName="FocusVisualElement" 
           Storyboard.TargetProperty="Opacity" 
           To="1"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unfocused"/> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Border 
       x:Name="Background" 
       Background="White"/> 
      <TextBlock 
       x:Name="ButtonTextElement" 
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       Text="{TemplateBinding Content}" 
       FontSize="20" FontFamily="Sitka Heading" 
       Foreground="Black"/> 

      <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> 
      <Rectangle x:Name="FocusVisualElement" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> 
     </Grid> 
    </ControlTemplate> 

default button style can be found on msdn

+0

嗨感謝您的代碼片段的答覆。但像往常一樣,我可以得到按下狀態得到工作但鼠標懸停不工作,可能是什麼原因 – Milind

+0

@Milind:顯示您更新的xaml,否則我無法回答_「鼠標懸停不起作用,可能是什麼原因」_。並按照Chris W.給出的關於刪除「VisualTransition」的建議。 @Chris W .:我通常會爲每個VisualState引入一個單獨的元素作爲visualState指示器。試圖讓OP的模板工作。 – Martin

+0

@Martin我用新的代碼更新了我的問題 – Milind

0

確保VisualStateManager.VisualStateGroups是您的ControlTemplate的根元素的直接子。在你的例子中,你的根元素是一個邊框,所以把VisualStateManager的東西直接放在Border標籤下。