none
Cambiar color al pasar el raton

Respuestas

  • Hola Zido45.

    Antes que nada, me gustaría hacerte pensar un poco en el objetivo de las aplicaciones de la Windows Store que no es otro que el mundo táctil. Por ello, hay que pensar en su uso dentro de este ámbito, es decir, no con el ratón sino con los dedos. Entonces te pregunto, si el usuario lo que va a hacer es un "Tap" con su dedo ¿Por qué sería necesario programar un cambio de color al pasar el ratón por encima? Evidentemente el paso del dedo por encima no lo podemos controlar. Si Necesitaras que la aplicación fuera para usar en PC's y no en tablets o entornos táctiles, entonces te recomendaría hacerla o tener una versión para Escritorio.

    Ahora bien, si aún necesitaras este comportamiento, la solución está en editar la plantilla del botón (esto vale para casi todos los elementos). Los pasos, como te indica Daniel son, botón derecho del ratón sobre tu "botón", "Editar plantilla" => "Editar una copia" y esta operación te mostrará una plantilla de estilo tal y como te indico al final de la respuesta, donde tendrás que buscar el VisualState con nombre PointerOver que será el que suceda al pasar el ratón por encima y editar las propiedades que desees. Por defecto, el borde de los botones no es un borde real, sino que el botón está dentro de un contenedor con un margen de separación con el botón y lo que se hace es cambiarle el background a este contenedor con lo que lo que sobra hasta el borde del botón parece un borde.

    El Visual State

                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
    

    La plantilla entera

            <Style x:Key="ButtonStyle1" TargetType="Button">
                <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/>
                <Setter Property="Padding" Value="12,4,12,4"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    "En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"
    MCTS | SharePoint 2010, Application Development
    MCTS | SharePoint 2010, Configuring
    Twitter | @saintwukong

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    jueves, 20 de diciembre de 2012 9:58
  • Lo que yo haría sería:

    • Desde Visual Studio o Blen, poner un botón
    • seguir los pasos que te comentamos
    • Darle un nombre a la plantilla <Style x:Key="ButtonStyle1" TargetType="Button">
    • Eliminar el contenido dentro del Visual State del PointerOver (si no quieres que aparezca), dejándolo de esta forma <VisualState x:Name="PointerOver"/>
    • Desde el código, cuando crees el botón le asignas este estilo.

    "En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"
    MCTS | SharePoint 2010, Application Development
    MCTS | SharePoint 2010, Configuring
    Twitter | @saintwukong

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    jueves, 20 de diciembre de 2012 11:10
  • Puedes hacer una de estas cosas:

    Editar el estilo de los botones (el general, pero te cambiaría todos los botones que no usen un estilo específico).

    Crear un estilo específico y luego, cuando crees el botón dinámicamente, aplicarle el estilo creado.

    Crear un estilo dinámicamente y aplicarlo al botón.

    Cambiar el color del botón en el evento PointerEntered, cambiando la propiedad Background y restableciéndola en el evento PointerExited del botón.

    Lo más "correcto" es crear un archivo con el estilo y aplicarlo después en tiempo de ejecución. Pero las otras opciones también funcionan. Si sigues perdido, coméntanoslo y te damos más pistas.

    Saludos cordiales.

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    sábado, 22 de diciembre de 2012 13:59

Todas las respuestas

  • Yo cambiaría la plantilla del elemento. Para hacerlo, vas a la vista de diseño, seleccionas el botón y le das a Editar plantilla -> Editar una copia. Ahí podrás cambiar el color de todo que quieras.
    jueves, 20 de diciembre de 2012 8:40
  • Hola Zido45.

    Antes que nada, me gustaría hacerte pensar un poco en el objetivo de las aplicaciones de la Windows Store que no es otro que el mundo táctil. Por ello, hay que pensar en su uso dentro de este ámbito, es decir, no con el ratón sino con los dedos. Entonces te pregunto, si el usuario lo que va a hacer es un "Tap" con su dedo ¿Por qué sería necesario programar un cambio de color al pasar el ratón por encima? Evidentemente el paso del dedo por encima no lo podemos controlar. Si Necesitaras que la aplicación fuera para usar en PC's y no en tablets o entornos táctiles, entonces te recomendaría hacerla o tener una versión para Escritorio.

    Ahora bien, si aún necesitaras este comportamiento, la solución está en editar la plantilla del botón (esto vale para casi todos los elementos). Los pasos, como te indica Daniel son, botón derecho del ratón sobre tu "botón", "Editar plantilla" => "Editar una copia" y esta operación te mostrará una plantilla de estilo tal y como te indico al final de la respuesta, donde tendrás que buscar el VisualState con nombre PointerOver que será el que suceda al pasar el ratón por encima y editar las propiedades que desees. Por defecto, el borde de los botones no es un borde real, sino que el botón está dentro de un contenedor con un margen de separación con el botón y lo que se hace es cambiarle el background a este contenedor con lo que lo que sobra hasta el borde del botón parece un borde.

    El Visual State

                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
    

    La plantilla entera

            <Style x:Key="ButtonStyle1" TargetType="Button">
                <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/>
                <Setter Property="Padding" Value="12,4,12,4"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    "En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"
    MCTS | SharePoint 2010, Application Development
    MCTS | SharePoint 2010, Configuring
    Twitter | @saintwukong

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    jueves, 20 de diciembre de 2012 9:58
  • antes de nada gracias por responder, veran mis botones estan creados en ejecucion (dinamicamente) por lo que no podria hacer click derecho, eso valdria en las plantillas generales del button?

    He probado a eliminar la parte del over pero me lo sigue haciendo, se que esta orientado para tablets y tactil, pero tambien lo necesito para los pcs con windows 8  y cuando paso el raton por encima o cuando presiono me salen colores blancos y es lo que necesitoo quitar

    gracias

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    • Desmarcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    jueves, 20 de diciembre de 2012 11:05
  • Lo que yo haría sería:

    • Desde Visual Studio o Blen, poner un botón
    • seguir los pasos que te comentamos
    • Darle un nombre a la plantilla <Style x:Key="ButtonStyle1" TargetType="Button">
    • Eliminar el contenido dentro del Visual State del PointerOver (si no quieres que aparezca), dejándolo de esta forma <VisualState x:Name="PointerOver"/>
    • Desde el código, cuando crees el botón le asignas este estilo.

    "En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"
    MCTS | SharePoint 2010, Application Development
    MCTS | SharePoint 2010, Configuring
    Twitter | @saintwukong

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    jueves, 20 de diciembre de 2012 11:10
  • Puedes hacer una de estas cosas:

    Editar el estilo de los botones (el general, pero te cambiaría todos los botones que no usen un estilo específico).

    Crear un estilo específico y luego, cuando crees el botón dinámicamente, aplicarle el estilo creado.

    Crear un estilo dinámicamente y aplicarlo al botón.

    Cambiar el color del botón en el evento PointerEntered, cambiando la propiedad Background y restableciéndola en el evento PointerExited del botón.

    Lo más "correcto" es crear un archivo con el estilo y aplicarlo después en tiempo de ejecución. Pero las otras opciones también funcionan. Si sigues perdido, coméntanoslo y te damos más pistas.

    Saludos cordiales.

    • Marcado como respuesta Adm1990 domingo, 23 de diciembre de 2012 19:53
    sábado, 22 de diciembre de 2012 13:59