How to change a toolbar item (logo) for different theme - xamarin.forms

I have a question. I need to have few toolbar items related to different styles. I have created Theme Resources and with the help of settings plugin I am saving different themes. However I would also like to have different toolbar items dedicated for each theme. I have tried to add my image in Resource dictionary like this
<ResourceDictionary>
<Image x:Key="logo" Source="IconSettings.png"></Image>
</ResourceDictionary>
and then in Xaml use it like this
<ToolbarItem IconImageSource="{DynamicResource logo}"/>
But nothing is displayed. Do you maybe have any suggestions even different approach?
Also have tried to follow this solution https://forums.xamarin.com/discussion/152758/setting-icon-file-names-as-resources

As you can see in the link you provided, why don't you try something like this
<ResourceDictionary>
<x:String x:Key="logo">IconSettings.png</x:String>
</ResourceDictionary>
And use it in your XAML.
You were trying to add image at the place of string input, that's the reason it showed you nothing
Let me know if its working fine or not

Related

How to get an event from the application when the system theme changes?

Because the Theme Qualifier for iOS assets is not yet supported on Uno, I have to resort to a helper service in my project, to provide alternate paths to image which are created for dark mode. This however causes the assets URL to be evaluated once, and not when the system theme is changed while the app is running. Is there a way to get an event or method being called from the application when the system theme changes?
Just for completeness, you can also use the UISettings.ColorValuesChanged event to observe theme changes. Furthermore, Microsoft Community Toolkit provides a very nice wrapper around it - ThemeListener, which can also be used in Uno Platform apps.
Ideally, we would also like to support the theme qualifier for asset disambiguation - similarly to -scale-150, etc. it allows you to use a suffix to let the system choose light or dark assets. You can upvote this GitHub issue to help us prioritize that.
If you want some UI assets to change based on theme, you can use ThemeResource with ThemeDictionaries.
Example in an Uno project
Declaration of the theme resource in the theme dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.Gallery.Views.Styles.Application">
<ResourceDictionary.ThemeDictionaries>
<!-- Light Theme -->
<ResourceDictionary x:Key="Light">
<x:String x:Key="UnoLogoImageSource">ms-appx:///Assets/UnoGalleryLogo_Light.png</x:String>
</ResourceDictionary>
<!-- Dark Theme -->
<ResourceDictionary x:Key="Dark">
<x:String x:Key="UnoLogoImageSource">ms-appx:///Assets/UnoGalleryLogo_Dark.png</x:String>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
Reference code:
https://github.com/unoplatform/Uno.Gallery/blob/master/Uno.Gallery/Uno.Gallery.UWP/Views/Colors.xaml#L11
Usage in a page
<Image Source="{ThemeResource UnoLogoImageSource}" />
Reference code: https://github.com/unoplatform/Uno.Gallery/blob/45e490668890c3a9db1e28a5b3de2a61822b07ca/Uno.Gallery/Uno.Gallery.UWP/Views/Shell.xaml#L45

How to give styles for Angular 2 primeng auto search textbox?

Hi I have implemented auto search option in Angular 2 using primeng. I have found reference in https://www.primefaces.org/primeng/#/autocomplete site. when I implement same code in my project I do not see suggestions filling in drop-down box list. I have added screenshot below.
Below is my code.
<p-autoComplete autofocus name="username" [(ngModel)]="username" [suggestions]="filteredUsernamesSingle"(completeMethod)="filterUsernameSingle($event)" field="userName" [size]="30"
placeholder="Enter UserName" [minLength]="3" required></p-autoComplete>
In reference website when user tries to search some test, everything comes in dro-down list. But when I implement I am not getting any drop-down list as I shown in above image. Can someone help me where can I add styles to make suggestions come in drop-down box list?
I had the same problem. I was passing a string[] array into [suggestions]. After examining their example it started working after I started passing an array of objects instead. Apparently the autocomplete component expects an object with a property specified in the field directive, otherwise it can't reach the value and format it properly. Try passing it an object with a userName property, since in the HTML you specified field="userName".
Check the documentation page primefaces getting started. You'll see instructions to add the primeng css and primeicons and a theme css file that you will use as the theme for your site, to the project's angular.js file. This will work like <link rel="stylesheet" href="styles.css" /> embedding of external css files to a web page.

Xamarin.Forms embedded image not showing

