none
WPF Cambiar estilo del botón al hacer click RRS feed

  • Pregunta

  • Buenas, estoy empezando con wpf y me gustaría que en la aplicación que estoy haciendo, al hacer clic en un boton, me ponga el estilo que le tengo definido en "isover" cuando no lo tenga, y el que tiene por defecto cuando lo tenga. Vamos, una activación y desactivación del botón, para saber en qué estado está.

    Cómo se podría hacer esto? Lo he intentado hacer con Blend2 y dinámicamente en vb.net, pero nada, no lo consigo...
    Me vendría bastante bien una ayudilla.
    Un saludo
    Soy una parte de todo aquello que he encontrado en mi camino
    martes, 4 de agosto de 2009 10:52

Respuestas

  • Bueno, al final lo he logrado, no creo que sea de la forma más óptima pero hace lo que quiero, dejo aqui el código que he puesto por si a alguien le valiera:

    xaml:

                        <ControlTemplate.Triggers>

                            <Trigger Property="Focusable" Value="True">
                                <Setter Property="Fill" TargetName="path">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.385,1.078" StartPoint="0.75,-0.039">
                                            <GradientStop Color="#FF56B3E8" Offset="0"/>
                                            <GradientStop Color="#FF195693" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="Focusable" Value="False">
                                <Setter Property="Fill" TargetName="path">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.385,1.078" StartPoint="0.75,-0.039">
                                            <GradientStop Color="#FFB2D5EA" Offset="0"/>
                                            <GradientStop Color="#FF57B4E9" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                        </ControlTemplate.Triggers>

    vb:

                        Private Sub btn1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btn_actual.Click       
                           btn1.Focusable = False
                           btn2.Focusable = True      
                        End Sub
                     
                        Private Sub btn2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
                           btn2.Focusable = False
                           btn1.Focusable = True
                        End Sub
       

    Espero les sea de ayuda, un saludo
    Soy una parte de todo aquello que he encontrado en mi camino
    • Marcado como respuesta Uruviel viernes, 14 de agosto de 2009 8:26
    viernes, 14 de agosto de 2009 7:46

