Expression Blend 3 - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Mar 5

Alterando a aparência de um CheckBox com WPF e C#

Escrito por Alexandre Tadashi em 1, 4, 6, api, AR, BI, bitmap, Blend, Blend 3, blog, Blogs, botão, C#, carregar, checkBox, class, código, código fonte, control, css, demo, Design, Desktop, Diversos, efeito, event, Evento, Eventos, exemplo, expression, Expression Blend, Expression Blend 3, fonte, for, fundo, Google, HCI, IE, if, image, imagens, int, layout, lista, map, mg, Microsoft, Microsoft Expression, NaN, O, on, Outros, padrão, processo, RIA, Ria’s Geral, silverlight, Storyboard, tag, Tema, Tutoriais, Tutorial, UI, UX, Visual Studio, Visual Studio 2008, WPF, XAML, XP @ 03 5th, 2010 | via http://alexandretadashi.net/ | Sem comentários

Neste tutorial vou criar um UserControl simples com um CheckBox e modificar a aparência inserindo uma imagem no lugar do layout padrão do CheckBox, dessa forma podemos utilizar qualquer imagem e criar CheckBox com um apelo visual mais sofisticado. O conceito pode ser aplicado em diversos outros objetos WPF.

No exemplo vou utilizar o Microsoft Expression Blend 3 para auxiliar no design do tutorial, vou carregar duas imagens png, a primeira com o desenho de uma lâmpada ligada e a segunda com outra lâmpada desligada, quando o checkbox for clicado a lâmpada vai acender e um efeito de luz suave vai aparecer.

Primeiro crie uma aplicação em WPF e adicione um UserControl com o nome de UserControlCheckBox.xaml, modifique a altura e o tamanho para 100: Height=”100″ Width=”100″ e altere o fundo do layout GRID para “Black”. Dentro do layout GRID adicione uma Ellipse com o tamanho e altura de 20.

Agora vamos criar um Style herdando as propriedades de um objeto CheckBox, selecione a Ellipse com o botão direito do mouse e clique em Make into Control… conforme a figura abaixo:

Selecione o CheckBox e dê o nome do Style de CheckBoxStyle1:

Localize o resources do UserControl e adicione um ImageBrush que vai “pintar” a Ellipse com uma imagem que iniciamente será a lâmpada apagada:

Agora vamos adicionar Triggers que vão habilitar os eventos check e uncheck acionando Storyboards que vão animar as propriedades Opacity e Radius da Ellipse e criar um efeito interessante simulando uma luz. Clique em Triggers, depois em Event para adicionar um evento, selecione o objeto Checkbox e depois Checked e por fim clique no sinal de + para adicionar uma Storyboard, conforme a figura abaixo:

Repita o processo para o evento Unchecked, neste momento temos o trigger conforme a listagem abaixo:

Duas Storyboards foram criadas, para trocar a imagem quando o CheckBox é acionado adicione o evento Completed na Storyboard OnChecked1 e adicione o código C# abaixo:

ImageBrush brush = (ImageBrush)this.Resources["imgb"];
Image image1 = new Image();
brush.ImageSource =
new BitmapImage(new Uri(“luz_apagada.png”, UriKind.Relative));

Repita o processo no evento Completed da Storyboard OnUnchecked1 mudando somente a imagem:

brush.ImageSource = new BitmapImage(new Uri(“luz_ligada.png”, UriKind.Relative));

Para finalizar o tutorial vamos animar as propriedades Opacity e Radius para simular uma luz no CheckBox inserindo um novo efeito ao controle, na Storyboard OnChecked1 adicione o código:

E adicione o código abaixo na Storyboard OnUnchecked1:

Adicione uma Ellipse entre o GRID Layout e o CheckBox e utilize o efeito BlurEffect que vai dar o efeito de luz no CheckBox:

Agora é só adicionar o UserControl em seu projeto e testar.

Código fonte do tutorial : Clique aqui
Expression Blend 3 / Visual Studio 2008

Fev 27

Técnicas de Design I – Microsoft Expression Blend 3

Escrito por Robson Fernandes em 1, 4, 6, app, AR, Blend, Blend 3, blog, botão, class, control, Design, Download, expression, Expression Blend, Expression Blend 3, flash, image, int, Mac, mg, Microsoft, Microsoft Expression, NaN, O, on, Pessoal, Projetos, RIA, Ria’s Geral, screen, Screencast, screencasts, silverlight, Silverlight - Blend, SilverLight - Design, Silverlight 3, Software, swf, UI, wave, XP @ 02 27th, 2010 | via http://www.riasoftware.com.br/blog/ | 2 comentários

microsoft_expression_blend

INTRODUÇÃO

Bom dia pessoal!
Eu fiquei ocioso durante um intervalo de tempo, estive trabalhando em alguns projetos particulares, e acabei não atualizando meu blog neste período.
Mas vamos ao que interessa! A pedido de alguns leitores do meu blog, vou começar a criar pequenos ScreenCasts. Hoje estarei publicando o meu primeiro!! rsrsr…
Neste, abordarei algumas técnicas de design que podem ser utilizadas no Microsoft Expression Blend 3, para a construção de um “Botão de Gel“.

Espero que gostem! Abs.

Robson Fernandes

Jul 10

Silverlight 3 e Expression Blend 3 released!

Escrito por DClick Team em Expression Blend 3, silverlight, Silverlight 3 @ 07 10th, 2009 | via http://blog.dclick.com.br/pt/ | Sem comentários

Olá pessoal.

Super novidade.

Microsoft acaba de lançar a release do Silverlight 3, segue os links para download:

Expression Blend 3 with Sketchflow

Na versão release do Blend 3, voce podera ver entre outras novidades o Skectchflow, ferramenta muito comentada nas apresentações do MIX09.

Silverlight 3 Software Development Kit (SDK)

Todos os assemblys necessários para começar a desenvolver em Silverlight 3 e a documentação oficial =).
Silverlight 3 Tools for Visual Studio 2008 SP 1

Ferramentas para desenvolver Silverlight 3 no Visual Studio 2008

Agora com o lançamento oficial da versão 3, podem esperar com novos tutoriais, videos e muitos exemplos em Silverlight=)

abraço.