xamarin.forms - navegacion - xamarin forms tabbed page icon

Íconos de pestañas en un Xamarin.Forms UWP TabbedPage?

Question

Al armar un TabbedPage en Xamarin.Forms, ¿cómo consigo que UWP use la propiedad Icon de la página?

Parece que UWP podría soportar esto muy bien, si configuro correctamente los atributos / archivos de Forms.

Aquí está mi TabbedPage XAML. Los íconos están configurados y funcionan para iOS y Android, e incluso la Imagen en la página en UWP rinde bien (lo que significa que los archivos están probablemente en el proyecto correctamente).

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:tabbed"
             x:Class="tabbed.MainPage">
    <TabbedPage.Children>
        <local:InitialPage Title="Tab1" Icon="star.png" />
        <ContentPage Title="Tab2" Icon="gear.png">
            <ContentPage.Content>
                <StackLayout>
                    <Label Text="A nice label." />
                    <Image Source="star.png" /><!-- works here -->
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </TabbedPage.Children>
</TabbedPage>

Answer 1

Como está actualmente, el renderizador UWP TabbedPage no usa la propiedad Icon en absoluto, por lo que obtener iconos de pestaña requerirá un renderizador personalizado. Incluso las muestras oficiales de UWP en realidad no parecen tener este hecho, lo que requiere un UserControl personalizado .

El Android TabbedPageRenderer y el iOS TabbedRenderer , e incluso el macOS TabbedPageRenderer , usan la propiedad Icon para ajustar la UI de pestañas, pero el renderizador de UWP debería actualizarse para que esto funcione.

Answer 2

Resumí cómo esto es posible aquí http://depblog.weblogs.us/2017/07/12/xamarin-forms-tabbed-page-uwp-with-images/

En resumen, debe cambiar la HeaderTemplate predeterminada que está siendo utilizada por UWP. Pero debido a la forma en que se forma Xamarin, esto no es sencillo. Por lo tanto, debe insertar una plantilla personalizada en el diccionario de recursos.

El proyecto de ejemplo está en Github aquí https://github.com/Depechie/XamarinFormsTabbedPageUWPWithIcons

Más detalles:

TabbedPageStyle proporcionar su propio estilo de página de TabbedPageStyle y cambiar el que Xamarin está utilizando para su representación de UWP. Entonces, el nuevo estilo contiene una Imagen donde los datos vinculamos el Origen a la propiedad Icono de Xamarin.

<Style x:Key="TabbedPageStyle2" TargetType="uwp:FormsPivot">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Image Source="{Binding Icon, Converter={StaticResource IconConverter}}" Width="15" Height="15" />
                    <TextBlock Name="TabbedPageHeaderTextBlock" Text="{Binding Title}"
                                Style="{ThemeResource BodyTextBlockStyle}" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

El cambio de estilo real se realiza en la App.Xaml.cs como esta

((Style)this.Resources["TabbedPageStyle"]).Setters[0] = ((Style)this.Resources["TabbedPageStyle2"]).Setters[0];

También necesitarás un convertidor para asegurarte de que el control de imagen comprende la fuente del icono que da Xamarin

public class IconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value != null && value is Xamarin.Forms.FileImageSource)
            return ((Xamarin.Forms.FileImageSource)value).File;

        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}