Share
Como lo indica el título, vamos a crear un Wallview inspirado en iTunes. Este tutorial se divide en dos partes: una para el diseño en Blend y otra para el código que está detrás en Visual Studio..
Eche un vistazo a este video de demostración del resultado final en el que trabajaremos (o simplemente eche un vistazo a la demostración basada en la web más arriba):
En esta parte del tutorial vamos a diseñar dos UserControls en Expression Blend. Este tutorial parece bastante largo por la cantidad de pasos, pero esto se debe a que es muy completo; Hay una explicación y una captura de pantalla para casi todos los clics que tiene que hacer. La razón por la que lo he escrito con tanto detalle es que mis compañeros de la universidad encontraron que Blend es demasiado complejo y difícil de usar.
Abra Visual Studio y haga clic en "Archivo"> "Nuevo"> "Proyecto" en la barra de menú superior.
Seleccione la aplicación Silverlight Visual C # en el menú e ingrese "WallviewApp" para el nombre del proyecto en la parte inferior, así como la ubicación para guardar el proyecto.
Después de eso verá una ventana emergente. Asegúrese de marcar la casilla en la parte inferior y seleccione Silverlight 4 en el cuadro combinado.
Inicie Expression Blend y abra el proyecto que acabamos de crear en Visual Studio.
Busque el archivo de proyecto dentro del directorio del proyecto y ábralo.
Haga clic derecho en el proyecto WallviewApp dentro del árbol del proyecto y elija "Agregar nueva carpeta". Haga esto dos veces, llame a las carpetas "controles de usuario" e "imagen".
Haga clic con el botón derecho en la carpeta recién creada "usercontrols" y seleccione "Agregar nuevo elemento ...".
En la ventana emergente, asegúrese de que UserControl esté seleccionado e ingrese "image.xaml" como nombre.
Elija el contenedor StackPanel en la barra de herramientas, que debería estar en el lado izquierdo de forma predeterminada ...
... y dibuja un rectángulo en el medio del LayoutRoot que estaba allí desde el principio.
Asegúrese de que StackPanel esté seleccionado en el lado izquierdo en el panel "Objetos y escala de tiempo". En el lado derecho verá los parámetros del elemento seleccionado actualmente. Cambie el ancho y la altura a "Auto (0)" haciendo clic en las flechas cruzadas al lado del campo de texto. HorizontalAlignment to "Center" y VerticalAlignment to "Top". Reinicie el Margen haciendo clic en el icono cuadrado blanco al lado de los campos de texto y seleccione Restablecer en el menú. Después de eso, ajuste el margen superior a "5". Ahora el panel de diseño debería tener este aspecto y, como StackPanel tiene un tamaño de 0x0 píxeles, ya no puede verlo:
Continúe y seleccione el contenedor de cuadrícula en la barra de herramientas en el lado izquierdo (donde seleccionamos el StackPanel antes) y dibuje otro rectángulo en el centro de su área de trabajo.
Eche un vistazo al panel "Objetos y línea de tiempo" y asegúrese de que la cuadrícula esté dentro del panel de pila. Si no es simplemente haga clic y arrástrelo hacia el Panel de Pila.
Ajuste la configuración del diseño mientras la cuadrícula aún está seleccionada. Establezca Ancho y Alto en "200" píxeles, Horizontal y VerticalAlignment en "Estirar" si aún no están.
Ahora vamos a crear un borde. Puede seleccionarlo como el Grid y StackPanel desde la barra de herramientas en el lado izquierdo. Dibuje un rectángulo con el borde y muévalo a la cuadrícula si aún no está.
Abra el área para Pinceles en el lado derecho y cambie el BorderBrush al siguiente Color: "# 0076A2F9". A continuación, configure BorderThickness en el panel de Apariencia en "5" píxeles en las cuatro direcciones y CornerRadius en "5" píxeles. El ancho y la altura deben configurarse en "Automático" haciendo clic en las flechas cruzadas junto al cuadro de texto. La alineación horizontal debe establecerse en "Centro" y la alineación vertical en "Inferior":
Ahora vamos a agregar un efecto de sombra al borde. Haga clic en el botón "Nuevo" dentro del área de Apariencia justo al lado de Efecto. En la próxima ventana emergente, seleccione "DropShadowEffect" y haga clic en "Aceptar".
Ajuste la Configuración de Sombra que apareció justo debajo del botón "Nuevo" configurando BlurRadius en "10" y ShadowDepth en "1":
Ahora vamos a importar una imagen a Blend. Para ello, haga clic con el botón derecho en la carpeta llamada "imagen" que creamos anteriormente y seleccione "Agregar elemento existente" o seleccione la carpeta y arrastre una imagen directamente desde su escritorio o explorador..
Después de la importación, el árbol de su proyecto debería verse así:
Para utilizar la imagen en el control, simplemente arrástrela desde el navegador del proyecto, donde la importó, directamente al área de trabajo. Como puede ver, es demasiado grande y está en el contenedor incorrecto:
Para arreglar eso solo arrastramos la imagen al borde:
Cambie la altura y el ancho de la imagen a "Auto", la alineación horizontal y vertical a "Centro", los márgenes a "0" y estire a "Uniforme" en el panel Propiedades comunes:
Seleccione la herramienta TextBlock en la barra de herramientas en el lado izquierdo y cree un TextBlock en algún lugar del área de trabajo.
Presiona la tecla "ESC" en tu teclado para cancelar la edición del texto dentro de TextBlock.
Haga clic y arrastre el TextBlock en el panel "Objetos y línea de tiempo" en el StackPanel que creamos anteriormente.
Después de eso, cambie el Color de primer plano a "# FF1F1F1F" y la configuración de Diseño en el lado derecho a los siguientes valores: Ancho: "Auto", Altura: "Auto", HorizontalAlignment: "Centro", VerticalAlignment: "Top", Margen -Top: "8". Configure el texto a nada marcando el texto "TextBlock" y eliminándolo o haciendo clic en el cuadrado blanco que se encuentra a su lado y haciendo clic en "Restablecer". También cambia la fuente del texto a "Verdana":
Cree otro TextBlock ya sea repitiendo los Pasos 16 y 17, o seleccionando el que ya creamos en el panel "Objetos y escala de tiempo" y presionando Ctrl + C y luego Ctrl + V para duplicarlo. Lo único que tenemos que hacer diferente al Paso 17 es que no queremos que se establezca ningún Margen. Si hizo el método duplicado, simplemente estableció el Margen superior en "0" o haga clic en el pequeño cuadrado blanco que se encuentra a su lado y reinicie el Margen:
Para poder trabajar con los elementos que hemos creado hasta ahora debemos darles nombres. Así que adelante, cambie el nombre del TextBlock en la parte inferior para "imgDate" haciendo clic lentamente dos veces o haciendo clic derecho y seleccionando "rename". Cambie el nombre del otro TextBlock a "imgName", la imagen a "img", el borde a "imgBorder" y la cuadrícula a "imgSize". Ahora hemos terminado con el diseño de este control y su jerarquía debe tener este aspecto:
Y el diseño debería verse así:
Por supuesto, no puede ver los dos TextBlocks en su proyecto ya que configuramos su Texto a nada unos pasos antes.
Personalmente, dejo los nombres de Textblocks siempre que los necesite para realizar el diseño antes de eliminarlos. De esta manera, puedes controlar si todo está en el lugar correcto..
Si desea ver el código que acabamos de generar, haga clic en el icono "< >"en el centro, en la parte superior de la barra de desplazamiento derecha del área de trabajo. Para volver a la vista de diseño, haga clic en el icono en la parte superior.
Nuestro código se ve así:
Asegúrate de volver a la vista de diseño.
Cree otro UserControl en la carpeta "usercontrols" haciendo clic derecho en la carpeta y seleccionando "Agregar nuevo elemento" en el menú.
Desde la ventana emergente, seleccione "UserControl" y para el nombre ingrese "wallview-img.xaml":
Elija el contenedor ScrollViewer de la barra de herramientas a la izquierda ...
... y dibuja un rectángulo con él en el espacio de trabajo.
Mientras se selecciona ScrollViewer, inspeccione el área de Pinceles en el lado derecho y cambie el BorderBrush a "No Brush".
Establezca BorderThickness en "0" para las cuatro direcciones, la alineación horizontal y vertical en "Estirar", el margen superior en "29" píxeles y los otros márgenes en "0". También controle si el Ancho y la Altura están en "Auto" haciendo clic en las flechas cruzadas. Extienda aún más el área de Diseño haciendo clic en la flecha pequeña y configure las cuatro direcciones de Relleno en "0":
Seleccione el StackPanel de la barra de herramientas a la izquierda ...
... y crea un StackPanel en el medio del ScrollViewer.
Seleccione el StackPanel si aún no está en el panel "Objetos y línea de tiempo", luego haga clic en el botón "Pincel de color sólido" en el área de Pinceles (es el segundo desde la izquierda, justo al lado de "Sin pincel") y establezca el Color de fondo en "# FFB8B8B8". Además, cambie la alineación horizontal y vertical a "Estirar", verifique si el ancho y la altura están configurados en "Automático" y si los márgenes son todos "0":
Elija el contenedor de cuadrícula de la barra de herramientas y cree una cuadrícula.
Si lo creó dentro de StackPanel, simplemente arrástrelo y suéltelo en el LayoutRoot-Grid:
Cambie la altura de la cuadrícula a "30" píxeles y el ancho a "Automático". HorizontalAlignment to "Stretch", VerticalAlignment to "Top" y el Margen a (-1, -1, -1, 0) para (izquierda, arriba, derecha, abajo):
Seleccione la herramienta Rectángulo en el lado izquierdo que se encuentra sobre los contenedores que ya usamos varias veces ...
... y dibujar una caja en el área de trabajo.
Mueva el rectángulo a la cuadrícula que creamos en el paso anterior:
Cambie el color de relleno del rectángulo a "# FF4E4E4E":
Y el color del trazo a "# FF1F1F1F":
Establezca la Altura y el Ancho en "Automático", la Alineación Horizontal y Vertical en "Estirar" y restablezca el Margen si hay alguno:
Ahora creamos un StackPanel y lo movemos a la Cuadrícula:
Cambie los parámetros de StackPanel a lo siguiente: Ancho y Alto a "Auto", Orientación a "Horizontal", HorizontalAlignment a "Izquierda", VerticalAlignment a "Centro" y Margen-Izquierda a "10":
Seleccione la herramienta de botón de la barra de herramientas ...
... y crea un botón en algún lugar del área de trabajo.
Luego arrástralo al StackPanel que acabamos de crear:
Establezca la Anchura y la Altura del botón en "Automático", HorizontalAlignment en "Estirar", VerticalAlignment en "Centro", Márgenes si hay alguno en "0", el Contenido en "Todos los álbumes" (espacios en blanco a propósito para que se vea el botón predeterminado Un poco mejor) y la fuente a "Verdana":
Seleccione el botón y presione Ctrl + C, Ctrl + V para copiar y pegar el botón en el mismo StackPanel, luego cambie el margen izquierdo a "5" y el contenido a "Álbum actual":
Seleccione el StackPanel con los dos botones en el panel "Objetos y línea de tiempo" y presione CTRL + C, CTRL + V para duplicarlo también. Ahora tu jerarquía debería verse así:
Seleccione el StackPanel duplicado si aún no lo ha hecho, cambie la alineación horizontal a "Derecha" y configure todos los márgenes a "0" excepto el derecho que configuró a "10" píxeles.
Seleccione uno de los botones en el StackPanel duplicado y cambie su contenido a " < " if you selected the left one and to " > "para el correcto. Ahora tenemos dos botones con un símbolo de flecha que luego se usará para la navegación.
Seleccione la herramienta Slider en la barra de herramientas y cree un control deslizante en su área de trabajo.
Luego arrástrelo y suéltelo en la parte superior del StackPanel inferior:
Seleccione el control deslizante y ajústelo a las siguientes configuraciones:
Y bajo propiedades comunes:
Como en la imagen UserControl que creamos anteriormente, cambiaremos el nombre de los elementos que necesitaremos más adelante. De abajo hacia arriba: Botón: "btnNext", Botón: "btnPrev", Control deslizante: "control deslizante", omitir el StackPanel, Botón: "btnCurrentAlbum", Botón: "btnAllAlbums", omitir los siguientes elementos hasta el StackPanel que está dentro del ScrollViewer. Cambie el nombre de ese StackPanel a "content". Ahora la jerarquía debería verse así:
Así es como debería aparecer el UserControl "wallview-img":
Así es como aparece el código xaml para nuestro UserControl "wallview.img.xaml":
Blend es una gran herramienta para crear hermosos diseños y animaciones. Incluso puede escribir el código completo en Blend, pero prefiero usar Visual Studio, ya que es más poderoso, tiene un depurador y un mejor IntelliSense para propuestas y autocompletar.
En la segunda parte de este tutorial vamos a escribir el código completo detrás de nuestros dos UserControls en C #, así como nuestro propio servicio web que trae cada imagen de una carpeta en particular a nuestro Wallview..
Ya que este es mi primer tutorial, espero que te haya gustado trabajarlo y haber aprendido algo útil. Para cualquier comentario, sugerencia o inquietud, por favor deje una nota en la sección de comentarios.
Gracias por leer!
Prueba de 30 días de Blend
Una introducción a Microsoft Silverlight 4 - Mezcla
Accentsconagua