none
Animacion de color en templates de objetos RRS feed

  • Pregunta

  • Buenas tarde, veran tengo un pequeño problema con unos ejemplos que vi en MSDN sobre personalizar los objetos de WPF y si funciona pero las animaciones no, por ejemplo cuando unos coloca el mouse sobre el objeto se como normalmente windows cambia el todo del borde del objeto a un has de luz azul, bueno segun estos ejemplo personalizaron esa parte y me da dos errores los cuales me imagino que debe ser por el .NET 4, unos de los error es que si le coloco ese estilo visual no puede cargarlo pero si corro la aplicacion si funciona pero las animaciones son de inmediatas y no se ve la animacion, ya use el que trajo por defecto que era el "EasingColorKeyFrames" y el "ColorAnimation", por lo general el error menciona que no es compatible con el evento, alguna idea de cual metodo de animacion es el correcto para usar el template y que no afecto a la venta de diseño.
    lunes, 20 de febrero de 2012 17:03

Respuestas

  • Hola nobunagaii

    Aqui te dejo la solución:

    <Style TargetType="{x:Type TextBox}">
            <Setter Property="SnapsToDevicePixels"
              Value="True" />
            <Setter Property="OverridesDefaultStyle"
              Value="True" />
            <Setter Property="KeyboardNavigation.TabNavigation"
              Value="None" />
            <Setter Property="FocusVisualStyle"
              Value="{x:Null}" />
            <Setter Property="MinWidth"
              Value="120" />
            <Setter Property="MinHeight"
              Value="20" />
            <Setter Property="AllowDrop"
              Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBoxBase}">
                        <Border Name="Border"
                    CornerRadius="2"
                    Padding="2"
                    BorderThickness="1">
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                            </Border.Background>
                            <Border.BorderBrush>
                                <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                            </Border.BorderBrush>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border" Duration="0:0:3"
                                                                          Storyboard.TargetProperty="Background.Color" To="{StaticResource DisabledControlLightColor}">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border" Duration="0:0:3"
                                                                          Storyboard.TargetProperty="Background.Color" To="{StaticResource DisabledControlDarkColor}">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Margin="0"
                            x:Name="PART_ContentHost" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Nota los cambios en los StoryBoard de los VisualState:

    He cambiado ColorAnimationUsingKeyFrames por ColorAnimation y además he quitado la siguiente parte:

    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlLightColor}" />

    Porque ColorAnimation no admite KeyFrame's.

    He cambiado (Panel.Background).(SolidColorBrush.Color) por Background.Color.

    Un saludo


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog

    • Marcado como respuesta nobunagaii martes, 21 de febrero de 2012 17:05
    lunes, 20 de febrero de 2012 20:56
  • Hola 

    Cambia el ColorAnimation del Font_textbox2 por este:

    <visualstate x:name="Disabled">
        <storyboard>
            <coloranimation duration="0:0:3" storyboard.targetname="Border" storyboard.targetproperty="Background.GradientStops[1].Color" to="Yellow">
            </coloranimation>
        </storyboard>
    </visualstate>

    Un saludo

    PD: Solo agrega mas ColorAnimation cambiando el index [x] por otro numero


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog


    • Editado Antonio Lobo martes, 21 de febrero de 2012 22:29
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:28
    martes, 21 de febrero de 2012 22:27
  • Hola

    Es bastante extraño pues yo he probado lo que he puesto y no me da ningún error.

    Voy a probar nuevamente y te comento.

    Un saludo

    Edit: Se me olvidó comentar que esto:

    <Border.Background>
        <RadialGradientBrush Center="0.5,-0.5" GradientOrigin="0.5,1.5" RadiusX="1" RadiusY="1.5" Opacity="0.8">
            <GradientStop Color="#00ff00" Offset="0.2"/>
            <GradientStop Color="#00a000" Offset="0.3"/>
            <GradientStop Color="#206000" Offset="0.5"/>
        </RadialGradientBrush>
    </Border.Background>
    lo pasé al segundo Style que pusiste, debido a que Background.GradientStops[1].Color busca un Gradiente el cual no está obteniendo según lo que tu tienes en el momento. 

    Cambia esto:

    <Border.Background>
        <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
    </Border.Background>

    por lo que puse antes.


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog


    • Editado Antonio Lobo sábado, 25 de febrero de 2012 2:35
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:28
    sábado, 25 de febrero de 2012 2:22
  • <Style x:Key="Font_textbox" TargetType="TextBox">
                    <Setter Property="FontFamily" Value="Century Gothic"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                                <Border Name="Border" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Black">
                                    <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>      
                                    <Border.Background>
                                        <RadialGradientBrush Center="0.5,-0.5" GradientOrigin="0.5,1.5" RadiusX="1" RadiusY="1.5" Opacity="0.8">
                                            <GradientStop Color="#00ff00" Offset="0.2"/> <!--CLARO--> 
                                            <GradientStop Color="#00a000" Offset="0.3"/><!--MEDIO-->
                                            <GradientStop Color="#206000" Offset="0.5"/><!--OSCURO-->
                                        </RadialGradientBrush>
                                    </Border.Background>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#00ff00">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#00a000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#206000">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#00a000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#206000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#204000">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
    Asi quedo el estilo funcionando gracias a lobo por ayudarme.
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:37
    lunes, 27 de febrero de 2012 16:37