There are several posts here on stackoverflow that cover this, but none are the cause. I've tried several sources including the documentation and I can not get this to work.
I'm following a tutorial by mosh on Udemy and he's showing how to use an embedded resource file.
I am working with Visual Studio 2017.
I've added a folder in the HelloWorld folder called images and placed an image called background.jpg in it.
When you right click the image and set the Build Action to EmbeddedReesource you're supposed to get a Resource Id. None is there, not even the box shows up. I'm thinking that's a new feature that was removed.
I found out the resource path is HelloWorld.images.background.jpg.
My xaml is like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloWorld.ImagePage"
BackgroundColor="Black">
<ContentPage.Content>
<Image x:Name="image" Aspect="AspectFill" />
</ContentPage.Content>
</ContentPage>
Next, my c# code is like this:
public ImagePage ()
{
InitializeComponent ();
image.Source = ImageSource.FromResource("HelloWorld.images.background.jpg");
}
And I've tried placing the image in the android project under Resources/Drawable, but doesn't that defeat the purpose?
Any help would be great. Thanks ahead of time.
Here is my VS Solution Explorer:
This way of embedding images is still supported. Check out this page in the documentation on how to do it. These are the basic steps:
Set Build Action of the file to EmbeddedResource, you can do this in the properties of the file
Refer to the image from your PCL with a dot delimited identifier. The filename is build up like this: AssemblyName.Folder.ImageName.ext
If your image is not in a folder, you can leave is out, if it is in multiple folders, add each one separated with a dot. An example could look like this:
var embeddedImage = new Image { Aspect = Aspect.AspectFit };
embeddedImage.Source = ImageSource.FromResource("WorkingWithImages.beach.jpg");
Here the assembly (probably your project name for your PCL) is named 'WorkingWithImages' and the file is not in a folder, the file is named 'beach.jpg'. In the case of Android I think you should also mind that you do not put in hyphens or any other characters than numeric, alphabetic and underscores.
That being said, you also say:
And I've tried placing the image in the android project under
Resources/Drawable, but doesn't that defeat the purpose?
I'm not entirely sure what you mean here, but I took it that you think it defeats the purpose of a multi-platform app from a single code-base. I must disagree with you there. Although I see how you could think that, working with images is something that is very platform specific. All platforms have a very different way of showing and scaling images and it would be nearly impossible to reconcile all that for Xamarin. Having the images in the PCL like you want to do now, will completely disable the whole scaling mechanism in place and suddenly you are responsible for making it look good on all kinds of devices, resolutions and form factors. That is why I always have the images resources per platform project.

How can a custom Xamarin.Forms theme specify a page's background color?

I am trying to create a custom theme following https://developer.xamarin.com/guides/xamarin-forms/themes/custom/, but it is unclear how a page's background color can be set via the theme.
I've tried creating an implicit style targeting a ContentPage. I've also tried creating a style class for the ContentPage. Neither works. It doesn't work since the actual page being loaded isn't a ContentPage, but rather subclassed page. In https://bugzilla.xamarin.com/show_bug.cgi?id=27659 Jason Smith states "Implicit styles do not apply to subclasses."
I'd love to take a look at the Xamarin.Forms.Themes source to see how the Forms team does it, but it doesn't appear to be available on GitHub.
#JoshuaLatusia said:
Hi, I found this to be working for all my pages.
By using "ApplyToDerivedTypes" you will set a generic style for all your Content pages.
Example:
<Style TargetType="ContentPage" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="#eeecf6" />
</Style>
See https://forums.xamarin.com/discussion/comment/302323/#Comment_302323

How to override Plone's display menu for special case content?

To get a one-off view on a Plone folder I do something like this (not all code shown):
In configure.zcml:
<!-- Marker interface. Set this on the folder through the ZMI
interfaces tab.
-->
<interface interface=".interfaces.IMySpecialFolder" />
In browser/configure.zcml:
<!-- Special case view. Set as the folder's view through the ZMI
properties tab (layout property).
-->
<browser:page
for="..interfaces.IMySpecialFolder"
name="special"
template="special.pt"
permission="zope2.View"
/>
This works great, but I would like to control the folder's display menu to list only my special case view. I can add it, and it shows up only on my marked folder, but I have to change the site-wide ATFolder FTI.
In browser/configure.zcml:
<include package="plone.app.contentmenu" />
<browser:menuItem
for="..interfaces.IMySpecialFolder"
menu="plone_displayviews"
title="Special view"
action="##special"
description="Special case folder view"
/>
In profiles/default/types/Folder.xml:
<?xml version="1.0"?>
<object name="Folder">
<property name="view_methods" purge="False">
<element value="special"/>
</property>
</object>
Of course I cannot remove the existing available view methods without affecting every folder on the site.
Is there a way to do this one-off display menu tweaking without changing a content type's FTI?
Actually, it seems like this problem has been tackled before. p4a.z2utils patches CMFDynamicViewFTI to get the list of available views from an IDynamicallyViewable adapter lookup. (dateable.chronos uses this mechanism for its folder calendar views). So my question becomes:
Is there a way to do this one-off display menu tweaking without changing a content type's FTI and without patching Plone?
The plone display menu builder uses ISelectableBrowserDefault to get available options in the Display menu (see
http://dev.plone.org/plone/browser/plone.app.contentmenu/trunk/plone/app/contentmenu/menu.py#L220)
So I think (but I haven't tried this) that if you define an adapter for a more specific interface (in your case IMySpecialFolder) that provides the Products.CMFDynamicViewFTI.interface.ISelectableBrowserDefault it should work.
The adapter should have the methods required by plone.app.contentmenu.menu.DisplayMenu above.
Answering my own question, I've realised that the most straightforward way to achieve one-off folder views is to follow the pattern Plone itself applies in the Members folder: a PythonScript index_html that calls the custom view, e.g.
member_search=context.restrictedTraverse('member_search_form')
return member_search()
Products.CMFPlone illustrates how to setup such a PythonScript with a GenericSetup import handler.
In retrospect I realise I didn't need the marker interface in my question scenario. It's not necessary here in the answer either.
Note that this solution doesn't result in "the folder's display menu listing only my special case view" as I asked, but does away with the display menu altogether. I'm fine with that.
One way you could have solved it is using traversalhook to register menu items, or in this case, unregister menu items, or register menu items with conditions that make them not appear. With the traversal hook you can use a marker interface to make it just happen in a certain folder, subsection or page.
You can see where we implemented similar code here
https://github.com/collective/collective.listingviews/blob/master/src/collective/listingviews/browser/views/controlpanel.py#L105
In this case we just wanted to register new display menu items dynamically based on control panel configuration.

Resources