Gráficos escaláveis ​​em XAML

Ao adicionar gráficos e ícones ao seu aplicativo baseado em XAML (Silverlight, WPF, WP7, WP8 ou WinRT), uma escolha de design que geralmente vejo, e que faço com frequência, é usar PNG para tudo . Há um caminho melhor! XAML oferece suporte aos elementos básicos para gráficos escalonáveis . Usando a classe Shape e seus tipos derivados. Por exemplo, aqui está um botão simples com uma imagem definida como seu conteúdo:

Obter uma imagem raster

<Button Background="Transparent" Width="150" Height="75">
     <Image Source="/somepng.png"/>
</Button>

Esse método é rápido, mas o que acontece quando esse botão é exibido em um dispositivo hdpi? Se a imagem de origem for muito pequena, o resultado pode parecer terrível.

Para gráficos simples como a próxima seta , aqui está como tento resolver este problema:

Ferramentas que você vai precisar

Para criar dados de forma em XAML, uso algumas ferramentas diferentes:

* Expression Design

* Inkscape

Ambas as ferramentas podem importar arquivos SVG e, em seguida, exportar ou salvar o arquivo resultante como XAML. A expressão é um pouco melhor do que o Inkscape na produção de XAML válido; no entanto, o Inkscape é uma ferramenta de desenho mais poderosa. Depois de criar seu ícone XAML, você pode criar um estilo com esses dados de forma.

Crie um estilo direcionado a um ContentControl

<Style TargetType="ContentControl" x:Key="NextButtonScalable">
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="ContentControl">
            <Viewbox>
                <Canvas Width="50" Height="50">
                    <Path Data="M 19.285714 11.785714 7.4999997 18.5902 l -11.7857141 6.804485 0 -13.608971 0 -13.6089706 11.7857147 6.8044856 z" Fill="{TemplateBinding Foreground}"/>
                    <Path Data="M 19.285714 11.785714 7.4999997 18.5902 l -11.7857141 6.804485 0 -13.608971 0 -13.6089706 11.7857147 6.8044856 z" Fill="{TemplateBinding Foreground}"/>
                </Canvas>
            </Viewbox>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

A chave para este trabalho é que qualquer controle de forma dentro de um controle ViewBox será dimensionado para preencher o ViewBox (ignorando a largura e a altura definidas na tela filho). Como as formas são desenhos vetoriais, elas ficarão ótimas em qualquer resolução.

Use seu controle escalonável em um botão

<Button Background="Transparent" Width="150" Height="75">
    <ContentControl Style="{StaticResource NextButtonScalable}"       Foreground="Black"/>
</Button>

Uma grande coisa sobre Shapes em XAML é que você pode alterar a cor do seu ícone definindo a propriedade Foreground do ContentControl.

O XAML resultante usando esse método é um pouco mais pesado, no entanto, acho que esse método se tornará cada vez mais importante à medida que as telas hdpi se tornarem a norma.