2012-03-18 66 views
4

我有一個按鈕,我想樣式上的翻轉動畫效果和顏色。但我無法用Expression Blend打開文件。有沒有什麼方法在當前的XAML頁面上設置按鈕的樣式,而不是將所有內容都插入到控件庫中?風格的鼠標懸停/用戶點擊按鈕

我想要一個褪色效果,當用戶將淡入淡出變爲黑色時,以及當用戶單擊時,淡入淡出。以下是我迄今爲止

<Button Content="SOS" Foreground="White" VerticalAlignment="Stretch" 
HorizontalAlignment="Stretch" Width="400" Margin="10,0,0,0" Background="#AE193E" 
Padding="0" BorderThickness="0" FontSize="36" FontFamily="Calibri" 
FontWeight="Normal" /> 

回答

2
<Button Content="SOS" Foreground="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
      Width="400" Margin="10,0,0,0" Background="#AE193E" Padding="0" BorderThickness="0" FontSize="36" 
      FontFamily="Calibri" FontWeight="Normal"> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}"> 
       <Style.Triggers> 
        <!--user rollover fade to black--> 
        <EventTrigger RoutedEvent="MouseEnter"> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation Storyboard.TargetProperty="Background.Color" From="#AE193E" To="Black" Duration="0:0:1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 

        <!--when user click, fade to white....--> 
        <EventTrigger RoutedEvent="MouseDown"> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Black" To="White" Duration="0:0:0.1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 
+0

首先。謝謝你的回覆..最後我得到了答案= D其次,對於目標類型我改變爲TargetType =「Button」只有沒有藍色下劃線,但他們答覆我沒有觸發器,無法解析>。< – 1myb 2012-03-18 14:49:52

+0

btw,我希望知道你的方法也是= D – 1myb 2012-03-18 14:57:50

+0

我不明白你的問題,請改述 – 2012-03-18 15:39:51

6

好吧,我發現這個= d

<Page.Resources> 
    <Style x:Key="CustomButtonStyle" TargetType="Button"> 
     <Setter Property="Background" Value="Orange"/> 
     <Setter Property="Foreground" Value="Black"/> 
     <Setter Property="FontFamily" Value="Comic Sans MS"/> 
     <Setter Property="FontSize" Value="30"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" /> 
       </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"> 
       <Storyboard> 
        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" /> 
        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" /> 
       </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Grid> 
      <Rectangle x:Name="Border" Stroke="Black" Fill="Orange" Margin="-5"/> 
      <ContentPresenter x:Name="Content"/> 
      </Grid> 
     </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

</Page.Resources> 

,這有點短代碼只添加到該按鈕有

Style="{StaticResource CustomButtonStyle}" 

現在發現在地鐵aps樣品有...