Vanguarsoft Developers blog

Ing. Javier Leal -Desarrollador CPANAX C.A / Microsoft Student Partners – VENEZUELA

Colores Dinamicos para interfases en Silverlight

Deja un comentario

Buenos dias, muchos quiza han pensado en como aplicar temas en sus aplicaciones, y que de alguna manera para que nuestros Usuario elijan el color de su gusto para su aplicación, lo primero el buscar un control que te permita seleccionar el color que deseas para x parte de tu aplicacion Silverlight tipicamente llamado ColorPicker.

ColorPickerExample.png

Existen Muchas empresas fabricante de controles que lo incluten como Telerik: Infraguistic: y por supuesto nunca puede faltar construbuciones  de Codeplex que son gratuitas a diferencia de los antes mencionados y se llama Silverlight Contrib que no solo trae el ColorPicker sino unsa serie de controles que quiza les sea util lo pueden descargar aca.

http://silverlightcontrib.codeplex.com/

1.- Para iniciar luego de descargar las SilverlightContrip creamos un nuevo proyecto de Silverlight Vacia y le agregarmos las referecnia de Silverlight contrip.

image

2.- Agregamos una nueva Entidad LLamada EntidadStyle que va a contener los colores que se van a reflejar en la pantalla segun elija el usuario.

Cosigo C shard

public class EntidadEstilo

    {

        private SolidColorBrush _color1;

 

        public SolidColorBrush Color1

        {

            get

            {

                return _color1;

            }

            set

            {

                if (value != null & value != _color1)

                {

                    _color1 = value;

                }

            }

        }

 

        private SolidColorBrush _color2;

 

        public SolidColorBrush Color2

        {

            get

            {

                return _color2;

            }

            set

            {

                if (value != null & value != _color2)

                {

                    _color2 = value;

                }

            }

        }

 

        private string _scolor1;

 

        public string SColor1

        {

            get

            {

                return _scolor1;

            }

            set

            {

                if (value != null & value != _scolor1)

                {

                    _scolor1 = value;

                }

            }

        }

 

        private string _scolor2;

 

        public string SColor2

        {

            get

            {

                return _scolor2;

            }

            set

            {

                if (value != null & value != _scolor2)

                {

                    _scolor2 = value;

                }

            }

        }

    }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

3.- Para hacer el articulo un poco mas interesante agregamos un ViewModel para la aplicacion, simplemente creamos una nueva clase llamada PrincipalVM ya que este estara presente en todas las pantallas y cualquier cambio de color se vera reflejado en todas.

Agregamos la propiedad PropertyChance Y asociamos este View Model al DataContext de la pagina MainPage.

Cosigo C shard

public class PrincipalVMcs

{

 

    public event PropertyChangedEventHandler PropertyChanged;

 

    protected virtual void RaisePropertyChanged(string propertyName)

    {

        var handler = this.PropertyChanged;

        if (handler != null)

        {

            handler(this, new PropertyChangedEventArgs(propertyName));

        }

    }

}

Agregamos un Key al App con el ViewModel Principal para quepueda ser visto desde todas las paginas.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

             x:Class="DinamyColorInterface.App"

             xmlns:ViewModel="clr-namespace:DinamyColorInterface"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             mc:Ignorable="d" 

             >

    <Application.Resources>

        <ViewModel:PrincipalVM x:Key="principal" d:IsDataSource="True"/>

    </Application.Resources>

</Application>

Y agregamos la referencia de ese Key al Contexto de la pagina.

<UserControl x:Class="DinamyColorInterface.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:Contrib="clr-namespace:SilverlightContrib.Controls;assembly=SilverlightContrib.Controls"

    mc:Ignorable="d" DataContext="{Binding Source={StaticResource principal}}"

    d:DesignHeight="300" d:DesignWidth="400"  >

 

        <Grid x:Name="LayoutRoot" Background="White">

 

    </Grid>

</UserControl>

4.- Agregar una propiedad al PrincipalVM de tipo EntidadStyle y agregamos el evento PropertyChange a nuestra ViewModel para que se dispare al momento de que la propiedad cambie de valor.

private EntidadEstilo _cfgStyle;

 

public EntidadEstilo ConfigStyle

