Xamarin.forms: [Mejora] Agregar FlyoutItem.IsVisible, Tab.IsVisible, BaseShellItem.IsVisible

Creado en 13 feb. 2019  ·  26Comentarios  ·  Fuente: xamarin/Xamarin.Forms

Resumen

Proporcione propiedades adjuntas para que los usuarios puedan definir más directamente si algo está visible en el control flotante o en la barra de pestañas.

Sugerencias futuras de API

Deberíamos agregar opciones para que cuando los usuarios usen FlyoutDisplayOptions="AsMultipleItems" puedan elegir mostrar el padre como un encabezado. Con el control de expansión también podríamos agregar eso como configuración.

API

```C#
FlyoutItem.IsVisible //Propiedad adjunta de BP
Tab.IsVisible //Propiedad adjunta de BP
BaseShellItem.IsVisible // BP (propiedad no adjunta)

## Examples BaseShellItem.IsVisible 

If you set BaseShellIitem IsVisible to false it won't show up in the Flyout or on any of the tabs

## Examples Tab.IsVisible

```xaml
<TabBar>
    <Tab Title="Tab 1">
          <ShellContent Title="Top Tab 1" />
          <ShellContent Title="Top Tab 2"  Tab.IsVisible="false"/>
          <ShellContent Title="Top Tab 3" />
    </Tab>
    <Tab Title="Tab 2" Tab.IsVisible="false">
    </Tab>
</TabBar>

Ejemplos FlyoutItem.IsVisible

Los usuarios quieren un control flotante que no refleje ninguna de las pestañas en la pantalla.

<MenuItem title="item 1 "/>
<MenuItem title="item 2" />
<MenuItem title="item 3" />
<TabBar Shell.FlyoutBehavior="Flyout" FlyoutItem.IsVisible="False">
    <Tab>
    </Tab>
</TabBar>

Representa 3 elementos flotantes

  • Objeto 1
  • artículo 2

- Artículo 3

<FlyoutItem title="item 1 " />
<FlyoutItem title="item 2" />
<ShellContent title="Content" FlyoutItem.IsVisible="False" />

Representa 2 elementos flotantes incluso si está en el elemento ShellContent

  • Objeto 1
  • artículo 2

Caso de uso previsto

El caso de uso que tengo en mente es tener un elemento en el menú Hamburger para que el usuario actualice la aplicación a Premium. Una vez que el usuario haya actualizado, el elemento ya no debería estar visible.
Padre: #2415

shell in-progress high impact proposal-accepted enhancement ➕

Comentario más útil

¿Podríamos obtener una actualización sobre esto? (¡realmente, realmente quiero esto!)

Todos 26 comentarios

¿Algún avance en esto?

@PureWeen Te vi usando esto en Xam Dev Summit, ¿está en un Pre o algo así?

Otro caso de uso previsto es donde un conjunto de funciones (utilizadas con frecuencia) debe estar visible en la barra de pestañas inferior y otro conjunto de funciones (configuración, restaurar compras, ayuda, acerca de, etc.) debe estar accesible desde el menú de hamburguesas. Si esto ya es posible, por favor hágamelo saber.

¿Podríamos obtener una actualización sobre esto? (¡realmente, realmente quiero esto!)

protuberancia

Realmente necesito esto

¿Algún avance en esto?

¿Cualquier actualización? Realmente necesitamos esto.

¿Algún avance en esto?

Parece que Shell es bastante inútil a menos que esté creando una aplicación muy pequeña. Sin esto, no podemos establecer permisos u ocultar páginas que no queremos en el control flotante. ¿Cómo es que esto no es una prioridad en este momento?

Tienes razón @brepetti
Me pregunto si me estoy perdiendo algo aquí...

@rodrigojuarez @brepetti

La parte divertida es que en XDS el año pasado se discutió como un artículo que iba a estar pronto... Hasta el punto en que lo mostraron.

Creo que esto probablemente terminó siendo un bloqueador debido a cómo maneja la pila de navegación. Porque sé que el ejemplo que se muestra en XDS estaba usando una pila de navegación en su mayoría personalizada/reconstruida.

Logré que funcionara para TabBar Top Tabs con una solución manual creando los elementos ShellContent manualmente (agregando, eliminando). En Xamarin.Forms 4.6 ahora también funciona para iOS (solo se corrigió hace 1 día en 4.6).

