Git Product home page Git Product logo

Comments (9)

surgien avatar surgien commented on July 18, 2024

I think the main problem is the empty implementation in IconNavigationRenderer (FormsPlugin.Iconize.UWP). You have no access to the Page and/or to the CommandBar/AppBarButtons:
image

Neither with a ContentPageRenderer ​​nor a NavigationPageRenderer. With the ContentPageRenderer you can only override the whole page. The ToolbarItem itsself has no accompanying renderer.

Quite frustrating...

from xamarin.plugins.

Tlaster avatar Tlaster commented on July 18, 2024

This is my custom implement of NavigationPageRenderer, maybe it still works on custom ContentPageRenderer

public class ExIconNavigationRenderer : NavigationPageRenderer
{
    private CommandBar _commandBar;

    public ExIconNavigationRenderer()
    {
        ElementChanged += ExIconNavigationRenderer_ElementChanged;
    }

    private void ContainerElement_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        ContainerElement.Loaded -= ContainerElement_Loaded;
        _commandBar = typeof(PageControl).GetTypeInfo().GetDeclaredField("_commandBar").GetValue(ContainerElement) as CommandBar;
        _commandBar.DataContextChanged += CommandBar_DataContextChanged;
    }

    private void CommandBar_DataContextChanged(Windows.UI.Xaml.FrameworkElement sender, Windows.UI.Xaml.DataContextChangedEventArgs args)
    {
        var toolbarItems = (args.NewValue as Xamarin.Forms.Page).ToolbarItems;
        foreach (IconToolbarItem item in toolbarItems.Where(item => item is IconToolbarItem && (item as IconToolbarItem).IsVisible))
        {
            var element = _commandBar.PrimaryCommands.Where(command => command is AppBarButton && (command as AppBarButton).DataContext == item).FirstOrDefault();
            if (element == null) continue;
            var appBarButton = element as AppBarButton;
            var icon = Plugin.Iconize.Iconize.FindIconForKey(item.Icon);
            if (icon == null) continue;
            appBarButton.Icon = new FontIcon()
            {
                FontFamily = Plugin.Iconize.Iconize.FindModuleOf(icon).ToFontFamily(),
                Glyph = $"{icon.Character}",
                Foreground = new SolidColorBrush(item.IconColor.ToWindowsColor()),
            };
        }
    }
    
    private void ExIconNavigationRenderer_ElementChanged(object sender, VisualElementChangedEventArgs e)
    {
        ElementChanged -= ExIconNavigationRenderer_ElementChanged;
        ContainerElement.Loaded += ContainerElement_Loaded;
    }
}

And this is my custom implement of IconImageRenderer, It uses Win2D

public class ExIconImageRenderer : IconImageRenderer
{
    protected override async void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);
        if (Control == null || Element == null)
            return;
        await UpdateImage();
    }
    protected override async void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (Control == null || Element == null)
            return;

        switch (e.PropertyName)
        {
            case nameof(IconImage.Icon):
            case nameof(IconImage.IconColor):
            case nameof(IconImage.IconSize):
                await UpdateImage();
                break;
        }
    }

    private async Task UpdateImage()
    {
        var iconImage = Element as IconImage;
        var icon = Plugin.Iconize.Iconize.FindIconForKey(iconImage.Icon);
        CanvasDevice device = CanvasDevice.GetSharedDevice();
        var target = new CanvasRenderTarget(device, Convert.ToSingle(Element.HeightRequest), Convert.ToSingle(Element.HeightRequest), 96 * 4);
        using (var session = target.CreateDrawingSession())
        using (var format = new CanvasTextFormat { FontSize = Convert.ToSingle(Element.HeightRequest), FontFamily = Plugin.Iconize.Iconize.FindModuleOf(icon).ToFontFamily().Source })
        using (var textLayout = new CanvasTextLayout(device, $"{icon.Character}", format, Convert.ToSingle(Element.HeightRequest), Convert.ToSingle(Element.HeightRequest)))
            session.DrawTextLayout(textLayout, 0, 0, iconImage.IconColor.ToWindowsColor());
        using (var stream = new InMemoryRandomAccessStream())
        {
            await target.SaveAsync(stream, CanvasBitmapFileFormat.Png);
            stream.Seek(0);
            BitmapImage result = new BitmapImage();
            await result.SetSourceAsync(stream);
            Control.Source = result;
        }
    }
}

Hopes it can help

from xamarin.plugins.

surgien avatar surgien commented on July 18, 2024

My _commandBar.PrimaryCommands are always empty. How do you fill the ContentPage.ToolbarItems? With the ContentPage you do not come on the commandBar.

from xamarin.plugins.

Tlaster avatar Tlaster commented on July 18, 2024

Ok I notice that you still need a IconNavigationPage outside the ContentPage, just like
MainPage = new ExIconNavigationPage(new YourCustomContentPage());
if you just set the MainPage to YourCustomContentPage, it's not gonna work

from xamarin.plugins.

surgien avatar surgien commented on July 18, 2024

No change, PrimaryCommands are still empty:

var page = pages[viewModelType];
            var detailPage = new >**IconNavigationPage**<(page);
            masterPage.ListView.SelectedItem = null;
            masterPage.SettingsListView.SelectedItem = null;

            foreach (var item in page.ToolbarItems)
            {
                detailPage.ToolbarItems.Add(item);
            }
detailPage.ToolbarItems.Add(new FormsPlugin.Iconize.IconToolbarItem() { Priority = 10, Name = "Search", Command = new Command(() => IsPresented = true) });
[assembly: ExportRenderer(typeof(IconNavigationPage), typeof(AppNavigationPageRenderer))]
[assembly: ExportRenderer(typeof(IconImage), typeof(IconImageRenderer))]
namespace ...{
    public class AppNavigationPageRenderer : NavigationPageRenderer
    {
    ...
    }
}

from xamarin.plugins.

pcdus avatar pcdus commented on July 18, 2024

@surgien Did you found a solution?

from xamarin.plugins.

surgien avatar surgien commented on July 18, 2024

puhh it was long ago...

iirc you have two different command collections.

Look here:
https://github.com/surgien/GamesLibrary/blob/master/src/GamesLibrary.UWP/Renderer/IconNavigationPageRenderer.cs

from xamarin.plugins.

pcdus avatar pcdus commented on July 18, 2024

@surgien
Thank you for your feedback.
But you have finally removed Iconize, isn't it?
Which font are using as glyph for the ToolbarIcon?

from xamarin.plugins.

surgien avatar surgien commented on July 18, 2024

native platform fonts: var icon = new FontIcon() { FontFamily = new FontFamily("Segoe MDL2 Assets"), Glyph = toolBarItem.IconGlyph };

*Line 44

from xamarin.plugins.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.