Share via

Tutorial: Crear una extensión de control de panel de apilamiento

  • Artículo

En este tutorial se muestra cómo crear una extensión de control de panel de apilamiento para LightSwitch. Al usar un panel de apilamiento, puede apilar elementos en una dirección asignada. Se incluyen ejemplos de algunos controles de panel de apilamiento en el diseñador de pantallas de LightSwitch, por ejemplo, los controles de grupo Diseño Vertical y Diseño Horizontal.

Requisitos previos

  • Visual Studio 2013 Professional

  • Visual Studio 2013 SDK

  • LightSwitch Extensibility Toolkit para Visual Studio 2013

Crear un proyecto de extensión de control

El primer paso es crear un proyecto y agregar una plantilla Control de LightSwitch.

Para crear un proyecto de extensión

  1. En la barra de menús de Visual Studio, elija Archivo, Nuevo, Proyecto.

  2. En el cuadro de diálogo Nuevo proyecto, expanda el nodo Visual Basic o el nodo Visual C#, expanda el nodo LightSwitch, elija el nodo Extensibilidad y, a continuación, elija la plantilla Biblioteca de extensión de LightSwitch.

  3. En el campo Nombre, escriba MyStackPanelExtension como nombre de la biblioteca de extensiones. Este nombre aparecerá en la pestaña Extensiones del Diseñador de aplicaciones de LightSwitch.

  4. Elija el botón Aceptar para crear una solución que contenga los siete proyectos que son necesarios para la extensión.

Para elegir un tipo de extensión

  1. En el Explorador de soluciones, elija el archivo MyStackPanelExtension.Lspkg.

  2. En la barra de menús, elija Proyecto, Agregar nuevo elemento.

  3. En el cuadro de diálogo Agregar nuevo elemento, elija Control de LightSwitch.

  4. En el campo Nombre, escriba MyStackPanel como nombre de la extensión. Este nombre aparecerá en el Diseñador de pantallas de LightSwitch.

  5. Elija el botón Aceptar. Los archivos se agregarán a varios proyectos de la solución.

Actualizar el icono de control

Se agregan dos archivos de imagen denominados MyStackPanel.png a la solución, uno en la carpeta ControlImages del proyecto MyStackPanelExtension.Client.Design y otro en la carpeta ControlImages del proyecto MyStackPanelExtension.Design. La imagen en el archivo se utiliza como un icono. Puede reemplazar la imagen predeterminada con una que identifique el control de forma exclusiva.

Para modificar la imagen del icono

  1. En el Explorador de soluciones, en el menú contextual del archivo MyStackPanel.png en la carpeta ControlImages del proyecto MyStackPanelExtension.Client.Design, elija Abrir con.

  2. En el cuadro de diálogo Abrir con, elija Paint y, a continuación, el botón Aceptar.

  3. En Paint, cambie la imagen, por ejemplo, cambie el color o agregue una forma y después guarde el archivo y vuelva a Visual Studio.

  4. Elija el archivo MyStackPanel.png y, en la barra de menús, elija Editar y Copiar.

  5. Elija la carpeta ControlImages del proyecto MyStackPanelExtension.Design y, en la barra de menús, elija Editar y Pegar. En el mensaje que le pregunta si desea reemplazar el archivo, elija el botón Sí.

Actualizar la definición de control en el archivo de metadatos de LightSwitch

Los metadatos que definen el control están incluidos en el archivo .lsml del proyecto MyStackPanelExtension.Common. Para el control de diseño inteligente, puede reemplazar algunos de los valores predeterminados con los valores adecuados para el control, por ejemplo, el tipo de control y el nombre para mostrar. También puede agregar marcadores de posición para los elementos secundarios y definir el comportamiento de la configuración de AttachedLabelPosition.

