locked
MouseOver Button RRS feed

  • Pergunta

  • Olá pessoal,

    Estou tendo muitas dificuldades quanto a isso em Silverlight.

    Tenho um Button no qual aplico este estilo a ele (app.xaml) :

    <Style x:Key="ButtonMenu" TargetType="Button">
                <Setter Property="Foreground" Value="#A5A7AA" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border CornerRadius="1" BorderThickness="0" BorderBrush="Transparent">
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    E estou preciso que quando o botão seja clicado ele mude de cor, tenho este outro estilo:

            <Style x:Key="MouseOverButton" TargetType="Button">
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border CornerRadius="1" BorderThickness="0.5" BorderBrush="#FFBABABA">
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#3F3F40" Offset="0.506" />
                                        <GradientStop Color="#221F1F" Offset="0.506" />
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    O problema é como 'setar' esse estilo no botão, após o click do mesmo, pois nao consigo achar o evento simples ja conhecido como MOUSEOVER....

    Obrigado a todos que puderem me ajudar, estou acompanhando o fórum. Abraços


    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.

    segunda-feira, 16 de julho de 2012 20:56

Respostas

  • Consegui, esta aqui caso alguém precise.

    <!--ESTILO DOS BOTÕES DO MENU COM MOUSEOVER-->
            <Style x:Key="ButtonMenu" TargetType="Button">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Padding" Value="3" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" >
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                                Storyboard.TargetName="contentControl"  />
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>                                    
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border BorderBrush="Transparent">
                                    <Border x:Name="border" Background="#221F1F" BorderBrush="#A5A7AA" >
                                        <Border Opacity="0" x:Name="glow" >
                                            <ContentPresenter x:Name="content" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#3F3F40" Offset="0.506"/>
                                                    <GradientStop Color="#221F1F" Offset="0.506"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Border>
                                </Border>
                                <ContentControl x:Name="contentControl" Content="{TemplateBinding Content}" Foreground="#A5A7AA"
                                                HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Estilo criado no app.xaml


    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.

    • Marcado como Resposta Seratti segunda-feira, 30 de julho de 2012 13:23
    segunda-feira, 30 de julho de 2012 13:09

Todas as Respostas

  • Alguém consegue me ajudar ?!

    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.

    segunda-feira, 23 de julho de 2012 11:13
  • Consegui, esta aqui caso alguém precise.

    <!--ESTILO DOS BOTÕES DO MENU COM MOUSEOVER-->
            <Style x:Key="ButtonMenu" TargetType="Button">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Padding" Value="3" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" >
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                                Storyboard.TargetName="contentControl"  />
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>                                    
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border BorderBrush="Transparent">
                                    <Border x:Name="border" Background="#221F1F" BorderBrush="#A5A7AA" >
                                        <Border Opacity="0" x:Name="glow" >
                                            <ContentPresenter x:Name="content" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#3F3F40" Offset="0.506"/>
                                                    <GradientStop Color="#221F1F" Offset="0.506"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Border>
                                </Border>
                                <ContentControl x:Name="contentControl" Content="{TemplateBinding Content}" Foreground="#A5A7AA"
                                                HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Estilo criado no app.xaml


    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.

    • Marcado como Resposta Seratti segunda-feira, 30 de julho de 2012 13:23
    segunda-feira, 30 de julho de 2012 13:09