Partilhar via

Xamarin.Forms Gatilhos de tela dupla

  • Artigo

O Xamarin.Forms.DualScreen namespace inclui dois gatilhos de estado:

  • SpanModeStateTrigger aciona uma VisualState alteração quando o modo de exibição do layout anexado é alterado.
  • WindowSpanModeStateTrigger Aciona uma VisualState alteração quando o modo de exibição da janela é alterado.

Para obter mais informações sobre gatilhos de estado, consulte Gatilhos de estado.

Gatilho de estado do modo de amplitude

A SpanModeStateTrigger aciona uma VisualState alteração quando o modo de extensão do layout anexado é alterado. Esse gatilho tem uma única propriedade associável:

Observação

SpanModeStateTrigger deriva da classe StateTriggerBase e, portanto, pode anexar um manipulador de eventos ao evento IsActiveChanged.

O exemplo de XAML a seguir mostra um Grid que inclui os objetos SpanModeStateTrigger:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="GridSingle">
                <VisualState.StateTriggers>
                    <dualScreen:SpanModeStateTrigger SpanMode="SinglePane"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Green" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="GridWide">
                <VisualState.StateTriggers>
                    <dualScreen:SpanModeStateTrigger SpanMode="Wide" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="GridTall">
                <VisualState.StateTriggers>
                    <dualScreen:SpanModeStateTrigger SpanMode="Tall" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Purple" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</Grid>

Neste exemplo, os estados visuais são definidos em um Grid objeto. A cor da tela de fundo do Grid é verde quando apenas um painel é mostrado, é vermelha quando os painéis são mostrados lado a lado e é roxa quando os painéis são mostrados de cima para baixo.

Gatilho de estado do modo de extensão de janela

A WindowSpanModeStateTrigger dispara uma VisualState alteração quando o modo de extensão da janela é alterado. Esse gatilho tem uma única propriedade associável:

Observação

WindowSpanModeStateTrigger deriva da classe StateTriggerBase e, portanto, pode anexar um manipulador de eventos ao evento IsActiveChanged.

O exemplo de XAML a seguir mostra um Grid que inclui os objetos WindowSpanModeStateTrigger:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NotSpanned">
                <VisualState.StateTriggers>
                    <dualScreen:WindowSpanModeStateTrigger SpanMode="SinglePane"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Spanned">
                <VisualState.StateTriggers>
                    <dualScreen:WindowSpanModeStateTrigger SpanMode="Wide" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Green" />
                </VisualState.Setters>
            </VisualState>
                <VisualState x:Name="Tall">
                    <VisualState.StateTriggers>
                        <dualScreen:WindowSpanModeStateTrigger SpanMode="Tall" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Yellow" />
                    </VisualState.Setters>
                </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</Grid>

Neste exemplo, os estados visuais são definidos em um Grid objeto. A cor da tela de fundo do Grid é vermelha quando apenas um painel é mostrado, é verde quando os painéis são mostrados lado a lado e é amarela quando os painéis são mostrados de cima para baixo.