{

    get

    {

        if (_cfgStyle == null)

            _cfgStyle = new EntidadEstilo();

 

        return _cfgStyle;

    }

    set

    {

        if (value == null)

            return;

        if (value.Equals(_cfgStyle))

            return;

 

        _cfgStyle = value;

 

 

        RaisePropertyChanged("ConfigStyle");

    }

}

5.- Creamos un Metodo que Capture el ColorSeleccionado en este caso tambien capturare un Numero entero para hacer un SelectCase y Identidicar que color quieren cambiar ya que agregare dos Objetos que cambie Dinamicamente de color.

public void ColorSeleccionado(Color ColorSelect, int caso)

{

    EntidadEstilo New = new EntidadEstilo();

    switch (caso)

    {

        case 1:

 

            New.Color1 = new SolidColorBrush(ColorSelect);

            New.Color2 = ConfigStyle.Color2;

            ConfigStyle = New;

 

            break;

        case 2:

            New.Color2 = new SolidColorBrush(ColorSelect);

            New.Color1 = ConfigStyle.Color1;

            ConfigStyle = New;

            break;

        default:

            break;

    }

 

}

6.- Agregamos el PrincipalVM a la propiedad DataContext y desde el CodeBenhing de MainPage agregamos una variable global de tipo PrincipalVM y luego de inicializar capturamos el DataContex de la pagina que agregamos a travez de XAML.

PrincipalVM Context;

public MainPage()

{

    InitializeComponent();

    Context = this.DataContext as PrincipalVM;

}

7.- Ya solo queda agregar el ColorPicker y llamar su evento. SelectedColorChange en este evento Con la variable global que agregamos en el paso anterior llamamos al metodo para cambiar el color que requiera el Usuario y Agregamos dos rectangulos para hacerle Binding a sus propiedades Backgraund cabe destacar que puedes cambiar el color de cualquier objeto de su aplicacion Silverlight.

Condigo de la Interfaz XAML

<UserControl x:Class="DinamyColorInterface.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:Contrib="clr-namespace:SilverlightContrib.Controls;assembly=SilverlightContrib.Controls"

    mc:Ignorable="d" DataContext="{Binding Source={StaticResource principal}}"

    d:DesignHeight="300" d:DesignWidth="400"  >

 

        <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel>

            <RadioButton x:Name="Color1" IsChecked="True" Content="Color 1"></RadioButton>

            <RadioButton x:Name="Color2" Content="Color 2"></RadioButton>

 

        </StackPanel>

        <Ellipse Height="64" Fill="{Binding ConfigStyle.Color1}" Name="ellipse1" Margin="12,118,0,118" Stroke="Black" HorizontalAlignment="Left" Width="61" />

        <Ellipse Name="ellipse2" Fill="{Binding ConfigStyle.Color2}" Margin="12,0,0,50" Stroke="Black" HorizontalAlignment="Left" Width="61" Height="62" VerticalAlignment="Bottom" />

        <Contrib:ColorPicker SelectedColorChanged="ColorPicker_SelectedColorChanged"></Contrib:ColorPicker>

    </Grid>

</UserControl>

Codigo del Code Behing de MainPage

public partial class MainPage : UserControl

{

    PrincipalVM Context;

    public MainPage()

    {

        InitializeComponent();

        Context = this.DataContext as PrincipalVM;

    }

 

    private void ColorPicker_SelectedColorChanged(object sender, SilverlightContrib.Controls.SelectedColorEventArgs e)

    {

        if(Color1.IsChecked == true)

        {

            Context.ColorSeleccionado(e.SelectedColor, 1);

        }else

        {

            Context.ColorSeleccionado(e.SelectedColor, 2);

        }

        

    }

}

Finalmente…

image

Recuerdes esos colores lo pueden almacenar en una base de datos y guardar la Configuracion de colores de cada usuario y aplicar los colores estrategicamente a cada seccion de la aplicacion espero les sirva.

 

Autor: Ing. Javier J. Leal H.

Desarrollador en CPANAX C.A, Microsoft Student Partners de Venezuela Amantes de nuevas Tecnologías Desarrollador es Silverlight 5, Windows 8, Windows Phone, Influenciador y Orador en Actividades Tecnológicas Microsoft

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s