Para actualizar los metadatos de control

  1. En el Explorador de soluciones, abra el menú contextual del archivo MyStackPanel.lsml en la carpeta Controls del proyecto MyStackPanelExtension.Common y elija Abrir con.

  2. En el cuadro de diálogo Abrir con, elija Editor XML (texto) y, a continuación, elija el botón Aceptar.

  3. Cambie el elemento SupportedContentItemKind por SupportedContentItemKind="Group".

    Esto indica a LightSwitch que es un control de grupo.

  4. Después del elemento SupportedContentItemKind, inserte este: AttachedLabelSupport="DisplayedByControl".

    Esto indica a LightSwitch que el control de grupo controlará la propiedad AttachedLabelPosition para todos los controles secundarios.

  5. Cambie el elemento DisplayName de la siguiente forma: <DisplayName Value="$(MyStackPanel_DisplayName)" />.

    La notación $(ResourceName) indica a LightSwitch que recupere el valor de un archivo de recursos.

  6. Inserte el siguiente código detrás del bloque Control.Attributes.

    <!-- Override AttachedLabelPosition so it can be shown on the property sheet. -->
    <Control.PropertyOverrides>
      <ControlPropertyOverride
          Property=":RootControl/Properties[AttachedLabelPosition]"
          EditorVisibility="PropertySheet">
              </ControlPropertyOverride>
    </Control.PropertyOverrides>

    Esto indica a LightSwitch que muestre la propiedad AttachedLabelPosition en la hoja de propiedades de forma que un desarrollador pueda especificar un valor predeterminado para los controles secundarios.

  7. Elimine el bloque Control.SupportedDataTypes. Puesto que un control de grupo no puede mostrar datos directamente, este bloque no es necesario.

  8. Ahora, el código completo para el archivo MyStackPanel.lsml debe ser similar al que se muestra en el ejemplo siguiente.

     <ModelFragment
  xmlns="https://schemas.microsoft.com/LightSwitch/2010/xaml/model"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <Control Name="MyStackPanel"
    SupportedContentItemKind="Group"
    AttachedLabelSupport="DisplayedByControl"
    DesignerImageResource="MyStackPanelExtension.MyStackPanel::ControlImage">
    <Control.Attributes>
      <DisplayName Value="$(MyStackPanel_DisplayName)" />
    </Control.Attributes>

    <!-- Override AttachedLabelPosition so it can be shown on the property sheet. -->
    Add the following xaml code
      <ControlPropertyOverride
          Property=":RootControl/Properties[AttachedLabelPosition]"
          EditorVisibility="PropertySheet">
      </ControlPropertyOverride>
    </Control.PropertyOverrides>

  </Control>

</ModelFragment>

Agregar una cadena de recursos

El archivo ModuleResources.resx del proyecto MyStackPanelExtension.Common contiene recursos usados por el control. Puede agregar un recurso de cadena para el nombre para mostrar que especificó en el archivo MyStackPanel.lsml.

Para agregar una cadena de recursos

  1. En el Explorador de soluciones, expanda el nodo Recursos en MyStackPanelExtension.Common y abra el archivo ModuleResources.resx.

  2. Agregue el valor siguiente al archivo ModuleResources.resx.

    Nombre

    Valor

    Comentario

    MyStackPanel_DisplayName

    Control My Stack Panel

    El nombre para mostrar del control; se mostrará en el Diseñador de pantallas.

Actualizar el archivo XAML de control

El archivo MyStackPanel.xaml del proyecto MyStackPanelExtension.Client contiene el lenguaje de marcado que define el control de Silverlight. El control predeterminado es TextBox; cámbielo a un contenedor que puede mostrar los controles secundarios.

Para actualizar el archivo XAML

  1. En el Explorador de soluciones, abra el archivo MyStackPanel.xaml en el proyecto MyStackPanelExtension.Client.

  2. Reemplace el contenido del archivo por el siguiente código xaml.

    <UserControl x:Class="MyStackPanelExtension.Presentation.Controls.MyStackPanel"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <!-- An ItemsControl is used here to create ContentItemPresenter for all child items in the LightSwitch content tree. -->
    <ItemsControl ItemsSource="{Binding ChildItems}" >

        <!-- ItemsPanel enables the use of a stack panel to arrange all child items. Different group controls typically use different layout panels here. -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <!--
           ItemTemplate enables the mapping of a content item to a Silverlight control. Use a ContentItemPresenter here; 
           bind its ContentItem to the ContentItem in the LightSwitch screen content tree.  -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <framework:ContentItemPresenter ContentItem="{Binding}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

    ItemsControl se usa para asignar elementos secundarios del nodo de grupo a los controles de Silverlight y hospedarlos en un panel de apilamiento. El elemento DataContext de un control de LightSwitch siempre es un objeto IContentItem y ContentItemPresenter se usa para mostrar ContentItem como control de Silverlight.

Definir una propiedad Margin para elementos secundarios en el Árbol de contenido de pantalla

