Organizar elementos em grupos

Os grupos permitem separar o design do mostrador do relógio em uma estrutura lógica.

Isso pode ser útil para organizar componentes. Você pode dar a cada grupo um name para indicar a finalidade dele.

Outro motivo para usar grupos é que você pode tratar tudo dentro deles como uma única entidade para ajustar a aparência, mesmo que as fontes de dados mudem.

Confira alguns exemplos de como isso pode ser útil. O Group a seguir contém vários elementos PartText, PartImage e PartDraw que compõem uma única parte lógica do mostrador do relógio:

<Group name="decorations" x="100" y="100" width="200" height="200">
    <!-- PartText, PartImage, PartDraw elements go here -->
</Group>

Mudar o comportamento do modo ambiente

Depois de definir o Group, a visibilidade de todo o Group pode ser ajustada para o Modo ambiente. Por exemplo, para ocultar o Group:

<Group name="decorations" x="100" y="100" width="200" height="200">
    <Variant mode="AMBIENT" target="alpha" value="0" />
    <!-- PartText, PartImage, PartDraw elements go here -->
</Group>

Isso evita a necessidade de adicionar um elemento Variant individualmente a cada elemento filho.

Transformar um grupo

Assim como ao ajustar o comportamento ambiente usando Variant, muitas das propriedades de Group podem ser ajustadas usando um ou mais elementos Transform.

Neste exemplo, o Group é girado com base no segundo. Ao especificar pivotX e pivotY como 0.5, a rotação ocorre ao redor do centro do Group, independente de onde cada elemento, como PartText ou PartImage, está dentro desse Group:

<Group name="decorations" x="100" y="100" width="200" height="200">
    <!-- One full rotation per minute -->
    <Transform target="angle" value="[SECOND] * 6" />
    <!-- PartText, PartImage, PartDraw elements go here -->
</Group>