¿Cómo depurar una aplicación de forma remota con Visual Studio 2015? (aplica para versiones anteriores también)

marzo 9, 2016marzo 9, 2016hectorperez Deja un comentario

Aunque existe una guía oficial para llevar a cabo este procedimiento, en esta entrada detallaré los pasos necesarios para llevar a cabo la depuración de una aplicación de forma remota.

Prerrequisitos:

Aunque no es indispensable, es altamente recomendable tener activada y configurada la opción de Conexión a Escritorio Remoto en el equipo donde llevaremos a cabo las pruebas de la aplicación.

Configurando la herramienta:

En primer lugar, debemos instalar la herramienta de depuración remota para Visual Studio 2015. Se pueden elegir las herramientas para las plataformas x64, x86 y ARM.

Una vez instalado en la máquina remota, debemos iniciar el asistente para configurar la herramienta:

Esto nos desplegará una ventana donde podremos configurar si deseamos que la aplicación se ejecute como un servicio en la máquina de pruebas. En mi caso lo dejaré deseleccionado.

En la siguiente ventana, se nos pregunta la configuración que deseamos aplicar para el firewall de acuerdo al tipo de red seleccionada. Para cuestiones prácticas dejaré seleccionadas todas las redes.

Después de este paso, podremos dar click en el botón Finalizar. Con esto hemos configurado la herramienta para poder llevar a cabo pruebas de nuestras aplicaciones en una máquina remota.

Preparándonos para la prueba:

Dentro de Visual Studio, debemos irnos a las propiedades del proyecto (no de la solución):

Dentro de las propiedades del proyecto, debemos irnos al apartado “Debug”, y en la sección de “Start Options”, habilitar “Use remote machine”. En la casilla de la derecha, debemos utilizar de preferencia la dirección IP de la máquina remota.

Paso siguiente, debemos hacer un rebuild de nuestro proyecto (hay que checar que se encuentre en modo Debug).

En seguida, debemos crear una estructura en la máquina remota que sea idéntica a nuestra carpeta bin de nuestra máquina local. Es decir, si la carpeta Debug de mi proyecto se encuentra en C:\Users\hprez\Documents\Visual Studio 2015\Projects\Blog\ExcelSample\ExcelSample\bin\Debug, debemos crear esta misma estructura en la máquina remota, tal como en el siguiente ejemplo:

Máquina local (con VS)

Máquina remota (Sin VS)

Por último, deberemos copiar el contenido de la carpeta Debug de nuestro proyecto, y pegarlo en la carpeta Debug de la máquina remota:

Una vez que estemos listos, deberemos iniciar la herramienta de depuración remota en la máquina remota, la cual, nos deberá indicar que se encuentra esperando nuevas conexiones:

Finalmente, iniciaremos nuestro proyecto desde Visual Studio, y todo deberá funcionar a la perfección:

Cabe aclarar que si deseamos depurar la aplicación a través de un breakpoint en un punto específico de la aplicación, debemos regenerar el proyecto y copiar de nuevo el contenido de la carpeta bin, esto es debido a que se tiene que regenerar la información de depuración.

Espero que a más de uno le sea de utilidad.

Saludos.

AutoComplete TextBox en WPF

May 29, 2009hectorperez 7 comentarios

Hace algunos días, durante el desarrollo de un proyecto, me di cuenta que este es un control que debería sin duda, estar entre los controles de WPF, sin embargo, otra es la realidad.

Así que, en este post, crearemos un Autocomplete TextBox de una manera muy pero muy sencilla, de hecho, será un ComboBox el que utilizaremos para este fin:

1.- En primer lugar, he creado un ComboBox, al cual le he agregado algunos elementos del tipo TextBlock:

Con esto tendremos un ComboBox común y corriente:

2.- Lo único que debemos hacer, es cambiar 2 propiedades del ComboBox, a verdaderas, las cuales son “IsEditable” y “StaysOpenOnEdit”