¿Debería funcionar también para Hamburger Menu?

@ malte1989 Sí, estamos hablando de un elemento de shell, también conocido como algo que está en el árbol visual de shell.

@ malte1989 , ¿podría proporcionar algún código de ejemplo?

@ malte1989 , ¿podría proporcionar algún código de ejemplo?

Claro, publicaré el código para mi solución de barra de pestañas mañana.

@Jakar510

AppShell.xaml

<TabBar Route="tabBar">
        <Tab 
            x:Name="myTab" 
            Route="tab1"
            Icon="tab_icon1.png">
            <ShellContent 
                x:Name="shellStart"
                Route="route1A" 
                Title="title" 
                ContentTemplate="{DataTemplate view:Page1A}" />
        </Tab>
        <Tab 
            Route="tab2"
            Icon="tab_icon2.png">
            <ShellContent 
                Route="route2" 
                Title="title2" 
                ContentTemplate="{DataTemplate view:Page2}" />
        </Tab>
        </Tab>
        <Tab 
            Route="tab3"
            Icon="tab_icon3.png">
            <ShellContent 
                Route="route3" 
                Title="title3" 
                ContentTemplate="{DataTemplate view:Page3}" />
        </Tab>
    </TabBar>

AppShell.xaml.cs

public ShellContent shell0;
public ShellContent shell1;
public ShellContent shell2;
public ShellContent shell3;
public static Tab tabLocal;

constructor

            tabLocal = myTab;
            shell0 = shellStart;
            shell1 = new ShellContent()
            {
                Content = new Page1B(),
                Title = "",
                Route = ""
            };
            shell2 = .... Page1C() ...
            shell3 = .... Page1D() ...
            ...

Cambio de página 0 a 1

AppShell.tabLocal.Items.Add(shell1);
AppShell.tabLocal.Items.Remove(shell0);

Tal vez necesite estos dos métodos para manejar su navegación.

protected async override void OnNavigating(ShellNavigatingEventArgs args)
protected override void OnNavigated(ShellNavigatedEventArgs args)

Espero que esto te ayude. Por favor, déjame una nota si esto funciona para ti.

Estaré trabajando en esto para 4.7/4.8

Actualicé la especificación si alguien quiere comentar

@PureWeen No, pero espero que cuando empieces a trabajar en esto publiques la transmisión de twitch para que podamos asegurarnos de sintonizarnos 👍

Estaré trabajando en esto para 4.7/4.8
Actualicé la especificación si alguien quiere comentar

Perdón por la pregunta tonta: ¿dónde puedo encontrar y leer las especificaciones?

@ncarandini Acabo de actualizar la descripción de este problema con la especificación

¡Si gracias!

Creo que encontré una solución para esto (por ahora).
Hacer esto:

  • asigne un nombre a su elemento flotante o elementos, por ejemplo
    <FlyoutItem Title="Self Review" x:Name="fiSelf"> <FlyoutItem.Icon> <FontImageSource FontFamily="{StaticResource sapcIconFont}" Glyph="{StaticResource IconUser}" Color="{StaticResource IconColor}"/> </FlyoutItem.Icon> <ShellContent> <viewsAssess:StartSelfPage /> </ShellContent> </FlyoutItem>

  • anule OnBindingContextChanged en AppShell.cs y agregue código para verificar la condición para ocultar y mostrar, luego llame al método Clear en la propiedad Items del flyitem
    protected override void OnBindingContextChanged() { base.OnBindingContextChanged(); if(App.IsIntern) { fiAssess.Items.Clear(); fiPeer.Items.Clear(); fiSelf.Items.Clear(); fiVerifications.Items.Clear(); } }

funciona para mi

cerrado por #10980

Esto todavía se comporta de manera extraña, cada vez que cambiamos dinámicamente la propiedad IsVisible en un BaseShellItem, de vez en cuando se pierde el estilo de un ShellContent. Empujar una página sobre el contenido del shell y luego abrirlo parece solucionarlo.

Un ejemplo sería tener 2 páginas, el contenido de shell X tiene un botón que cambia una propiedad booleana que está vinculada a la propiedad IsVisible en el contenido de shell Y

@GeorgeVelikov , ¿puedes registrar un problema?

¿Fue útil esta página
0 / 5 - 0 calificaciones