Стиль мыши над / пользователь нажал на кнопку - PullRequest
Новая
       5

Стиль мыши над / пользователь нажал на кнопку

4 голосов
/ 18 марта 2012

У меня есть кнопка, и я хочу стилизовать эффект анимации ролловера и цвет на нем.Но я не смог открыть файл с помощью 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 ]

6 голосов
/ 18 марта 2012

Ну, я нашел это = 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}"

Теперь он найден только в образце метрополитена ...

2 голосов
/ 18 марта 2012 
<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>
...