Xamarin.Forms gatilhos de tela dupla

  • Artigo

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

  • SpanModeStateTrigger dispara uma VisualState alteração quando o modo de exibição do layout anexado é alterado.
  • WindowSpanModeStateTrigger dispara 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 intervalo

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

Observação

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

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

<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, é vermelho quando os painéis são mostrados lado a lado e é roxo quando os painéis são mostrados na parte superior inferior.

Gatilho de estado do modo de intervalo de janela

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

Observação

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

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

<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 é amarelo quando os painéis são mostrados na parte superior inferior.