En este punto, puede probar el control, pero la apariencia podría no ser la esperada. Algunos de los controles secundarios que se han agregado al control pueden aparecer sin espaciado entre ellos. Para corregirlo, defina una propiedad Margin.

Mediante la propiedad Margin, un desarrollador puede especificar la cantidad de espacio que habrá entre los controles en tiempo de diseño. Puede definir una cantidad de espacio fija, pero la exposición de la propiedad ofrece a los desarrolladores más flexibilidad.

Para definir una propiedad Margin

  1. En el Explorador de soluciones, abra el archivo MyStackPanel.lsml en la carpeta Controls del proyecto MyStackPanelExtension.Common.

  2. Agregue el siguiente código xaml detrás del bloque Control.PropertyOverrides.

    <!-- Define New Control Properties -->
    <Control.Properties>

      <!-- 
        Define a Margin property for all immediate children of the stack panel.
        It must be an attachable property, just like a Grid in Silverlight adds the Grid.Row property to its children.
      -->
      <ControlProperty Name="Margin"
                       PropertyType=":Double"
                       IsAttachable="True"
                       AttachedPropertyAvailability="ImmediateChildren"
                       EditorVisibility="PropertySheet"
                       >
        <ControlProperty.Attributes>
          <!--  Reference to the localized name in ModuleResources.resx -->
          <DisplayName Value="$(Margin_DisplayName)" />

          <!--  Reference to the localized description string in ModuleResources.resx -->
          <Description Value="$(Margin_Description)" />
        </ControlProperty.Attributes>

        <!-- Define the default value of Margin to 0. -->
        <ControlProperty.DefaultValueSource>
          <ScreenExpressionTree>
            <ConstantExpression ResultType=":Double" Value="0"/>
          </ScreenExpressionTree>
        </ControlProperty.DefaultValueSource>
      </ControlProperty>
    </Control.Properties>

  3. Expanda el nodo Recursos en MyStackPanelExtension.Common y abra el archivo ModuleResources.resx.

  4. Agregue el valor siguiente al archivo ModuleResources.resx.

    Nombre

    Valor

    Descripción

    Margin_DisplayName

    Margin

    Nombre de la propiedad

    Margin_Description

    El espacio entre los controles secundarios.

    Descripción de la propiedad que se usa en el Diseñador de pantallas.

Crear un convertidor de valores para convertir el valor de propiedad de los controles en un valor de Silverlight

Los controles de Silverlight usan el tipo Thickness para representar los márgenes. Por consiguiente, es necesario crear un convertidor a fin de convertir el valor de propiedad Double de Margin en el tipo Thickness de Silverlight.

Para crear un convertidor de valores

  1. En el Explorador de soluciones, seleccione el nodo Controls en el proyecto MyStackPanelExtension.Client.

  2. En la barra de menús, elija Proyecto, Agregar clase.

  3. En el cuadro de diálogo Agregar nuevo elemento, asigne a la clase el nombre DoubleToThicknessConverter y, a continuación, elija el botón Agregar.

  4. Agregue el siguiente código al módulo de clase.

    Imports System.Windows
Imports System.Windows.Data
Namespace MyStackPanelExtension.Presentation.Controls

' A value converter to convert a Double value defined in the control property to a Thickness value used in the Silverlight control.
Public Class DoubleToThicknessConverter
Implements IValueConverter

Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert
Return New Thickness(CDbl(value))
End Function

Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
Throw New NotSupportedException()
End Function
End Class
End Namespace

    using System;
using System.Windows;
using System.Windows.Data;


namespace MyStackPanelExtension.Presentation.Controls
{
    /// <summary>
    /// A value converter to convert double value defined in the control property to a Thickness value used in the Silverlight control.
    /// </summary>
    public class DoubleToThicknessConverter
        : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return new Thickness((double)value);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

Agregar la propiedad Margin al control

El paso final es enlazar la propiedad Margin del control de LightSwitch a la implementación de Silverlight.

Para agregar el margen

  1. En el Explorador de soluciones, abra el archivo MyStackPanel.xaml en el proyecto MyStackPanelExtension.Client.

  2. Agregue la asignación de espacio de nombres siguiente.

    xmlns:controls="clr-namespace:MyStackPanelExtension.Presentation.Controls;assembly=MyStackPanelExtension.Client"

  3. Agregue el convertidor como recurso estático en el control.

