Archivo

Archive for the ‘WPF’ Category

[WPF] Manejo de Temas de Estilos, Resource Dictionary

abril 24, 2010 4 comentarios

Buenas,

Aquí con un post sobre como majear los estilos en una aplicación de WPF. Les platico el escenario, Imaginen que ya terminamos una aplicación que ya funciona y todo, pero queremos que el Layout se vea mejor, ustedes saben eso de la UX (User Experience), entonces pensamos en agregar la opción de que cambie el Estilo de nuestra aplicación (cómo lo que se hace en ASP.NET :P). Bueno ps aquí un pequeño post de como hacer esto.

1.- Creamos una nueva aplicación de WPF, y agregamos este código en la Ventana Principal.

<Grid x:Name="host">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,96,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
        
        <Menu Height="23" HorizontalAlignment="Left" Margin="12,0,0,0" Name="menu1" VerticalAlignment="Top" Width="80" >
            <MenuItem Header="Diseño" >
                <MenuItem Header="Temas">
                    <MenuItem Header="Azul" Tag="Azul" Click="Selected_Theme" />
                    <MenuItem Header="Rojo" Tag="Rojo" Click="Selected_Theme" />
                    <MenuItem Header="Verde" Tag="Verde" Click="Selected_Theme" />
                </MenuItem>
            </MenuItem>
        </Menu>
    </Grid>

2.- Luego  agregamos una carpeta que se llame “Temas” en donde colocaremos los diccionarios de recursos para nuestros temas. Dentro de esta carpeta vamos a agregar los respectivos diccionarios, en este caso Azul.xaml, Rojo.xaml y Verde.xaml.

Este es el código para recurso.

Azul.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Azul" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Blue" />
    </Style>
</ResourceDictionary>

Rojo.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Rojo" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Red" />
    </Style>
</ResourceDictionary>

Verde.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style x:Key="Verde" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Green" />
    </Style>
    
</ResourceDictionary>

Como se pueden dar cuenta solo estoy cambiando la propiedad Background, eso solo como ejemplo, porque en la practica estos archivos llevan un montón de código que se genera por lo regular con Expression Blend 😀

Los archivos quedan así:

image

Ahora en el evento de Click de los elementos del menú, colocamos el siguiente código:

private void Selected_Theme(object sender, RoutedEventArgs e)
{
    MenuItem menu = sender as MenuItem;
    string tema = menu.Tag as string;            
    AplicaEstilo(tema);
}

Y por ultimo el método de de AplicarEstilo, que tiene este código:

private void AplicaEstilo(string tema)
{

    string uri = string.Format("{0}{1}.xaml", rutaTemas, tema.ToString());

    Collection<ResourceDictionary> stylesDiccionario = new Collection<ResourceDictionary>();

    IEnumerable controles = LogicalTreeHelper.GetChildren(this.host);
    
    ResourceDictionary diccionario = new ResourceDictionary();
    diccionario.Source = new Uri(uri, UriKind.RelativeOrAbsolute);
    Style nuevo = diccionario[tema] as Style;

    
    
    foreach (object c in controles)
    {
        if (c is Control)
        {
            ((Control)c).Style = nuevo;
        }
    }            

}

 

Cabe mencionar, que en el foreach solo aplico a los elementos que heredan de Controls, ya que la propiedad background no aplica en todos los elementos. Pero vaya si ejecutamos la aplicación funciona más o menos así:

image

Aquí el código fuente, que por cierto esta en VS 2010 :p

image

Etiquetas de Technorati: ,,,
Anuncios
Categorías:Ejemplos, WPF

[WCF] Consumiendo un Servicio de WCF

octubre 6, 2009 6 comentarios

Buenas,

Ya es un poco tarde y me he estado peleando un buen rato con un error al consumir un servicio de WCF. Cree mi servicio agregue mi referencia y cuando creo objeto de dicho servicio me muestra el siguiente mensaje:

Could not find default endpoint element that references contract ‘Service.IService’ in the ServiceModel client configuration section. This might be because no configuration file was found for your application, or because no endpoint element matching this contract could be found in the client element.

Indague in poco en Google y todos me dicen que se trata de que debo poner mi nombre de espacios antes del contrato, pues bien lo hice y no resulto nada :S. Así que comencé a revisar el Webconfig de mi Servicio (Todo bien), luego el app.config de mi aplicación que consume el Servicio (Todo bien, esta aplicación es una librería).

