2012-03-18 67 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样品有...