Todas las respuestas

  • Hola

    Podrías poner el código xaml para revisarlo o pasar el enlace?

    Un saludo


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog

    lunes, 20 de febrero de 2012 18:16
  • Ese es el ejemplo del textbox hay que remplazar parte del codigo que dan error, esas son los recursos statics esos los puse con color normal

    http://msdn.microsoft.com/en-us/library/ms752068.aspx

    lunes, 20 de febrero de 2012 18:19
  • Hola nobunagaii

    Aqui te dejo la solución:

    <Style TargetType="{x:Type TextBox}">
            <Setter Property="SnapsToDevicePixels"
              Value="True" />
            <Setter Property="OverridesDefaultStyle"
              Value="True" />
            <Setter Property="KeyboardNavigation.TabNavigation"
              Value="None" />
            <Setter Property="FocusVisualStyle"
              Value="{x:Null}" />
            <Setter Property="MinWidth"
              Value="120" />
            <Setter Property="MinHeight"
              Value="20" />
            <Setter Property="AllowDrop"
              Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBoxBase}">
                        <Border Name="Border"
                    CornerRadius="2"
                    Padding="2"
                    BorderThickness="1">
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                            </Border.Background>
                            <Border.BorderBrush>
                                <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                            </Border.BorderBrush>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border" Duration="0:0:3"
                                                                          Storyboard.TargetProperty="Background.Color" To="{StaticResource DisabledControlLightColor}">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border" Duration="0:0:3"
                                                                          Storyboard.TargetProperty="Background.Color" To="{StaticResource DisabledControlDarkColor}">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Margin="0"
                            x:Name="PART_ContentHost" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Nota los cambios en los StoryBoard de los VisualState:

    He cambiado ColorAnimationUsingKeyFrames por ColorAnimation y además he quitado la siguiente parte:

    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlLightColor}" />

    Porque ColorAnimation no admite KeyFrame's.

    He cambiado (Panel.Background).(SolidColorBrush.Color) por Background.Color.

    Un saludo


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog

    • Marcado como respuesta nobunagaii martes, 21 de febrero de 2012 17:05
    lunes, 20 de febrero de 2012 20:56
  • Gracias por mostrarme los cambios que eran necesarios para hacer funcionar la animacion ahora ya puedo terminar parte de la personalizacion de los controles
    martes, 21 de febrero de 2012 17:08
  • Lobo me puedes ayudar aqui un momento veras tengo este style del textbox pero no funciona, tu linea funciona bien pero la que estoy moldeando no le funciona, intente usar un fragmento de codigo que habia en un ejemplo de template de combo box pero no funciona.

    aqui te dejo mi codigo del textbox

                
                
                <style targettype="TextBox" x:key="Font_textbox">
                    <Setter Property="FontFamily" Value="Century Gothic"></Setter>
                    <Setter Property="Foreground" Value="White"></Setter>
                    <Setter Property="FontSize" Value="16"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>
                    <Setter Property="BorderBrush" Value="Black"></Setter>
                    <Setter Property="SnapsToDevicePixels" Value="True" ></Setter>
                    <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                                <Border Name="Border" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Black">
                                    <ScrollViewer Margin="0" x:Name="PART_ContentHost"></ScrollViewer>      
                                    <Border.Background>
                                        <RadialGradientBrush Center="0.5,-0.5" GradientOrigin="0.5,1.5" RadiusX="1" RadiusY="1.5" Opacity="0.8">
                                            <GradientStop Color="#00ff00" Offset="0.2"></GradientStop> <!--CLARO--> 
                                            <GradientStop Color="#00a000" Offset="0.3"></GradientStop><!--MEDIO-->
                                            <GradientStop Color="#206000" Offset="0.5"></GradientStop><!--OSCURO-->
                                        </RadialGradientBrush>
                                    </Border.Background>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <!--PARAMETROS DEL OBJETO-->
    
                </style>
                <style targettype="{x:Type TextBox}" x:key="Font_textbox2">
                    <Setter Property="SnapsToDevicePixels" Value="True" ></Setter>
                    <Setter Property="OverridesDefaultStyle" Value="True" ></Setter>
                    <Setter Property="KeyboardNavigation.TabNavigation" Value="None" ></Setter>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" ></Setter>
                    <Setter Property="MinWidth" Value="120" ></Setter>
                    <Setter Property="MinHeight" Value="20" ></Setter>
                    <Setter Property="AllowDrop" Value="true" ></Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                                <Border Name="Border"
                    CornerRadius="2"
                    Padding="2"
                    BorderThickness="1">
                                    <Border.Background>
                                        <SolidColorBrush Color="{DynamicResource ControlLightColor}" ></SolidColorBrush>
                                    </Border.Background>
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="{DynamicResource BorderMediumColor}" ></SolidColorBrush>
                                    </Border.BorderBrush>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            
                                            <VisualState x:Name="Normal">
                                            </VisualState>
                                            
                                            <VisualState x:Name="Disabled" >
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Border" Duration="0:0:3"
                                                                          Storyboard.TargetProperty="(Border.Background).(RadialGradientBrush.GradientStop)[1].(GradientStop.Color)" To="Yellow">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="ReadOnly">
                                            </VisualState>
                                            <VisualState x:Name="MouseOver"></VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <ScrollViewer Margin="0" x:Name="PART_ContentHost" ></ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </style>
    Lo que me imagino es que no estoy colocando la linea correctamente por que el backgraund tiene un RadialBrush y esta dividido en 3 partes, como puedo mantener la configuracion del RadialBrush y solo cambiar el color de cada una de las divisiones.


    • Editado nobunagaii martes, 21 de febrero de 2012 19:38 Error de escritura
    martes, 21 de febrero de 2012 19:36
  • Hola 

    Cambia el ColorAnimation del Font_textbox2 por este:

    <visualstate x:name="Disabled">
        <storyboard>
            <coloranimation duration="0:0:3" storyboard.targetname="Border" storyboard.targetproperty="Background.GradientStops[1].Color" to="Yellow">
            </coloranimation>
        </storyboard>
    </visualstate>

    Un saludo

    PD: Solo agrega mas ColorAnimation cambiando el index [x] por otro numero


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog


    • Editado Antonio Lobo martes, 21 de febrero de 2012 22:29
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:28
    martes, 21 de febrero de 2012 22:27
  • Hola lobo disculpa la tardansa, e probado el codigo que me dejaste pero no funciona me dice que compruebe si el objeto admite esa propiedad y estas claro que si lo hace fuera del template, pero en el template me marca error explicitamente esta linea cuando lo estoy ejecutando:
    "Background.GradientStops[1].Color"
    Alguna idea
    • Editado nobunagaii viernes, 24 de febrero de 2012 17:04
    viernes, 24 de febrero de 2012 14:18
  • Hola

    Es bastante extraño pues yo he probado lo que he puesto y no me da ningún error.

    Voy a probar nuevamente y te comento.

    Un saludo

    Edit: Se me olvidó comentar que esto:

    <Border.Background>
        <RadialGradientBrush Center="0.5,-0.5" GradientOrigin="0.5,1.5" RadiusX="1" RadiusY="1.5" Opacity="0.8">
            <GradientStop Color="#00ff00" Offset="0.2"/>
            <GradientStop Color="#00a000" Offset="0.3"/>
            <GradientStop Color="#206000" Offset="0.5"/>
        </RadialGradientBrush>
    </Border.Background>
    lo pasé al segundo Style que pusiste, debido a que Background.GradientStops[1].Color busca un Gradiente el cual no está obteniendo según lo que tu tienes en el momento. 

    Cambia esto:

    <Border.Background>
        <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
    </Border.Background>

    por lo que puse antes.


    Antonio Lobo
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi blog


    • Editado Antonio Lobo sábado, 25 de febrero de 2012 2:35
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:28
    sábado, 25 de febrero de 2012 2:22
  • Muchas gracias lobo ya funciona bien, termino el codigo y lo subo para que otros lo puedan usar
    lunes, 27 de febrero de 2012 16:28
  • <Style x:Key="Font_textbox" TargetType="TextBox">
                    <Setter Property="FontFamily" Value="Century Gothic"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                                <Border Name="Border" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Black">
                                    <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>      
                                    <Border.Background>
                                        <RadialGradientBrush Center="0.5,-0.5" GradientOrigin="0.5,1.5" RadiusX="1" RadiusY="1.5" Opacity="0.8">
                                            <GradientStop Color="#00ff00" Offset="0.2"/> <!--CLARO--> 
                                            <GradientStop Color="#00a000" Offset="0.3"/><!--MEDIO-->
                                            <GradientStop Color="#206000" Offset="0.5"/><!--OSCURO-->
                                        </RadialGradientBrush>
                                    </Border.Background>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#00ff00">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#00a000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#206000">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#00a000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#206000">
                                                    </ColorAnimation>
                                                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="Border" 
                                                     Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#204000">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
    Asi quedo el estilo funcionando gracias a lobo por ayudarme.
    • Marcado como respuesta nobunagaii lunes, 27 de febrero de 2012 16:37
    lunes, 27 de febrero de 2012 16:37