Todas las respuestas

  • Con Expression Blend es muy sencillo hacerlo (esta largo, se paciente)

    1.- Inserta tu botton en tu ventana
    2.- En tu App.XAML agrega lo siguiente:

    <ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="OnHover">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                    <Storyboard x:Key="OnLeave">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.01"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Border BorderBrush="{x:Null}" CornerRadius="2" BorderThickness="0.5">
                    <Border x:Name="border" Background="#7F000000" CornerRadius="2" BorderThickness="0.5" BorderBrush="Black">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.5*"/>
                                <RowDefinition Height="0.5*"/>
                            </Grid.RowDefinitions>
                            <Border x:Name="glow" Opacity="0" Grid.Row="0" Grid.RowSpan="2" BorderBrush="{x:Null}" CornerRadius="2">
                                <Border.Background>
                                    <RadialGradientBrush Center="0.508,1.01" GradientOrigin="0.508,1.01" RadiusX="0.634" RadiusY="0.896">
                                        <GradientStop Color="#B28CBEFF"/>
                                        <GradientStop Offset="1"/>
                                    </RadialGradientBrush>
                                </Border.Background>
                            </Border>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2"/>
                            <Border x:Name="shine" BorderBrush="{x:Null}" BorderThickness="1" CornerRadius="2,2,0,0">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#99FFFFFF" Offset="0"/>
                                        <GradientStop Color="#33FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
                        <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
                        <Setter Property="Background" TargetName="border" Value="#CC000000"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.ExitActions>
                            <BeginStoryboard x:Name="OnLeave_BeginStoryboard" Storyboard="{StaticResource OnLeave}"/>
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource OnHover}"/>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>


    3.- A tu control agrega tu atributo: ... Template={DynamicResource GlassButton}...
    4.- Con esto tu control ya tiene un template personalizado y blend te ayudará a mejorarlo.

    5.- En tu explorador de objetos de blend selecciona el boton en cuestion, dale click derecho y selecciona la opcion: Edit Tempalte -> Edit Current
    6.- Posiciona la vista de Triggers
    Ahí notaras tres, IsEnabled, IsMouseOver, IsPressed, y selecciona IsPressed

    7.- Entonces ahora puedes modificar la apariencia de esos elementos (borders) para que el botón cuando este presionado tenga la apariencia deseada.

    en la semana voy a publicar un video tutorial sobre esto mismo en mi blog...
    Saludos,


    Microsoft Certified Technology Specialist .NET 3.5 WPF Application Development
    Profesionista Microsoft VIP México
    Blog Técnico
    World Wide Finalist Imagine Cup 2007
    Microsoft Student Partner
    C#, WPF, WCF
    LinkedIn
    • Propuesto como respuesta iRodfraga miércoles, 5 de agosto de 2009 21:27
    martes, 4 de agosto de 2009 17:13
  • Muchas gracias iRodfraga , voy a probar a hacer lo que dices y te cuento... Aunque no sé muy bien lo que hace, asi que en espera de ese videotutorial para aprender un poquillo más sobre esta herramienta que parece bastante buena...
    Un saludo y agradecerte esa ayuda que aportas para que novatos como yo puedan ir aprendiendo.
    ;)

    Soy una parte de todo aquello que he encontrado en mi camino
    lunes, 10 de agosto de 2009 7:50
  • Buenas de nuevo, he hecho lo que decías y nada, no hace lo que yo quiero... al presionar cambia de estilo, pero no se queda con ese estilo después...
    A lo mejor no me he explicado bien, lo que quiero es:
     si yo defino un style en el app.xaml, puedo asignarlo a un objeto en tiempo de ejecucion?

    Mira, tengo 2botones: btn_nuevo y btn_antigüo pejm. Nuevo al principio aparecería seleccionado (estilo con iluminado), pero al pulsar en antigüo se tiene que iluminar btn_antiguo y desiluminar btn_nuevo y viceversa.... ya que cada botón carga distintos paneles... pero quiero que se mantenga iluminado el que está seleccionado en ese momento para que el usuario sepa dónde está... No lo puedo hacer con isfocused, ya que si selecciono cualquier otro control de la aplicación se desiluminan =mente, al no tener ya el foco...

    es algo como:
       
        Private Sub btn_nuevo_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
                btn_nuevo.Background = Brushes.Red
                btn_antiguo.Backgroun = Brushes.Blue
        End Sub
       
        Private Sub btn_nuevo_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
                btn_nuevo.Background = Brushes.Blue
                btn_antiguo.Backgroun = Brushes.Red
        End Sub

    pero en vez de cogiendo directamente el color quiero que coja un estilo definido.
        Así no funciona btn_nuevo.Style = ("{StaticResource Nuevo}") dice que "un valor de tipo string no se puede convertir en system.windows.style"

    Espero haberme explicado, un saludo

    Soy una parte de todo aquello que he encontrado en mi camino
    martes, 11 de agosto de 2009 7:30
  • Bueno, al final lo he logrado, no creo que sea de la forma más óptima pero hace lo que quiero, dejo aqui el código que he puesto por si a alguien le valiera:

    xaml:

                        <ControlTemplate.Triggers>

                            <Trigger Property="Focusable" Value="True">
                                <Setter Property="Fill" TargetName="path">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.385,1.078" StartPoint="0.75,-0.039">
                                            <GradientStop Color="#FF56B3E8" Offset="0"/>
                                            <GradientStop Color="#FF195693" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="Focusable" Value="False">
                                <Setter Property="Fill" TargetName="path">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.385,1.078" StartPoint="0.75,-0.039">
                                            <GradientStop Color="#FFB2D5EA" Offset="0"/>
                                            <GradientStop Color="#FF57B4E9" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                        </ControlTemplate.Triggers>

    vb:

                        Private Sub btn1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btn_actual.Click       
                           btn1.Focusable = False
                           btn2.Focusable = True      
                        End Sub
                     
                        Private Sub btn2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
                           btn2.Focusable = False
                           btn1.Focusable = True
                        End Sub
       

    Espero les sea de ayuda, un saludo
    Soy una parte de todo aquello que he encontrado en mi camino
    • Marcado como respuesta Uruviel viernes, 14 de agosto de 2009 8:26
    viernes, 14 de agosto de 2009 7:46
  • Buenas, acabo de empezar a tocar WPF y me gustaría saber, como por ejemplo con este mismo código darle una forma mas ovalada al botón. Como puedo hacerlo?

    viernes, 26 de febrero de 2010 11:43