Platform specific XAML in Content Page

RandomString123RandomString123 Member ✭✭
edited March 2018 in Xamarin.Forms

I am working on a toolbar for my app and hoping to use it in a cross platform manner. To do this I would like to be able to use a platform specific tag inside of my page content for that platform. To do this I would like to use a nice tag from the UWP, FontIcon, to set the icon for an item when using a uwp platform. I know this XAML doesn't work, but in essence what I want to do is the following "In Concept" to set the icon of a menu item command to be a glyph font icon on UWP and just use a file image source on the other platforms for now. How would I go about doing this in reality? I am not sure what the first step is.

<ContentPage.ToolbarItems>
        <ToolbarItem Name="MenuItem2" Order="Primary" Text="Add" Priority="0" Command="{Binding AddItemCommand}" >
            <ToolbarItem.Icon>
                    <On Platform="UWP">
                <FontIcon Glyph="&#xEB52;" FontFamily="Segoe MDL2 Assets" />
                </On>
                   <OnPlatform x:TypeArguments="FileImageSource" iOS="plus.png">
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Why doesn't it work? <On Platform> is valid XAML. So what's the problem?

  • RandomString123RandomString123 Member ✭✭
    edited March 2018

    The complier doesn't like my use of a Windows.UI component inside of the Xamarin XAML. That is the issue I am not sure how to get around.

    <FontIcon Glyph="&#xEB52;" FontFamily="Segoe MDL2 Assets" />

    error : Position 10:22. Type FontIcon not found in xmlns <edited because I can't post links>

    I used this XAML as the test case for getting this error

        <ContentPage.ToolbarItems>
            <ToolbarItem Name="MenuItem2" Order="Primary" Icon="Microsoft.png" Text="Add" Priority="0" Command="{Binding AddItemCommand}" >
                <ToolbarItem.Icon>
                    <On Platform="UWP">
                        <FontIcon Glyph="&#xEB52;" FontFamily="Segoe MDL2 Assets" />
                    </On>
                </ToolbarItem.Icon>
            </ToolbarItem>
        </ContentPage.ToolbarItems>
    
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Right. You can make choices based on platform. But you can't magically starting using platform-specific elements just because you wrapped them around a <On Platform> tag. If that were the case we'd just wrap the entire app in those tags and use all the native controls we liked.

    <On Platform> is for choices like... if iOS then the font size should be larger... and so on.

    I'm going to guess that FontIcon is a typeface that has icons. So you're showing a W but seeing a lightbulb - or some such. Is that right?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
  • RandomString123RandomString123 Member ✭✭

    Correct. FontIcon is a UWP entity that takes a font character and converts it to an icon image.

    Because iOS and Android just use text labels in the toolbar putting an Icon there is fairly easy with an icon based font. However UWP wants an actual icon image and I was hoping on UWP to just use FontIcon to do it. The native controls might be work I'll have to see if I can get a reference to the AppBar item in there. Do you know if there is a #if for UWP? I don't see an example on that page for the platform.

    I am discovering that working with the built in toolbar is pretty annoying I might just roll my own as it seems easier than jumping through hoops on each platform to get it working for the 1-2 options that might be present there.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @RandomString123 said:
    I am discovering that working with the built in toolbar is pretty annoying I might just roll my own as it seems easier than jumping through hoops on each platform to get it working for the 1-2 options that might be present there.

    That's what I do. Built-in tools get you started. But are quickly outgrown.

Sign In or Register to comment.