Luego mi aplicación principal también tiene un app.config (esta es una aplicación de WPF), y vi que este archivo no contenía nada :S y al parecer Visual Studio estaba buscando en ese archivo el contrato :P, y lo que hice es copiar el contenido que genera el asistente en el app.config de mi aplicación de librería y pasarlo al app.config de mi  aplicación WPF y listo, todo funciona correctamente. 😀

Por si no me explique aquí unas imagenes.

1.- Muestra el error:

image

2.- Esta es la estructura de mi solución, solo necesito mover mi archivo app.config.

image

Solo basta con arrastrar mi app.config desde mi proyecto cliente al principal, y listo. Espero que les sea de utilidad y no pierdan tanto tiempo como yo 😛

Etiquetas de Technorati: ,,
Categorías:Tips, WCF, WPF

[WPF]Agregar referencia de ensamblado en código XAML

septiembre 25, 2009 Deja un comentario

Buenas,

Aquí un post rápido de como hacer lo que menciona el titulo del post. Este escenario se presenta cuando creamos un proyecto de tipo “Biblioteca de clases” y queremos agregarlo a nuestro Ventana.xaml o control, etc, pero desde código.

Debemos tener primero que cuando creamos el proyecto de biblioteca de clases contener un nombre de espacio para nuestras clases. una es esto basta con agregar la siguiente línea de código en la definición de nuestra ventana:

xmlns:local="clr-namespace:MiNombreDeEspacio;assembly=MiClase"

en donde local será el nombre de nuestro espacio de nombres dentro del código XAML y cuando lo usemos seria de la siguiente manera:

local:MessageListener.Instance

Bueno espero que le sirva este post para no perder tiempo 😀

Etiquetas de Technorati: ,
Categorías:Tips, WPF, XAML

[WPF] Conectándome a una Base de Datos SQL

mayo 10, 2009 14 comentarios

Un pequeño ejemplo de como hacer esto en una aplicación en WPF, esto debido a una pregunta dentro de este Blog. Lo primero que pensé cuando me preguntaron como hacer esto  fue: “Es lo mismo que en Aplicaciones para Windows”. Y aquí un ejemplo sencillo.

Primero nos vamos a SQL Management Studio nos conectamos a nuestro motor de base de datos y creamos una Base sencilla, con una tabla y agregamos valores, esto con la siguientes instrucciones:

--Creamos la base de datos
CREATE DATABASE BdWPFEjemplo
GO

--Indicamos que vamos a trabajar sobre esta nueva bd
USE BdWPFEjemplo
GO

-- Creamos una tabla
CREATE TABLE Alumnos (nombre NVARCHAR(50), apellido NVARCHAR(50), edad INT)
GO

--Asignamos algunos valores a nuestra tabla
INSERT INTO Alumnos VALUES ('Norberto','Rojas',23)

Ya que tenemos nuestra BD, lo que sigue es crear nuestro proyecto de WPF. Una vez aquí lo que vamos a hacer es escribir la siguientes líneas en nuestro archivo app.config

<appSettings>
    <add key="cnx" value="Data Source=.\SQLNOR;
         Initial Catalog=BdWPFEjemplo;
         Persist Security Info=True;
         User ID=*****; 
         Password=*****" />
  </appSettings>

Ahora solo falta ver que es lo que queremos hacer, si solo una consulta, un actualización una inserción o ejecutar algún Procedimiento almacenado que realice una combinación de las acciones antes mencionadas. Para el nuestro caso como es un ejemplo sencillo solo ejecutaremos un SELECT común para mostrar el nombre de los alumnos (en este caso solo el mío) primero agregamos el código para nuestra conexión que es este:

private SqlConnection myConexion()
{
  return new SqlConnection(ConfigurationSettings.AppSettings["cnx"]);
}

Ya con esto solo ejecutaremos nuestra instrucción SELECT con un command y listo. El código es el siguiente:

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                SqlConnection conn = myConexion();
                SqlCommand comm = new SqlCommand("SELECT nombre FROM Alumnos", conn);

                conn.Open();
                txtNombreAlumno.Text =  comm.ExecuteScalar().ToString();
                comm.Dispose();
                conn.Close();

            }            
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
            
        }

Y si generamos y ejecutamos este es el resultado:

image

Y como pueden ver, el hecho de conectarte a una base de datos, ya sea desde una aplicación de WPF, una aplicación para Windows, un Web Services o alguna aplicación de ASP.NET el proceso es el mismo, y debe de funcionar igual para todo. Espero que este sencillo post les sea útil. Amito Arturo aquí el ejemplo que me pedias, espero que te ayude y cualquier cosa no dudes en comentarlo o pedir ayuda en el Blog.

