Desencadenadores de doble pantalla de Xamarin.Forms

  • Artículo

El espacio de nombres de Xamarin.Forms.DualScreen incluye dos desencadenadores de estado:

  • SpanModeStateTrigger desencadena un cambio en VisualState cuando se modifica el modo de vista del diseño adjunto.
  • WindowSpanModeStateTrigger desencadena un cambio en VisualState cuando se modifica el modo de vista de la ventana.

Para obtener más información sobre desencadenadores de estado, vea Desencadenadores de estado.

Desencadenador de estado de modo de intervalo

Un elemento SpanModeStateTrigger desencadena un cambio en VisualState cuando se modifica el modo de intervalo del diseño adjunto. Este desencadenador tiene una única propiedad enlazable:

Nota:

El elemento SpanModeStateTrigger deriva de la clase StateTriggerBase y, por tanto, puede adjuntar un controlador de eventos al evento IsActiveChanged.

En el siguiente ejemplo de XAML, se muestra una clase Grid que incluye 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>

En este ejemplo, los estados visuales se establecen en un objeto Grid. El color de fondo del elemento Grid es verde cuando solo se muestra un panel, rojo cuando se muestran los paneles en paralelo y púrpura cuando los paneles se muestran de arriba a abajo.

Desencadenador de estado de modo de intervalo de ventana

Un elemento WindowSpanModeStateTrigger desencadena un cambio en VisualState cuando se modifica el modo de intervalo de la ventana. Este desencadenador tiene una única propiedad enlazable:

Nota:

El elemento WindowSpanModeStateTrigger deriva de la clase StateTriggerBase y, por tanto, puede adjuntar un controlador de eventos al evento IsActiveChanged.

En el siguiente ejemplo de XAML, se muestra una clase Grid que incluye 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>

En este ejemplo, los estados visuales se establecen en un objeto Grid. El color de fondo del elemento Grid es rojo cuando solo se muestra un panel, verde cuando se muestran los paneles en paralelo y amarillo cuando los paneles se muestran de arriba a abajo.