3.- Ponerle un nombre al ComboBox (En mi caso le he puesto miComboBox), y posteriormente agregar un evento del tipo GotFocus, con el siguiente código:

   1: private void miComboBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)

   2: {

   3:     miComboBox.IsDropDownOpen = true;

   4: }

Esto nos servirá, para que la lista sea abierta cada vez que entremos en el ComboBox.

4.- Editar la copia del ComboBox

y eliminar el elemento ToggleButton:

5.- Todo listo, a probarlo!!!!

Wow, funciona de maravilla 😀

En el siguiente post, mostraré cómo usarlo de una manera más práctica ;), hasta entonces, nos vemos.

Salu2

Héctor Uriel Pérez Rojas

¿Cómo crear un Splash Screen en WPF?

diciembre 6, 2008hectorperez 4 comentarios

John 10:14-15“I am the good shepherd; I know my sheep and my sheep know me— just as the Father knows me and I know the Father—and I lay down my life for the sheep.”

Para aquellos no familiarizados con el tema, el Splash Screen según la Wikipedia es:

“Splash screen is a term used to describe an image that appears while a computer program is loading. Splash screens sometimes do not cover the entire screen, but only a rectangle near the center. The splash screens of operating systems and some applications that expect to be run full-screen usually cover the entire screen.”

En palabras sencillas, un splash screen es la imagen que te aparece cuando inicias algún programa como office, visual studio, etc. Bien, pues para que tengas una idea, antes, era un tanto complicado hacer que estas aparecieran en escena, ya que no aparecen junto con la aplicación, sino que son lanzadas justo antes de que se cargue completamente tu programa, y esperan a que este se cargue para darle paso. Pues hoy aprenderemos a hacerlo sin tanto esfuerzo.

Antes que nada, los requisitos, Visual studio 2008, y lo más importante, el SP1 del framework 3.5.

Método 1:

Crear una aplicación WPF estándar. Paso siguiente es agregar la imágen que quieras que sea tu splashscreen:

En mi caso, he creado una para efectos de la demostración:

Acto seguido, es irnos a las propiedades de la imagen que hemos insertado, y cambiar el modo de Build Action a Splash Screen:

Si has hecho todo bien, seguramente debe de salirte tu splash screen antes de cargar la aplicación:

Sencillo no?

Paso # 2:

Para continuar con la demo, cambiaremos el modo de la imagen a None:

Dirigete a tu archivo (en mi caso) Window1.xaml.cs, donde agregarás el siguiente código, desupés del método InitializeComponent():

SplashScreen sp = new SplashScreen("tarjeta.png");
sp.Show(true);

Si te das cuenta, lo que hacemos aquí, es crear un nuevo SplashScreen, pasando el parámetro de nuestra imágen al constructor. La propiedad de Show, que tiene que ser booleano, identifica si la imagen se cerrará sola cuando se cargue nuestro programa o no. Ahora puedes probar el programa y verás que sucede lo mismo que la vez anterior.

Espero que te sea de utilidad 😉

Salu2

Héctor Pérez

Nuevas Características de C# 3.0 (Automatically Implemented Properties)

julio 30, 2008hectorperez Deja un comentario

A partir de esta entrada, empezaré una serie de posts donde mencionaré las nuevas características de c# 3.0, con las cuales simplificarás código y te ahorrarás tiempo.

Primero, vamos a hablar de las Automatically Implemented Properties(Propiedades implementadas automáticamente).

Anteriormente, y es común que las propiedades se establezcan de esta forma:

public class Persona
{
private string nombre;
private string ciudad;

    public int NOMBRE {
    get { return nombre; }
    set { = value; } }

    public int CIUDAD {
    get { return ciudad; }
    set { y = value; } }
}

como vemos, primero se declaran atributos, en este caso nombre y ciudad, y posteriormente se crean las 2 propiedades correspondientes, ambas de escritura y lectura.

Ahora, en C#, ya no es necesario todo eso, y se simplifica a lo siguiente:

public class Persona
{
    public int NOMBRE{get; set;}
    public int CIUDAD {get; set;}
}

