WPF: Como usar uma PropertyGrid para criar uma interface para as definições

Neste artigo vou mostrar como rapidamente se pode criar uma interface para alterar as definições de uma aplicação WPF usando o controlo PropertyGrid do Extended WPF Toolkit.

1. Instalar o Extended WPF Toolkit

Se ainda não o têm, o primeiro passo é instalar o Extended WPF Toolkit. Podem facilmente fazer isso através do NuGet.

2. Criem as vossas classes de definições

Como exemplo, vamos continuar a trabalhar com as classes que criamos num artigo anterior. Para sumariar, criamos uma classe serializable para as definições, que são guardadas no ficheiro de definições default da aplicação WPF.

Para melhor demonstrar o conceito, vamos adicionar mais algumas propriedades. A nossa classe final é a seguinte:

[Serializable]
public class MyConfig
{
    [Browsable(false)]
    public WindowConfig MainWindow { get; set; }
    
    [Category("General settings")]
    public Theme Theme { get; set; }
    
    [ExpandableObject]
    [Category("General settings")]
    [DisplayName("Tab options")]
    public TabConfig Tab { get; set; }
    
    public MyConfig()
    {
        MainWindow = new WindowConfig();
        MainWindow.Width = 600;
        MainWindow.Height = 400;
        
        Theme = Theme.Light;
        
        Tab = new TabConfig();
        Tab.AllowReorder = true;
        Tab.ShowIcon = true;
        Tab.MaxResults = 20;
    }
}

E um novo tipo para demonstrarmos hierarquia:

[Serializable]
public class TabConfig
{
    [DisplayName("Allow tab reordering?")]
    public bool AllowReorder { get; set; }
    
    [DisplayName("Show icon?")]
    public bool ShowIcon { get; set; }
    
    [DisplayName("Maximum results")]
    public int MaxResults { get; set; }
    
    public TabConfig()
    {
    }
}

3. Definir os atributos necessários

Devem ter reparado que pusemos alguns atributos nas propriedades. Estes atributos controlam que propriedades vão ser mostradas na interface e de que forma.

São bastante explicativas:

Browsable: define a sua visibilidade
Category: a que categoria pertence
DisplayName: o título que será mostrado
ExpandableObject: se é possível editar as propriedades do objecto

4. Guardar no ficheiro das definições

Não se esqueçam de incluir no ficheiro de definições uma propriedade com o vosso tipo.

5. Adicionar a PropertyGrid

Primeiro, definam o namespace:

xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

Depois adicionem o controlo:

<xctk:PropertyGrid
    AutoGenerateProperties="true"
    SelectedObject="{my:SettingBinding .}" />

Estou a usar a mesma extensão do artigo anterior que permite a ligação de propriedades às definições. O ponto especifica que a ligação é feita à fonte.

O resultado final:

Interface de definições com PropertyGrid

É uma forma rápida de construir uma interface para as definições, especialmente numa situação de mockup. Além disso ainda ganham uma caixa de pesquisa como bónus.

Não se esqueçam de guardar as definições:

Settings.Default.Save();