Visão geral do WPF e do Silverlight Designer
O WPF e Silverlight Designer fornece suporte de design visual para criar aplicativos WPF e Silverlight . Você pode criar interfaces de usuário para seus aplicativos, arrastando controles a partir de Toolbox e configuração propriedades na Propriedades janela. You can also edit XAML directly in the XAML editor. A ilustração a seguir mostra o WPF e Silverlight Designer e algumas das suas janelas de suporte.
.png "Visão geral do WPF Designer")
Quando você inicia o Designer do Silverlight e WPF pela primeira vez, a janela de fontes de dados e a janela de estrutura de tópicos do documento estão recolhidos no lado esquerdo da Visual Studio. Se você mostra e fixa as guias à esquerda, você pode ver a exibição anterior, o que é uma organização útil para o uso de superfície de design.
This topic contains the following sections:
Design View
XAML View
Properties Window
Data Sources Window
Document Outline Window
Building Rich, Interactive User Interfaces
Collaboration with Expression Blend
Design View
modo de exibição de Design fornece uma superfície de design visual para criar seus aplicativos e controles do WPF e Silverlight . Ela mostra um renderização de XAML atualmente no modo de exibição XAML . When you change controls on the design surface, XAML view updates to reflect your changes. Design view provides many features for arranging controls in your WPF application's window or page. Some of the Design view features are shown in the following illustration.
.png "Recursos da exibição Design no WPF Designer")
Zoom
O controle de Zoom permite dimensionar a superfície de design. Você pode aplicar zoom de 10% para x 20. Aconfiguração de aplicar zoomé salvo no arquivo. suo da solução.
PAN
Quando a superfície de design é ampliada e barras de rolagem horizontais ou verticais aparecem, você pode fazer uma panorâmica para exibir partes da superfície de design que estão fora da tela de-. Pressione e mantenha a barra de espaços e, em seguida, arraste para deslocar a superfície de design.
Fit In View
O ajuste no botão modo de exibição permite dimensionar a superfície de design para a tela disponível em modo de exibição de Design. This is useful if you have zoomed very far in or out.
Grid Rails
Trilhos deGrade são usados para gerenciar a linhas e colunas em uma Grid de controle. You can create and delete columns and rows, and you can adjust their relative widths and heights. For more information, see Como: adicionar linhas e colunas para uma grade.
Gridlines
Linhas de grade são usadas para controlar a largura e altura de um Gridde colunas e linhas. You can add a new column or row by clicking in the rails above and to the left of the Grid. For more information, see Como: adicionar linhas e colunas para uma grade.
Gridline Indicators
A gridline indicator appears as a triangle in the grid rail. When you drag a gridline indicator or the gridline itself, the widths or heights of adjacent columns or rows update as you move the mouse. For more information, see Como: adicionar linhas e colunas para uma grade.
Move Handle
Uma alça de movimentação aparecerá na parte superior-à esquerda de um controle de painel selecionado e permite que você mover o painel. Click the move handle and drag the control to the desired position on the design surface. For more information, see Como: Selecionar e mover elementos na superfície de design.
Resize Handles
Alças de redimensionamento aparecem nos controles selecionados e permitem que você redimensionar o controle. When you resize a control, width and height values typically appear to help exactly size the control.
Margin Lines
Margins represent the amount of fixed space between the edge of a control and the edge of its container. Set the margins of a control by clicking its margin lines. For more information, see Como: Definir margens para um controle no criador de WPF.
Margin Stubs
Um stub de margem é exibida em um controle selecionado quando sua margem na definido como 0. Clique no stub de margem para definir uma distância da margem para a borda correspondente do contêiner. For more information, see Como: Definir margens para um controle no criador de WPF.
Snaplines
Linhas de ajuste ajudam a alinhar controles entre si. If snaplines are enabled, when you drag a control relative to other controls, snaplines appear when edges and the text of some controls are aligned horizontally or vertically. For more information, see Como: Alinhar para ambas as linhas de base de texto e margens.
Information Bar
A barra de informações aparece na parte superior do modo de exibição de Design e exibe informações sobre problemas de renderização no modo de exibição de Design. Em alguns casos, você pode clicar na barra de informações para obter informações adicionais sobre o problema. A ilustração a seguir mostra uma exibição expandida de barra de informações.
.png "Detalhes da barra de informações")
A barra de dimensionamento
Quando você move oponteiro do mousesobre um trilho de grade para um Grid controle que tem dois ou mais colunas ou linhas, a barra de dimensionamento aparece fora do trilho. A barra de dimensionamento permite conjunto fixo, estrela e Automático dimensionamento opções para Grid linhas e colunas. For more information, see Como: Redimensionar linhas e colunas em um controle Grid.
Marca de dimensionamento de raiz
A raiz marcas de dimensionamento é exibida-de inferior direito da janela no modo de exibição de Design quando a janela está selecionada. A raiz marcas de dimensionamento permite alternar o tamanho da raiz da janela entre automática e fixo. For more information, see Atributos de tempo de design.
XAML View
The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. O WPF e Silverlight Designer fornece um XAML e uma sincronizada modo de exibição de Design de seu aplicativo XAMLprocessadomarcação. ExibiçãoXAML inclui IntelliSense, a formatação automática-, realce de sintaxe e marcas de navegação. Some of the XAML features are shown in the following illustration.
.png "Recursos da exibição XAML no WPF Designer")
Split View Bar
A barra de modo de exibição de divisão permite controlar os tamanhos relativos do modo de modo de exibição de Design e XAML . Você pode também trocar modos de exibição, especificar se o modo de exibição de divisão horizontal ou vertical e recolher ou exibir. For more information, see Exibição de Divisão: Visualizar a superfície de design WPF e XAML ao mesmo tempo.
Extensão de marcação IntelliSense
Além de IntelliSensede idioma padrão, o modo de exibição de XAML suporta IntelliSense para extensões de marcação . Quando você digita uma chave esquerda ({) no modo de exibição XAML , a IntelliSense mostra as extensões disponíveis de marcação . Quando você escolher uma marcaçãodeextensão da lista, a IntelliSense mostra os atributos disponíveis. For more information, see Walkthrough: editando XAML no criador de WPF.
Tag Navigator
O tag navigator aparece abaixo do modo de exibição XAML e permite mover qualquer marca pai da marca atualmente selecionada no modo de exibição XAML . Quando você move oponteiro do mousesobre uma marca no tag navigator, uma visualização de miniatura é exibida para esse elemento. Walkthrough: editando XAML no criador de WPF.
Zoom
O controle de Zoom permite dimensionar o modo de exibição XAML . Você pode aplicar zoom de 20% para 400%.
Properties Window
O janela Propriedades permite que você defina os valores de propriedade em controles no modo de exibição de Design. Um exemplo do janela Propriedades é mostrado na ilustração a seguir.
.png "Janela de propriedades")
Sobre o janela Propriedades tem várias opções. Para alterar o nome do controle selecionado no momento, posicione o cursor na caixa Nome e digite o nome. -De superior direito exibe uma visualização de miniatura do controle selecionado no momento. Para listar as propriedades por categoria ou em ordem alfabética, clique na categorizado botão ou o alfabética botão. Para classificar as propriedades por fonte, clique na aClassificação por propriedadefonte botão. Para ver a lista de eventos para um controle, clique na eventos botão. Para procurar por uma propriedade, começar a digitar o nome da propriedade na Procurar caixa. The Properties window shows the properties that match your search as you type.
À direita do nome da propriedade na primeira coluna é uma o marcador depropriedade. O marcador de propriedade indica se há uma vinculação de dados ou um recurso aplicado à propriedade. Quando você clicar no marcador de propriedade , você pode em aberto o construtor de vinculação de dados , o selecionador de recurso , ou navegue até a definição de um recurso. A ilustração a seguir mostra as opções que estão disponíveis quando você clicar no marcador de propriedade de um estilo.
Data Binding Builder
O construtor de vinculação de dados permite criar ligações de dados sem digitar qualquer XAML. Você pode criar ligações para recursos, os contextos de dados e propriedades do elemento. Você também pode aplicar conversores de valor. For more information, see Passo a passo: Criando uma associação de dados usando o WPF Designer and Passo a passo: Usando um DesignInstance para associar dados no Designer.
.png "construtor de associação de dados")
Editor de margem
A margemdeeditor permite que você veja a cada margemdeconfiguração e como ele afeta o posicionamento do controle. Você também pode alterar as margens para um controle ou edição as margens para vários controles com oeditorde margem. For more information, see Como: Definir margens para um controle no criador de WPF.
Resource Picker
O selecionador de recurso permite localizar e atribuir recursos às propriedades de janela Propriedades. Você também pode extrair valores embutido em código , recursos para promover re-de uso. For more information, see Usando recursos.
.png "seletor de recursos")
Brush Editor
O pincel editor permite que você criar muitos tipos diferentes de pincéis no janela Propriedades. For more information, see Como: Criar um pincel usando o editor de pincel.
.png "editor de pincel")
Data Sources Window
Você pode integrar rapidamente dados em seuaplicativo do WPFusando o Janela Fontes de Dados. Quando tiver estabelecido uma conexão de dados, você pode arrastar tabelas de dados para a superfície de design e ligações de dados e lógica de negócios são geradas automaticamente. Você pode vincular a um objeto, um ADO.NET Dataset, um Modelo de Dados de Entidadeou um serviço. For more information, see Controles do WPF de ligação a dados em Visual Studio.
.png "Janela Fontes de Dados")
Document Outline Window
The Document Outline window provides a hierarchical view of a XAML document. You can use the Document Outline window to preview, select, or delete XAML elements. Um exemplo do janela Propriedades é mostrado na ilustração a seguir.
.png "Janela Estrutura de Tópicos de Documento")
For more information, see Navegando na Hierarquia do Elemento de um documento WPF.
Building Rich, Interactive User Interfaces
In WPF, the Window and Page classes are visual surfaces on which you display information to the user. You ordinarily build WPF applications by adding controls to a Window and developing responses to user actions, such as mouse clicks or key presses. A control is a discrete user interface (UI) element that displays data or accepts data input.
When a user does something to your Window or one of its controls, the action generates an event. Your application reacts to these events and processes them when they occur. For more information, see How to: Create a Simple Event Handler.
WPF contém uma variedade de controles que podem ser adicionados a uma janela: controles que exibem caixas de texto, botões suspensos-listas, botões de opção e mesmo páginas Web . For a list of all the controls you can use in a window, see Biblioteca de controle. Se um controle existente não atender às suas necessidades, o WPF suporta também criar seus próprios controles personalizados usando o UserControl e Control classes.
Com o do tipo arrastar e soltarWPF e Silverlight Designer, você pode facilmente criaraplicativos doWPF . Basta selecionar os controles com oponteiro do mousee adicioná-los a onde você deseja na janela. The designer provides tools, such as snaplines and continuous zooming, to make arranging controls easier.
Finally, if you have to create your own custom UI elements, the System.Windows.Media and System.Windows.Shapes namespaces contains a large selection of classes to render lines, circles, and other shapes directly in a window.
Help Creating Windows and Controls
For step-by-step information about how to use these features, see the following Help topics.
Description |
Help topic |
|---|---|
Creating a new WPF application with Visual Studio. |
|
Using controls in a window. |
|
Creating event handlers for controls. |
|
Handling events from a window and the window's controls. |
|
Navegando um layout do WPF ou do Silverlight . |
|
Creating dynamic layouts. |
|
Criar personalizado WPF controla. |
|
Criando ligações de dados. |
Collaboration with Expression Blend
WPF provides a strong separation of content and presentation, which makes it possible for software developers and graphical designers to collaborate on the appearance and behavior of an application. O WPF e Silverlight Designer é otimizado para desenvolvedores de software e o Expression Blend é otimizado para designers gráficos. For more information, see A colaboração com Expression Blend.
Consulte também
Conceitos
WPF Designer para desenvolvedores de formulários do Windows
A colaboração com Expression Blend
Outros recursos
Histórico de alterações
Date |
History |
Motivo |
|---|---|---|
|
Março de 2011 |
Informações atualizadas sobre janela Propriedades e margemdeeditor. |
Aprimoramento de informações. |