none
Control Button colorearlo de verde al deshabilitarlo desde el ResourceDictionary.xaml RRS feed

  • Pregunta

  • Hola!, tengo algunos controles configurados para que se pienten

    de ciertos colores según sus eventos.

    Pero el control del boton, no puedo ponerlo en verde "green"

    cuando lo mando deshabitar.

    tengo entendido que debo generar un template, pero no me sale

    cuando lo copio al ResourceDictionary.xaml

    alli como sería.

     

    Boton verde cuando se deshabilite

     

    muchas gracias por su gran apoyo..

    saludos

    lunes, 14 de noviembre de 2011 17:18

Todas las respuestas

  • Hola Omar.

    ¿el problema es hacer el template o enlazarlo?.

    Bueno, te dejo un ejemplillo, como no comentas nada es para silverligth, pero se puede modificar facilmente:

     

    estilo de un boton insertado en un archivo de diccionario (por ejemplo 'ResourceDictionary1.xaml')

    	<Style x:Key="ButtonStyle1" TargetType="Button">
    		<Setter Property="Background" Value="#FF1F3B53"/>
    		<Setter Property="Foreground" Value="#FF000000"/>
    		<Setter Property="Padding" Value="3"/>
    		<Setter Property="BorderThickness" Value="1"/>
    		<Setter Property="BorderBrush">
    			<Setter.Value>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="#FFA3AEB9" Offset="0"/>
    					<GradientStop Color="#FF8399A9" Offset="0.375"/>
    					<GradientStop Color="#FF718597" Offset="0.375"/>
    					<GradientStop Color="#FF617584" Offset="1"/>
    				</LinearGradientBrush>
    			</Setter.Value>
    		</Setter>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid>
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						
    						<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
    							<Grid Background="{TemplateBinding Background}" Margin="1">
    								<Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
    								<!-- TODO: Eliminado el rectangulo superpuesto para el gradiente -->
    							</Grid>
    						</Border>
    						<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    						<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
    						<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    						
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    

    Este es el estilo por defecto del boton, he escrito 'TODO' donde he eliminado un rectangulo que se superpone con un degradado, de este modo se establecera el color de fondo que se le de al boton.

    Para enlazar el diccionario en el archivo App.xaml puedes incluirlo:

        <Application.Resources>
            
        	<ResourceDictionary>
        		<ResourceDictionary.MergedDictionaries>
        			<ResourceDictionary Source="ResourceDictionary1.xaml"/>
        		</ResourceDictionary.MergedDictionaries>
            
        		<SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
            
        	</ResourceDictionary>
            
        </Application.Resources>
    

    Se puede incluir de otras formas, pero de este modo estara disponible para toda la aplicacion, de modo que ya puedes hacer lo siguiente para poner un color verde:

    <Button Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" Style="{StaticResource ButtonStyle1}" Background="Lime" />
    

    y segun el color que le pongas de fondo, se mostrara con ese color totalmente.

     


    Saludos
    David González
    MCP, MCTS
    Visita mi Blog en: http://www.dgzornoza.com/
    miércoles, 16 de noviembre de 2011 8:19