Slaudos!

Desarrollo experiencias ricas usando Microsoft .Net Framework y VS 2008

octubre 16, 2008 Deja un comentario

Más y más recursos gratis, esta vez toca el turno de aprender a usar las tecnologías de WCF (Windows Communication Foundation), WWF (Windows Workflow Foundation) y el más conocido WPF (Windows Presentation Foundation). Estos recursos son por parte de E-Learning, que como ya sabrán contiene documentación y laboratorios.

Los cursos van enfocados a personas con experiencia en Desarrollo y un poco de arquitectura de software para que puedan agregar una rica experiencia en sus soluciones, aunque si los revisan y no tiene mucha experiencia no hay mayor problema igual y es para que vayan aprendiendo sobres estas nuevas tecnologías. Recuerden los cursos son gratis!! 😀

url:https://www.microsoftelearning.com/eLearning/offerDetail.aspx?offerPriceId=213184

Etiquetas de Technorati: ,,,

Recursos de WPF, XAML y Blend

agosto 16, 2008 Deja un comentario

Que tal, pues buscando por la red, me encontré con unos buenos ejemplos y recursos para desarrollar con estas tecnologías en donde muchos de los casos podemos descargar los ejemplos, y revisar el código para saber como es que están hechos.

Existen ejemplos de diferentes tipos y constantemente se esta actualizado, así que aquí les dejo el enlace, y espero que aprovechen estos recursos, que para satisfacción de muchos están en Español :-).

URL: http://blackout360.wordpress.com/category/wpf/

[Silverlight]Creando una aplicación Deep Zoom

julio 13, 2008 6 comentarios

Muy bien, pues con ayuda del nuevo Deep Zoom Composer, vamos a crear una aplicación de ejemplo en solo unos cuantos minutos, y además lo vamos a incluir en un blog de Windows Live Spaces. No colocare aquí el ejemplo terminado ya que en WordPress ya no podemos hacer uso de los tags de iframe :S, si alguien sabe como hacer me dice porfa. Bueno iniciamos…

1.-Primero descargamos e instalamos Deep Zoom Composer

URL: http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

2.- Una vez terminada la instalación, abrimos el programa (Inicio->Todos los Programas->Deep Zoom Composer). y damos clic en File->New project.., al que llamaremos en este ejemplo: Amigos.

               deepzoom

3- Agregamos imágenes en el panel derecho que dice: Add imgae…

4.-Después damos clic en donde dice Compose y del panel derecho de donde agregamos las imágenes, las arrastramos hacia el centro, y ahi comenzamos a ordenar nuestras fotos, además podemos cambiar la posición del layer, es decir si esa atrás o al frente una foto de otra, entonces tenemos algo así:

                deepzoomcomposer

5.-Ahora damos clic en la parte de Export y le asignamos un nombre por ejemplo: DeepZoomAmigos, en la parte de out type, seleccionamos Export images and Silverlight Project y damos clic en Export.

6.-Damos clic en  Preview in Browser y listo, ya tenemos lista nuestra aplicación DeepZoom 😀

Hospedando nuestra aplicación en Silverlight Streaming

URL:http://silverlight.live.com/account/create.aspx

1.-Preparamos nuestra aplicación, buscamos la carpeta de ClientBin dento de nuestra carpeta de proyecto, verificamos que contenga el archivo con extension .xab y dentro de esta carpeta de ClientBin creamos nuestro manifiesto.xml, con el siguiente código:

<SilverlightApp>
  <version>2.0</version>
  <source>ClientBin/DeepZoomProject.xap</source>
  <width>720</width>
  <height>540</height>
  <background>gray</background>
  <isWindowless>false</isWindowless>
</SilverlightApp>

recuerden renombrar el archivo de .xab con el que tengan en su proyecto.

2.- ya con esto, enzipamos nuestra carpeta ClientBin y la cargamos en Silverlight Streaming. y listo tenemos nuestro aplicación para colocarla en nuestro sitio, blog o donde quieran. Como aquí no s puede ver ejemplo les dejo una imagen, y el proyecto terminado lo  ven aquí: http://mspnor.spaces.live.com/blog/cns!225760CED59218FC!573.entry.

      Dibujo 

Etiquetas de Technorati: ,,
Categorías:Deep Zoom, silverlight, WPF, XAML