Offset

As classes utilitárias de offsets no WPF permitem ajustar a posição de elementos com as propriedades CSS top, right, bottom e left. Elas são projetadas para serem intuitivas, seguindo uma sintaxe clara e flexível, compatível com unidades como %, px, dvh e dvw.

Como Funcionam as Classes de Offsets

As classes de offsets seguem o padrão: (propriedade)(valor)(unidade), onde:

• Propriedade: top, right, bottom ou left.

• Valor: Um número inteiro (positivo ou negativo) que define o deslocamento.

• Unidade: Opcional, pode ser %, px, dvh (altura dinâmica da viewport) e dvw (largura dinâmica da viewport). Se omitida, o valor é tratado como unitless (ex.: top(10) equivale a top: 10;).

Isso significa que uma classe válida segue este formato:

<div class="fixed top(50%) left(20px)">
  <!-- Esse elemento html definiu os seguintes atributos css - top: 50%; left: 20px; -->
</div>

<div class="absolute right(-10dvw) bottom(100)">
  <!-- Esse elemento html definiu os seguintes atributos css - right: -10dvw; bottom: 100; -->
</div>

Usando Funções de Classe para Centralização

As classes utilitárias de centralização do WPF simplificam o alinhamento de elementos horizontalmente, verticalmente ou em ambos os eixos. Elas combinam as propriedades left, top e transform para posicionar elementos com precisão, especialmente em elementos com position: absolute, fixed ou sticky.

Como Funcionam as Classes de Centralização

As classes de centralização seguem uma sintaxe simples e intuitiva: center(tipo), onde o tipo define o eixo de centralização:

As classes de centralização são ideais para elementos com position: absolute, fixed ou sticky, dentro ou fora de um contêiner pai com position semelhante. Certifique-se de que o elemento pai tenha dimensões definidas de alguma maneira (ex.: width e height) para que a centralização funcione corretamente.

Com essa sintaxe, confira alguns exemplos dessas funções de classe em execução:

<div class="fixed top(20px) center(h)">
  <!-- No seguinte elemento html, a seguinte configuração css foi atribuída - top: 20px; left: 50%; transform: translateX(-50%); -->
</div>

<div class="absolute top(5%) center(v)">
  <!-- No seguinte elemento html, a seguinte configuração css foi atribuída - left: 5%; top: 50%; transform: translateY(-50%); -->
</div>

<div class="relative center(c)">
  <!-- No seguinte elemento html, a seguinte configuração css foi atribuída - left: 50%; top: 50%; transform: translate(-50%, -50%); -->
</div>

Notas

Posicionamento: As classes de centralização requerem que o elemento tenha position: absolute, fixed ou sticky.

Contêiner Pai: Certifique-se de que o elemento pai tenha algum atributo position não estático e dimensões definidas de alguma maneira.

Transformações Adicionais: Certifique-se que, ao usar outros tipos de configurações de transformação, que elas não sobrescrevam os seus estilos!