¿Qué ha cambiado? Bien, que ya no es necesario todo ese rollo de get{ return…..; sino que el compilador infiere que estamos estableciendo un regreso de valor y una asignación de valor, pero entra la duda, qué pasaría si quisieramos que fuera una propiedad de solo lectura? Bien, pues sencillo, tenemos que declarar el valor para set como privado, es decir:

public class Point
{
    public int NOMBRE{get; private set;}
    public int CIUDAD  {get; private set;}
}

Mucho mas sencillo no?

Salu2

Héctor Pérez

¿Cómo cargar una tabla de BD hecha en SQL 2005 en WPF?

julio 28, 2008julio 29, 2008hectorperez 5 comentarios

Bien, pues esta es una pregunta que me ha llegado hoy, así que he decidido escribir sobre esto hoy.

Antes que nada; ¿Qué control usar?

Bien, los que ya están mas adentrados en esto, sabrán que actualmente el control DataGridView existente en Windows Forms no existe en WPF, pero sí en silverlight, así que, lo que yo les recomiendo es usar un control ya existente y que es gratuito, se llama Xceed DataGrid for WPF, y lo puedes descargar desde aquí:

http://xceed.com/Grid_WPF_Intro.html

Tienes que registrarte para que te den un serial válido, la verdad es un control muy sencillo de usar, vale si no estás convencido puedes echarle un vistazo al demo aquí:

http://xceed.com/Grid_WPF_Demo.html

Bien, si ya has descargado e instalado el control, lo que tienes que hacer es :

1.- Importar las librerías necesarias, yo lo he hecho desde Visual Studio, ya has de saber, click derecho sobre el proyecto, agregar referencias, e importas todas las que empiecen con XCeed(XCeed.Controls,XCeed.Datagrid… etc).

Una vez hecho esto, si vas a tu ToolBar, notarás que tienes nuevos controles disponibles para insertar, en este caso debes insertar el DataGridControl:

Como puedes observar, el control es insertado inmediatamente, y a la vez Visual Studio nos genera el código necesario para hacer referencia al namespace.

2.- Vale lo siguiente es configurar el control desde XAML, esto lo haremos agregando 2 atributos a nuestro control, los atributos serán:

x:Name=»playersGrid» ItemsSource=»{Binding}

O sease agregamos un nombre a la grilla para que pueda ser usada desde código, y la fuente de datos de la misma, en este caso solo ponemos Binding, el cual hará binding con lo generado desde el código C#.

A continuación, vamos a nuestro archivo Code behind, y agregamos lo siguiente:

protected override void OnInitialized(EventArgs e)
{

    DataSet ds;

    base.OnInitialized(e);

    ds = getData();

    playersGrid.DataContext = ds.Tables[«cliente»];

}

private DataSet getData()
{

    string connString = string.Format(«Data Source=HÉCTOR1\\SQLEXPRESS; AttachDbFilename=|DataDirectory|\\Libreria.mdf; Integrated Security=True; User Instance=True»);

    SqlConnection conn = new SqlConnection(connString);

    DataSet dataSet = new DataSet();

    SqlDataAdapter playersAdapter = new SqlDataAdapter();

    playersAdapter.SelectCommand = new SqlCommand(«Select cve_cliente, nombre, paterno, materno, calle, ciudad from cliente», conn);

    playersAdapter.Fill(dataSet, «cliente»);

    return dataSet;

}

Básicamente, aquí lo que hago es hacer una conexión con mi servidor de Base de Datos, hago la consulta correspondiente y regreso el dataset cliente, el cual entrará en el DataContext de la grilla. Si quieres probar con tu base de datos, tienes que cambiar:

«Data Source=NOMBRE_DE_TU_SERVIDOR;

DataDirectory|\\TU_BASE_DE_DATOS.mdf;

(«Select cve_cliente, nombre, paterno, materno, calle, ciudad from cliente» POR TU SENTENCIA SQL,

«cliente» por la tabla que quieres meter en el DataContext.

Con todo esto, el resultado será algo como esto:

Ahora bien, si quieres jugar un poco mas, puedes darle click al centro de la Grilla:

Con lo cual nos aparecerán opciones de configuración de la grilla, en mi caso, cambié el tipo de vista y el tema:

con lo cual, nos queda algo mas chévere:

Espero que les haya sido de utilidad, un saludo, por cierto, igual pudiste haber utilizado el mismo control DataGridView usado en el framework 2, pero por el momento creo que esto es mejor no? Salu2

Link del proyecto: EjemploDataGrid.rar-download

Héctor Pérez

Introducción a WPF, y creación de una aplicación WPF 3-D, parte 2 de N.

May 9, 2008hectorperez 4 comentarios

Vale, qué tal a todos, en el post anterior empezamos a ver las maravillas de WPF, al crear un proyecto WPF nuevo, y al empezar a explicar el código en él contenido. Esta vez, veremos primeramente qué es XAML.

Creando una interfaz con XAML

XAML es la manera recomendada para crear interfaces de usuario en el modelo de programación de Windows Presentation Foundation, porque nos proporciona un método para separar la definición del diseño de la IU y la lógica. También permite integrar código usando archivos code-behind.

Con XAML también es posible crear una IU entera sin utilizar código. Esto lo demostramos a continuación. Recordáis el código de la vez anterior, pues aquí he agregado algún código mas:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button Height=»100″ Width=»200″>
            Hola, soy un botón
        </Button>
    </Grid>
</Window>

Vale, pues el texto seleccionado es el que hemos insertado a nuestro código. Como véis, es un elemento del tipo botón, ahora bien, cabe resaltar que WPF tiene controles predefinidos, los cuales iremos usando a través de la creación de nuestra aplicación.

Entonces, el elemento Button, es el encargado de crear un nuevo botón dentro de nuestra grilla, como véis, las etiquetas de Button están dentro de las etiquetas Grid. Esto quiere decir que tenemos una estructura jerárquica, donde algunos elementos (casi siempre contenedores) son los que tienen como «hijos» a los demás elementos.

En este caso, de igual forma a Button se le ha definido un Height de 100 y un width de 200, que son los atributos propiamente del botón. Ahora bien, dentro del butón, tenemos el texto «Hola, soy un botón, lo cual quiere decir que es el contenido del botón, pero no solamente puede ser texto, hubieramos podido insertar cualquier otra cosa, pero de eso hablaremos mas adelante. Por lo pronto, el resultado es el siguiente:

Vale, ahora procedamos a hacer algo un poco mas complejo, recordáis que les he dicho que una grilla es un contenedor? vale, pues también hemos mencionado que el botón soporta 1 solo elemento contenido(si, el que aparece entre <button>CONTENIDO</button>, asi que en teoría, podemos insertar una grilla como contenido del control, para después, insertar mucho mas contenido dentro del mismísmo botón!! Insertemos una grilla con el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button>
            <Grid>
            </Grid>
        </Button>
    </Grid>
</Window>

Como véis, hemos en primer lugar, quitado los ATRIBUTOS del botón, asi lograremos que el botón se ajuste a las dimensiones del elemento padre, es decir, de la grilla que lo está conteniendo, que a su vez, se está ajustando a las dimensiones de la ventana(window), y en segundo lugar, hemos reemplazado el contenido de CONTENT que era «Hola soy un botón» por una grilla, a la cual le modificaremos algunos atributos, como véis en el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button>
           <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            </Grid>
        </Button>
    </Grid>
</Window>

A este código solo le hemos cambiado el height y el width, aparte de un nuevo atributo: HorizontalAlignment, el cual nos dice hacia donde queremos ubicar el control en cuestión de su padre, en este caso en el centro.

El resultado es el siguiente:

Vale, en la imagen se nota un cuadrado dentro del botón gris, esta es la grilla, pero pasemos a hacer algo mas interesante, insertaremos un video, una imágen y un textblock dentro del mismismo botón, para eso, expliquemos que son las rowsdefinitions y las columndefinitions:

RowDefinition: Dentro de la grilla, marca definiciones de una fila.

ColumnDefinition:Dentro de la grilla, marca definiciones de una columna.

Es decir, cuando aplicamos estas row y column definitions, lo que hacemos es crear como líneas a través de la grilla, con el propósito de guiarnos y de tener una mejor distribucion de los elementos dentro de una grilla. Esto lo ves en el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            </Grid>
        </Button>
    </Grid>
</Window>

como ves, las column y row definitions se definen dentro del elemento <Grid></Grid>. Esto es porque pasa a ser un subelemento de Grid, aquí hemos definido 2 column y 2 row definitions. Meramente, las dimensiones mostradas son las de los espacios que hay ocupan cada uno de las definiciones de columna o de filas. El resultado es el siguiente:

Como véis, el mismo visual studio nos muestra las respectivas dimensiones de los espacios, de las columnas 142, y 136, y de las filas 131 para cada una.

Ahora bien, para poder insertar apropiadamente el video primeramente, debemos añadirlo dando click derecho a nuestro poyecto, luego Add, y finalmente Existing Item:

Vale, ahora seleccionamos cualquier video que tengamos, preferentemente uno corto, como lo son los de prueba de Windows, en mi caso insertare el clásico de bear.wmv

Bien, ahora pasemos a agregar un control <MediaElement>

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
                <MediaElement Source=»Bear.wmv» Grid.Column=»0″ HorizontalAlignment=»Center» VerticalAlignment=»Top»/>
            </Grid>
        </Button>
    </Grid>
</Window>

Mas que nada, Media Element nos sirve para alojar contenido sobre todo de videos y de música. En este caso, hemos ajustado el alineamiento horizontal lal centro y el alineamiento vertial en «Top», es decir que se ajuste a la parte superior de quien lo contiene.

Bien, si vemos gráficamente esto, el resultado es:

Ahora, si procedemos a ejeuctar esto, ocurre lo siguiente: No se reproduce ningún video. ¿Porqué ocurre esto? Pues porque no tenemos definida ninguna línea de tiempo que reproduzca este video. Sobre esto hablaremos después, por lo pronto, debemos insertar el siguiente código para que el video se reproduzca correctamente:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″ xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=»d»>
   <Window.Resources>
        <Storyboard x:Key=»Bear_wmv»>
            <MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»>
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
                <MediaElement x:Name=»Bear_wmv» Grid.Row=»0″ Grid.Column=»0″ VerticalAlignment=»Top» Height=»123.5″ Grid.ColumnSpan=»2″ Margin=»0,0,8,0″ />
        </Grid>
        </Button>
    </Grid>
</Window>

Vale, lo mas sobresaliente de este código, es que hemos creado una línea del tiempo (<Storyboard>), la cual dice:

<Storyboard x:Key=»Bear_wmv»> = Etiqueta de tipo linea del tiempo, con un nombre (o llave de key) que se llamará Bear_wmv

<MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/> = Línea del tiempo del tipo media, con el tiempo de inicio 00:00:00 ( o sea que empiece a reproducir a partir de ese tiempo en el video), un objetivo que va a ser Bear_wmv, que es como hemos definido el MediaElement dentro de nuestra grilla, y con la fuente u orígen que será Bear.wmv propiamente.

Si os dáis cuenta, hemos quitado el Source del mediaelement dentro de la grilla dentro del botón, esto es debido a que será la la MediaTimeline quien apunte directamente al Mediaelement de nuestro botón.

Luego vienen los cierres de etiquetas.

Notad que esto se encuentra definido dentro de <Windows.Resources>, lo cual nos dice que se crearán recursos que estarán disponibles para usarlos cuando queramos y donde queramos en el programa.

Luego, se especifica lo siguente:

<Window.Triggers> = Son lanzadores del programa, o sea que se ejcutarán cuando cierta reacción se realicen en el programa .
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»> = en este caso, cuando nuestro programa sea cargado.
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/> = Iniciará el storyboard llamado Bear_wmv, que es recurso estático
        </EventTrigger> = cierre de etiquetas
    </Window.Triggers> = cierre de etiquetas
El resultado es el siguiente:

Como veis, un vídeo reproduciéndose dentro de un botón!!

Ahora, lo que tenemos que hacer es agregar una imagen a nuestro proyecto, con click derecho sobre nuestro proyecto, agregar elemento existene. Agrega cualquier imagen.

Ahora, tenemos que referenciarla por medio de código, esto lo hacemos así:

De hecho, lo que ha insertado la imagen es el siguiente fragmento:

El cual nos dice. etiqueta del tipo imagen, fuente=la imágen que hemos insertado, ponla en la definicion de columnas # 0 y filas #1, son como coordenadas. El resultado:

Finalmente, agregaremos un textbox dentro del botón, esto se hace con el código:

La línea que nos crea el textbox es:

Que es prácticamente lo mismo que el de la imágen, con la diferencia de que estamos creando un Textbox, no una Image.

Pero para hacerlo un poco mas interesante, vamos a agregarle un color de fondo a nuestro Textbox, pero no será cualquier color, será un degradado, esto es muy fácil con WPF, tan solo con insertar el texto:

               <TextBox.Background> = Definimos que queremos rellenar el Background o fondo
                        <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″> = Decimos que será un gradiente linear, con un punto inicial en (.5,0) y un punto final en (.5,1) de nuestro textbox.
                            <GradientStop Color=»#FF000000″ Offset=»1″/> = Definimos uno de los colores de nuestro gradiente, en este caso Blanco, y con una «distancia» de 1
                            <GradientStop Color=»#FFFFFFFF» Offset=»0.013″/> = lo mismo que el anterior código, pero con un color negro
                        </LinearGradientBrush> =cierre de etiquetas
                </TextBox.Background> = Cierre de etiquetas

Lo que nos arroja lo siugente:

Y listo, tenemos nuestro Textbox rellenado.le he cambiado el color de la letra para que se distinguiera mejor.

Aquí el código completo:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″ xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=»d»>
    <Window.Resources>
        <Storyboard x:Key=»Bear_wmv»>
            <MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»>
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>

        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=»142*» />
                    <ColumnDefinition Width=»136*» />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height=»131*» />
                    <RowDefinition Height=»131*» />
                </Grid.RowDefinitions>
                <MediaElement x:Name=»Bear_wmv» Grid.Row=»0″ Grid.Column=»0″ VerticalAlignment=»Top» Height=»123.5″ Grid.ColumnSpan=»2″ Margin=»0,0,8,0″ />
                <Image Source=»bluemonster.jpg» Grid.Column=»0″ Grid.Row=»1″></Image>
                <TextBox Text=»Hello world» Grid.Column=»1″ Grid.Row=»1″ TextAlignment=»Center» Foreground=»#FF8617A8″>
                    <TextBox.Background>
                        <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″>
                            <GradientStop Color=»#FF000000″ Offset=»1″/>
                            <GradientStop Color=»#FFFFFFFF» Offset=»0.013″/>
                        </LinearGradientBrush>
                    </TextBox.Background>
                </TextBox>
            </Grid>
        </Button>
    </Grid>
</Window>

Y viendo la estructura jeráquica que hemos deifnido, quedaría así:

Como veis, dentro de nuestra ventana de windows, tenemos nuestra primera grila, luego viene nuestro botón, sobre el cual hay insertada otra grilla, dentro de la misma tenemos un video, una imagen y un Textbox. 🙂

Vale, como véis, es bantante sencillo usar XAML, sin embargo, a veces por cuestión de tiempo, es mejor usar herramientas visuales, tales como la suite expression, de la cual hablaremos en nuestra próxima entrada, Hasta la vista!! y espero no haberlos aburrido

Salu2

Héctor Pérez

Introducción a WPF, y creación de una aplicación WPF 3-D, parte 1 de N.

May 3, 2008hectorperez Deja un comentario

Hola a todos, qué tal? Bien, pues a principios de este semestre, en la materia de redes nos pidieron hacer una propuesta de una creación de la red de una unidad organizativa, a partir de ciertos planos y de ciertas descripciones técnicas. Pues bien, a partir de hoy, empezaremos a crear la réplica del programa que cree para la exposición del mismo, pero antes vamos a dar un overview acerca de WPF.

La aplicación en cuestión que crearemos será la siguiente:

Overview sobre WPF.

¿Qué es WPF? – Vale, pues resumidamente, WPF es una nueva tecnología por parte de Microsoft, en sencillas palabras para crear interfaces de usuario sorprendentes, con funcionalidad a base del .NET framework, de hecho WPF es parte del Framework 3.0.

Pero… ¿Cómo uso WPF? – Bien, pues WPF es un tipo de proyecto tal como un proyecto Windows Forms, o un proyecto ASP.NET, el cual aparece cuando creamos un nuevo proyecto tipo Windows en Visual Studio 2008:

Ok, he creado un proyecto WPF y ahora qué hago? – Bien pues empezamos a crear nuestra aplicación, a través de la cual iremos aprendiendo algunos conceptos básicos de WPF, así que comencemos:

1.- En Visual Studio 2008, creamos un proyecto del tipo WPF, como hemos mostrado en la imágen anterior.

2.- Vale, ahora que hemos creado nuestro proyecto WPF, pasaremos a explicar lo que nos aparece:

En el recuadro que hemos pintado de rojo, con el número 1, encontramos lo que normalmente encontramos cuando creamos una aplicación Windows Forms, es decir el diseñador gráfico. Pero adicionado a esto, encontramos lo que aparece en el recuadro azul, lo que se llama el código XAML (eXtensible Application Markup Language), que en Windows Forms sería lo equivalente al código escrito en el respectivo lenguaje (C# o VB) al arrastrar y soltar cada uno de los elementos sobre el formulario. Pero bien, pasemos a analizar un poco el código:

<Window x:Class=»Window1″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
    </Grid>
</Window>

Como vemos, es muy parecido a XML, de hecho se siguen las mismas normas que en XML, es decir, es código válido, porque si nos damos cuenta, cada etiqueta que abre, cierra, tal es el caso por ejemplo de

Ahora bien, vamos línea a línea descubriendo el maravilloso código XAML aquí planteado:

1.- <Window x:Class=»Window1″ – Define el tipo y el nombre de la clase

2.- xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Son los espacios de nombre (xml namespaces), los cuales llevan la estructura exigida por la W3C, para XML,

3.- Title=»Window1″ Height=»300″ Width=»300″>

Aquí se empiezan a definir las características del formulario meramente, diciendo que como título tendrá «Window1, de largo tendrá 300 pixeles y de ancho otros 300.

4.-

Es un contenedor de WPF, la grilla, la cual nos servirá para poner varios controles hijos dentro de ella misma, aclararemos mas sobre estos contenedores mas adelante.

5.- </Window>

Cierre de etiqueta <Window>

Bien, pues es todo por el momento, próximamente iremos ampliando varios conceptos acerca de WPF, e iremos creando aplicaciones usando esta aplicación, cualquier duda o comentario no duden en contactarme, los veo en la próxima…

Salu2

Héctor Pérez

	hectorperez en El proveedor ‘Microsoft.…
	hectorperez en Introducción a WPF, y c…
	Reyes en El proveedor ‘Microsoft.…
	aspador en Introducción a WPF, y c…
	Gabriel Valenzuela A… en El proveedor ‘Microsoft.…

Héctor Uriel Pérez Rojas Weblog

Another .NET weblog

Etiqueta Visual Studio

¿Cómo depurar una aplicación de forma remota con Visual Studio 2015? (aplica para versiones anteriores también)

AutoComplete TextBox en WPF

¿Cómo crear un Splash Screen en WPF?

Nuevas Características de C# 3.0 (Automatically Implemented Properties)

¿Cómo cargar una tabla de BD hecha en SQL 2005 en WPF?

Introducción a WPF, y creación de una aplicación WPF 3-D, parte 2 de N.

Introducción a WPF, y creación de una aplicación WPF 3-D, parte 1 de N.

Tu voto:

Tu voto:

Tu voto:

Tu voto:

Tu voto:

Tu voto:

Tu voto: