Pular para o conteúdo principal

Click com botão direito e menu de contexto no Silverlight

Quando o Silverlight 4 foi lançado um dos recursos mais aguardados era o clique do botão direito, até então não era possível incluir nada nessa funcionalidade. Hoje contamos com o "Context Menu control", sendo ele quem iremos mostrar ao clicar com o botão direito.
Já apresentamos aqui um exemplo de como realizar isso, hoje mostraremos com mais detalhes.

Novo projeto
Vamos iniciar o Visual Studio 2010 e criar uma nova aplicação Silverlight (Silverlight Application Project), com o nome ContextMenuSample:image1.gif

Em seguida vamos adicionar as referencias para o "Toolkit", que ira nos permitir trabalhar com "ContextMenu" e "MenuItem":
image2.gif

Agora vamos incluir um "TextBox". O click direito apresentará o "context menu", nele teremos dois menus, sendo eles "Grow Font" e "Shrink Font", ao selecionar uma das opções o tamanho da fonte será alterado.
Dando continuidade, adicionaremos dois eventos importantes, "MouseRightButtonDown" e "MouseRightButtonUp". Esses dois eventos serão responsáveis pela apresentação do menu:

image3.gif

No evento "MouseRightButtonDown" precisaremos desabilitar o comportaamento padrão do Silverlight:

image4.gif

Agora que o evento padrão não será mais apresentado codificaremos o "MouseRightButtonUp", onde iremos criar o "ContextMenu":

image5.gif

Como podemos perceber, no codigo acima criamos dois itens de menu e associamos ambos ao um unico evento de click. Por fim setamos a propriedade "IsOpen" para "true", conseguindo assim presentar o "Context menu".
A posição do "ContextMenu" será relativa em relação ao "LayoutRoot", por isso iremos definir "HorizontalOffset" e  "VerticalOffset" reformar relativa as coordendas "X" e "Y" do "LayoutRoot".
No evento de Click do "MenuItem" codificaremos o objetivo de nosso menu, aumentar ou diminuir a fonte:

image6.gif

Testando:
image7.gif

image8.gif

Fonte:
http://www.microsoft.com
http://www.c-sharpcorner.com/
http://msdn.microsoft.com
http://msdn.microsoft.com/pt-br/silverlight/default.aspx

Comentários

Mais visitadas

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker Neste guia, vamos criar uma aplicação básica que acessa um banco de dados PostgreSQL e realiza operações CRUD (Create, Read, Update, Delete). Vamos usar Flask e executar tudo com Docker. Sem estilos ou extras, apenas o essencial. Estrutura do Projeto crud-app/ |-- app/ | |-- app.py | |-- templates/ | | |-- index.html | | |-- edit.html |-- Dockerfile |-- requirements.txt |-- docker-compose.yml Passo 1: Dependências Crie um arquivo requirements.txt com as seguintes linhas: Flask==2.2.2 Flask-SQLAlchemy==3.0.2 psycopg2-binary==2.9.3 Werkzeug==2.2.2 Passo 2: Aplicação Flask Arquivo app/app.py : from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) # Configuração do banco de dados app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:password@db:5432/crud_db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db...

Centralizar Texto em Edit

Como todos sabemos o Edit mantém todo texto digitado a esquerda, o que não fica bem quando o usamos para a entrada de números, pois bem, o exemplo abaixo apresenta uma alternativa para centralizar um determinado valor dentro de um Edit: procedure EditChange(Sender: TObject); var vl_label : TLabel; //variável do tipo Label begin vl_label := TLabel.Create(self); //criamos um label WITH vl_label DO BEGIN Font.Name := TEdit(sender).Font.Name; //pegamos a fonte usada no edit Caption := TEdit(sender).Text; //pegamos o conteúdo do edit SendMessage(TEdit(sender).Handle, EM_SETMARGINS, EC_LEFTMARGIN, (TEdit(sender).Width-vl_label.Width) div 2); //centraliza no label e retorna para o edit END ; vl_label.Free; end ;