    <UserControl.Resources>
        <!-- Define a converter to convert a LightSwitch control property to the value that is used in Silverlight controls. -->        
        <controls:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter" />
    </UserControl.Resources>

  4. Agregue la propiedad Margin al elemento ContentPresenterItem.

    <framework:ContentItemPresenter ContentItem="{Binding}" 
                                                Margin="{Binding Path=Properties[MyStackPanelExtension:MyStackPanel/Margin], Converter={StaticResource DoubleToThicknessConverter}}" />

    Ahora, el código completo para el archivo MyStackPanel.xaml debe ser similar al que se muestra en el ejemplo siguiente.

    <UserControl x:Class="MyStackPanelExtension.Presentation.Controls.MyStackPanel"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client"
             xmlns:controls="clr-namespace:MyStackPanelExtension.Presentation.Controls;assembly=MyStackPanelExtension.Client"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <UserControl.Resources>
        <!-- Define a converter to convert a LightSwitch control property to the value used in Silverlight controls. -->
        <controls:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter" />
    </UserControl.Resources>

    <!-- An ItemsControl is used here to create ContentItemPresenter for all child items in the LightSwitch content tree. -->
    <ItemsControl ItemsSource="{Binding ChildItems}" >

        <!-- ItemsPanel enables the use of a stack panel to arrange all child items. Different group controls typically use different layout panels here. -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <!--
           ItemTemplate enables the mapping of a content item to a Silverlight control. Use a ContentItemPresenter here; bind 
           its ContentItem to the ContentItem in the LightSwitch screen content tree.  -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <framework:ContentItemPresenter ContentItem="{Binding}" 
                                                Margin="{Binding Path=Properties[MyStackPanelExtension:MyStackPanel/Margin], Converter={StaticResource DoubleToThicknessConverter}}" />

            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

Probar el control de panel de apilamiento

El control de diseño inteligente está ahora completo. Puede probarlo en una instancia experimental de Visual Studio. Si aún no ha probado otro proyecto de extensibilidad de LightSwitch, tiene que habilitar la instancia experimental en primer lugar.

Para habilitar una instancia experimental

  1. En el Explorador de soluciones, elija el proyecto BusinessTypeExtension.Vsix.

  2. En la barra de menús, elija Proyecto, Propiedades de BusinessTypeExtension.Vsix.

  3. En la pestaña Depurar, en Acción de inicio, elija Programa externo de inicio.

  4. Escriba la ruta del archivo ejecutable de Visual Studio, devenv.exe.

    De forma predeterminada en un sistema de 32 bits la ruta de acceso es C:\Archivos de programa\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe; en un sistema de 64 bits, es C:\Archivos de programa (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe.

  5. En el campo Argumentos de la línea de comandos, escriba /rootsuffix Exp.

    Nota

    De forma predeterminada, todos los proyectos de extensibilidad de LightSwitch subsiguientes también usarán este valor.

Para probar el control de panel de apilamiento

  1. En la barra de menús, elija Depurar, Iniciar depuración. Se abre una instancia experimental de Visual Studio.

  2. En la instancia experimental, en la barra de menús, elija Archivo, Nuevo, Proyecto.

  3. En el cuadro de diálogo Nuevo proyecto, expanda el nodo Visual Basic o Visual C#, elija el nodo LightSwitch y después elija la plantilla Aplicación de escritorio de LightSwitch.

  4. En el campo Nombre, escriba MyStackPanelTest y elija el botón Aceptar para crear un proyecto de prueba.

  5. En la barra de menús, elija Proyecto, Propiedades de MyStackPanelTest.

  6. En el diseñador de proyectos, en la pestaña Extensiones, active la casilla MyStackPanelExtension.

  7. Cree una aplicación básica de LightSwitch que tenga una pantalla de lista y detalles y, en el Diseñador de pantallas, cambie el control del Diseño de filas a My Stack Panel.

    Seleccione un elemento secundario bajo My Stack Panel. Tenga en cuenta que la propiedad Margin aparece en la ventana Propiedades.

  8. En la barra de menús, elija Depurar, Iniciar depuración. Observe el comportamiento del control My Stack Panel en la aplicación.

Vea también

Tareas

Cómo: Crear un control LightSwitch

Conceptos

Definir, invalidar y usar propiedades de control de LightSwitch

LightSwitch Extensibility Toolkit para Visual Studio 2013