Значки вкладок в Xamarin.Forms UWP TabbedPage?

Как мне заставить UWP использовать свойство Icon страницы при создании TabbedPage в Xamarin.Forms?

похоже, что UWP может поддерживать это отлично, если я правильно настрою свои атрибуты / файлы форм.

Вот мой XAML TabbedPage. Все значки настроены и работают для iOS и Android, и даже изображение на странице в UWP отображается нормально (это означает, что файлы, вероятно, правильно находятся в проекте).

<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>

xamarin.forms uwp tabbedpage xamarin.uwp
person patridge    schedule 21.11.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я рассказал, как это возможно, здесь http://depblog.weblogs.us/2017/07/12/xamarin-forms-tabbed-page-uwp-with-images/

Короче говоря, вам нужно изменить значение по умолчанию HeaderTemplate, которое используется UWP. Но из-за способа запуска форм Xamarin это непросто. Таким образом, вам нужно вставить настраиваемый шаблон в словарь ресурсов.

Пример проекта размещен на Github здесь https://github.com/Depechie/XamarinFormsTabbedPageUWPWithIcons

Более длинная деталь:

Вам нужно предоставить свой собственный TabbedPageStyle и отключить тот, который Xamarin использует для рендеринга UWP. Таким образом, новый стиль содержит изображение, в котором мы привязываем данные источника к свойству Xamarin Icon.

<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>

Фактическое переключение стилей выполняется в App.Xaml.cs вот так

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

Вам также понадобится конвертер, чтобы убедиться, что элемент управления Image понимает источник значка, предоставленный 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();
    }
}
person Depechie    schedule 22.11.2017
comment
Можете ли вы предоставить более важные сведения по внешней ссылке прямо в ответе? - person patridge; 27.11.2017
comment
Похоже, что значки теперь работают в последних реализациях UWP, но макет не контролируется. Я думаю, что использование замены стиля - это ключ - например, знаете ли вы, как переместить вкладки вниз с помощью этой техники? - person Coruscate5; 23.10.2020
comment
Честно говоря, я не смотрел на новую реализацию. Полагаю, вам сначала нужно выяснить, какой элемент управления используется в целевом объекте UWP. С этим, возможно, вы сможете найти способ изменить макет ... например, stackoverflow.com/questions/35482341/, если это будет поворотный элемент управления. - person Depechie; 24.10.2020

arrow_upward
3
arrow_downward

В настоящее время TabbedPageRenderer и iOS TabbedRenderer и даже macOS TabbedPageRenderer, используйте свойство Icon для настройки пользовательского интерфейса вкладки, но для работы средства визуализации UWP потребуется обновление.

person patridge    schedule 21.11.2017
comment
Согласен, спасибо. Но для этого мне нужно подождать еще час. - person patridge; 23.11.2017