As PhoneGap build says to upload only www.zip folder, then I am not able to understand where I have to put the icons and splash screen folder for each platform. Should I put that inside www?
The reason to ask this question is that if we are supposed to keep the icons and splashes inside www only, then my app will become very heavy and unnecessary icons and splash screen files will be added into my app as my app is cross platform, and I have include icons and splashes for all the platforms.
If we work offline (PhoneGap CLI), then we used to keep the files inside res outside the www folder, and Cordova build process automatically copies only platform specific icons and splash screen files, but here it will add all the files even that is required for selected platform.
As you have already figured out, PhoneGap Build has slightly different project structure. Yes, you only zip and upload the www folder and nothing else. By the way, the name of the zip file does not have to be www.zip, it can be anything else, but it must only contain the www folder, or better only the contents of the www folder without the folder itself.
You need to have icon.png and splash.png in the www root folder which serve as the default icon and splash screen. Then you add a subfolder for the additional images. You can name it res or any name you want with any number of folders inside, but add an empty file with the name ".pgbomit" in its root, which will tell PhoneGap Build to only include the required files from this folder like you mentioned. Then you reference each file with the full path in the config.xml which must be in the www root folder too.
So the structure should be something like:
www
res
icon
android
ios
splash
android
ios
config.xml
icon.png
splash.png
index.html
And your config.xml section related to the icons and splash screens should be like this (in version 5 and above):
<icon src="icon.png" />
<splash src="splash.png" />
<platform name="ios">
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/icon#2x.png" width="114" height="114" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-72#2x.png" width="144" height="144" />
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-60#2x.png" width="120" height="120" />
<icon src="res/icon/ios/icon-60#3x.png" width="180" height="180" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-76#2x.png" width="152" height="152" />
<splash src="res/splash/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/splash/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/splash/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/splash/ios/Default-Portrait#2x~ipad.png" width="1536" height="2048"/>
<splash src="res/splash/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/splash/ios/Default-Landscape#2x~ipad.png" width="2048" height="1536"/>
<splash src="res/splash/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/splash/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/splash/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/splash/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>
The above config is for iOS, so add similar sections for other platforms you wish to support, but like iOS section above, make sure you follow the correct image sizes and names from the other platforms.
Related
For the Uno platform, I would like to load an image (PNG) from Assets, using XAML. Further, I'd like to use a single image for all target platforms and have it scale to the size of its container.
Is this possible ?
I have succeeded to do this for UWP and Wasm with the following syntax:
<Image Source="Assets/icons/arrow_back_white.png" />
However, for Android, no image is displayed, I just see my background color.
I realize that the proper approach is to provide separate images for each target platform and, optionally, separate images for each resolution in each platform. That is a nice ideal but I am trying to avoid that enormous development overhead, at least for now.
Thanks.
EDIT:
First, to be extra clear, I do have Content selected for my images.
I'm getting a worse failure when using AppBarButton, e.g.:
<CommandBar>
<AppBarButton Icon="arrow_back_white.png" Label="Back" Click="OnBackClicked" />
<AppBarButton Icon="arrow_back_white.png" Label="Page" Click="OnPageClicked" />
<AppBarButton Icon="more_menu_white.png" Label="More" Click="OnMoreMenuClicked"/>
</CommandBar>
This fails for UWP during app initialization with an error:
Failed to create a 'Windows.UI.Xaml.Controls.IconElement' from the text 'arrow_back_white.png'.
It also fails with a build error for Wasm and Android.
It doesn't matter if I put the icon files directly in the Assets directory or a nested directory.
What is the correct syntax and configuration to reference icons and images ?
EDIT 2:
Still doesn't work for Android, but does work for UWP and Wasl. I moved my images into the Assets directory and have this XAML:
<Button
Width="25" Height="25"
Padding="5"
Click="OnBackClicked" >
<Image Source="ms-appx:///Assets/arrow_back_white.png" Height="100" Width="100" />
</Button>
<Button
Width="25" Height="25"
Padding="5"
Click="OnPageClicked" >
<Image Source="ms-appx:///Assets/crop_din_white.png" />
</Button>
<Button
Width="25" Height="25"
Padding="5"
Click="OnMoreMenuClicked" >
<Image Source="ms-appx:///Assets/more_menu_white.png" />
</Button>
All three buttons show up as blank grey approx 1cm high and wide.
EDIT 3
Tried with a newly created default app, which works. The only change I made to the code is to MainPage.xaml by removing the grid and adding:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button
Width="25" Height="25"
Padding="5" >
<Image Source="ms-appx:///Assets/arrow_back_white.png" Height="100" Width="100" />
</Button>
<Button
Width="25" Height="25"
Padding="5" >
<Image Source="ms-appx:///Assets/crop_din_white.png" />
</Button>
<Button
Width="25" Height="25"
Padding="5" >
<Image Source="ms-appx:///Assets/more_menu_white.png" />
</Button>
</StackPanel>
So, now, the arduous task of finding the significant difference(s).
I had a similar issue and here is how I resolved it. I used the following:
<Image Source="ms-appx:////Assests/yourimage.png">
The other thing I did- you probably have done this already- but I had to put a transparent border around it. Hopefully this is helpful!
Let's say you have a Directory under the Shared Project called Assets and inside you have an image called wasm_logo.png.
As Jt6 indicated you should be able to use that image for all the different platforms Uno supports, including Android by using this:
<Image Source="ms-appx:///Assets/wasm_logo.png" Height="300" Width="300"/>
Note: If you have a nested Directory, another directory inside Assets, you just need to add it as part of the path.
<Image Source="ms-appx:///Assets/Icons/wasm_logo.png" Height="300" Width="300"/>
The code above will work if your wasm_logo.png image is inside an Icons Directory which is inside the Assets directory.
Considerations:
Images should be marked as Content (you already validated this)
To Scale for different sizes Uno Supports (as UWP) different Assets qualifiers. Let's say that the same image you want to support 3 different sizes, then you would these 3 files inside the Assets Directory:
wasm_logo.scale-100.png
wasm_logo.scale-300.png
wasm_logo.scale-500.png
For Android these are translated into mdpi, xhdpi and xxhdpi. But the best part is that to use it you do not need to specify the size and with the same code as above you will get the same result.
<Image Source="ms-appx:///Assets/wasm_logo.png" Height="300" Width="300"/>
Note: For Android when you do not specify any qualifier the Images is treated as nodpi
More about Assets and qualifiers can be read here.
If the above is still not working try updating your Uno.Platform to the latest version.
You could also validate that no errors are being reported on the Visual Studio Output Window when running the app.
As a final thing, you could try checking if the images are being moved correctly at compile time. You can do this by building your Android project and then opening the File Explorer at this route:
ProjectName\ProjectName.Droid\obj\Debug\100\res
Inside there you should find the Drawable Directories for Android.
Following the first example, your image should be in the Drawable-nodpi folder
Hope this is useful.
Andres
App Runining
I am sorry that did not help. Just checking something obvious- did you add the picture to the Shared Project Assets folder?
I am building my first VS extension, so my current skills in this area amount to following tutorials and asking questions. The extension is for encrypting/decryption a section of the web.config file of a web app project. I have 2 commands, and currently the buttons are set up in the .vsct file as follows:
<Buttons>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="EncryptConfigCommandId" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="MyMenuGroup" />
<Strings>
<ButtonText>Encrypt Mail Settings</ButtonText>
</Strings>
</Button>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="cmdidDecryptConfigCommand" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="MyMenuGroup" />
<Strings>
<ButtonText>Decrypt Mail Settings</ButtonText>
</Strings>
</Button>
</Buttons>
This gives me 2 buttons in the Tools menu, as follows:
Encrypt Mail Settings
Decrypt Mail Settings
I would like to have just one top level button in the Tools menu, with 2 nested buttons, one for each operation, e.g:
Config Encryptor
...Encrypt Mail Settings
...Decrypt Mail Settings
How do I achieve the outcome I am looking for?
Related documents about this issue:
Add submenu to menu, Add menu to menu bar, GUIDs and IDs for the VS Menus.
What we want:
Click the Tools menu in VS=>display Config Encryptor submenu, Click the Config Encryptor menu will display Encrypt Mail Settings and Decrypt Mail Settings commands.
The structure in my xx.vsct:
Tools menu in IDE
--SubMenuGroup
--SubMenu1
--ButtonsGroup
--EncryptConfigCommandId(Encrypt Mail Settings)
--DecryptConfigCommandId(Decrypt Mail Settings)
The real content in Commands section:
<Commands package="guidEncryptConfigCommandPackage">
<Menus>
<Menu guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenu1" priority="0x0100" type="Menu">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenuGroup"/>
<Strings>
<ButtonText>Config Encryptor</ButtonText>
<CommandName>Config Encryptor</CommandName>
</Strings>
</Menu>
</Menus>
<Groups>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" priority="0x0600">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenu1"/>
</Group>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenuGroup" priority="0x0600">
<Parent guid="guidSHLMainMenu" id="IDM_VS_MENU_TOOLS"/>
</Group>
</Groups>
<Buttons>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="EncryptConfigCommandId" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" />
<Icon guid="guidImages" id="bmpPic1" />
<Strings>
<ButtonText>Encrypt Mail Settings</ButtonText>
</Strings>
</Button>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="DecryptConfigCommandId" priority="0x0110" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" />
<Icon guid="guidImages" id="bmpPic1" />
<Strings>
<ButtonText>Decrypt Mail Settings</ButtonText>
</Strings>
</Button>
</Buttons>
<!--The bitmaps section is used to define the bitmaps that are used for the commands.-->
<Bitmaps>
<Bitmap guid="guidImages" href="Resources\EncryptConfigCommand.png" usedList="bmpPic1, bmpPic2, bmpPicSearch, bmpPicX, bmpPicArrows, bmpPicStrikethrough"/>
</Bitmaps>
</Commands>
And don't forget to define the IDSymbol in GuidSymbol:
<!-- This is the guid used to group the menu commands together -->
<GuidSymbol name="guidEncryptConfigCommandPackageCmdSet" value="{70c1a496-88b4-4c83-8539-39decdbdb8fb}">
<IDSymbol name="ButtonsGroup" value="0x1020" />
<IDSymbol name="EncryptConfigCommandId" value="0x0100" />
<IDSymbol name="DecryptConfigCommandId" value="0x0110" />
<IDSymbol name="SubMenu1" value="0x1100"/>
<IDSymbol name="SubMenuGroup" value="0x1150"/>
</GuidSymbol>
According to these three document above:
1.We can add submenu to an existing menu or custom menu according to the first document.Not clearly described in documents how to structure the button, menu, group and what's the relationship between them, but check the content in its code we can find 1. To add a submenu to Tools menu, we need to set a group as its parent, then sets the Tools menu as its parent.
2.And to group two buttons to a submenu, we need to set the two buttons's parent as GroupB, then set the SubMenu as GroupB's parent.
3.According to third document, the menus and groups on the Visual Studio menu bar use the GUID guidSHLMainMenu. And the ID of Tools menu is IDM_VS_MENU_TOOLS.
That's why I edit the content in this structure, luckily it works. And since I may misunderstand something in the documents, if there's something wrong or something can be better feel free to correct me:)
The appearance when debugging:
In addition:
1.About managing the handler of the commands see this.
2.See this document which indicates to add submenu to another VS menu, we need a a group in this process.
To add a group to an existing Visual Studio menu, set one of the following menus as its parent.
You need to create Menu for your buttons
<Menus>
<Menu guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu" priority="0x0100" type="Menu">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenuGroup"/>
<Strings>
<MenuText>Config Encryptor</MenuText>
<ButtonText>Config Encryptor</ButtonText>
<CommandName>Config Encryptor</CommandName>
</Strings>
</Menu>
</Menus>
And set parents for Group
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenuGroup" priority="0x0100">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu"/>
</Group>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu" priority="0x0200">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ToolsMenu"/>
</Group>
Also don't forget to add IDSymbol for Group and GroupMenu
and set correct name for Tools id="ToolsMenu"
I have the following situation:
We have / build an Xamarin.Forms library, that also should include our common icons
This icons should be used in XAML ages in this library but also in the final apps
Library structure
Base.Library (.Net Standard 2.0 + Xamarin.Forms)
|- Views (XAML)
Base.Library.Android
|- Resources
|- drawables
|- icon.xml
Base.Library.iOS
|- Assets
|- icon (image asset with 3 resolutions)
Base.Library.Upw
|- Icons
|- icon.scale-100.png
|- ...
|- icon.scale-400.png
The icons work on iOS and Android without problem (in XAML page of the ibrary project and in the final app project, that uses the library).
<Image WidthRequest="24" HeightRequest="24" VerticalOptions="Center"
HorizontalOptions="End">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="Android,iOS" Value="icon" />
<On Platform="UWP" Value="Icons/icon.png" />
</OnPlatform>
</Image.Source>
</Image>
Only UWP doesn't work. Is the a special syntax to load images from libraries?
I already tried the following:
// Prefixed with assembly name of the library
Value="ms-appx:///Base.Library.Uwp/Icons/icon.png"
// Prefixed with namespace of the library
Value="ms-appx:///Base.Library.Uwp.Namespace/Icons/icon.png"
I found a solution.
If I have ms-appx:/// in the value, this is treated as UriImageSource instead of FileImageSource. If I cut this away and use the full path to the icon (incl. assembly name), the icons is also shown for UWP.
<Image WidthRequest="24" HeightRequest="24" VerticalOptions="Center"
HorizontalOptions="End">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="Android,iOS" Value="icon" />
<!-- Icon name prefixed with assembly name -->
<On Platform="UWP" Value="Base.Library.Uwp/Icons/icon.png" />
</OnPlatform>
</Image.Source>
</Image>
How to show the application name in the tiles.
As shown in the figure, i am developing the last application in the screen. For that i need to show the name of the application.
In PackageManifest file i have added all the images to show the images in the home screen.
Any help on this highly appreciated.
Thank you.
<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="MMRevamp_2016.App">
<uap:VisualElements DisplayName="Maalaimalar" Square150x150Logo="Assets\Square150x150Logo.png" Square44x44Logo="Assets\Square44x44Logo.png" Description="MMRevamp_2016" BackgroundColor="transparent">
<uap:LockScreen Notification="badge" BadgeLogo="Images\BadgeLogo.png" />
<uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png" Square71x71Logo="Images\Square142x142Logo.png" Square310x310Logo="Images\Square310x310Logo.png">
<uap:ShowNameOnTiles>
<uap:ShowOn Tile="square310x310Logo" />
</uap:ShowNameOnTiles>
</uap:DefaultTile>
</uap:VisualElements>
</Applications>
If you open your Package.appxmanifest and go to Visual Assets, you will see show name with check boxes. Check off appropriate box next to your asset.
See Screenshot for Example
If you are doing XML you can set the branding attribute to "name" as well. E.g like this:
<tile>
<visual>
<binding template="TileMedium" branding="name">
</binding>
</visual>
</tile>
i'm developing a Visual Studio 2010 extension, i already have a toolbar inside my window. on that toolbar i have a button that i want to give an icon - my own icon!
I've read this article and it is great but... it explains how to replace the icons.
i want to add an additional icon.
how do i achieve that?
First, add the bitmap and set its build action to Resource
Remember, shocking pink = transparent (damn you, old school!)
Then, in your vsct file, add the image to the bitmaps section
<Bitmaps>
<Bitmap guid="AddSampleData.bmpGuid"
href="..\Button Bitmaps\AddSampleData.bmp"
usedList="AddSampleData.bmpId" />
<Bitmap guid="ApplySampleData.bmpGuid"
href="..\Button Bitmaps\ApplySampleData.bmp"
usedList="ApplySampleData.bmpId" />
</Bitmaps>
and assign it a guid in the symbols node
<Symbols>
<!-- snip -->
<GuidSymbol name="AddSampleData.bmpGuid"
value="{dcae7c84-8e91-4f8a-907b-95ccb0f52e6e}">
<IDSymbol name="AddSampleData.bmpId"
value="1" />
</GuidSymbol>
<GuidSymbol name="ApplySampleData.bmpGuid"
value="{9f555245-2430-4e6f-992b-b49ce87a31a2}">
<IDSymbol name="ApplySampleData.bmpId"
value="1" />
</GuidSymbol>
</Symbols>
and apply it to a button
<Buttons>
<!-- snip -->
<Button guid="guidEditorExtensionCommandSet"
id="setDesignTimeDataOnPage"
priority="0x0100">
<Icon guid="ApplySampleData.bmpGuid"
id="ApplySampleData.bmpId" />
<Strings>
<!-- snip -->
</Strings>
</Button>
</Buttons>
Of course, its always easier to use the available tools, including the excellent VSPackage Builder extension.
A workaround for this is to create a PNG and rename the extension as *.bmp. VS will accept it as an icon image and it will also have transparency (from Visual Studio Extensibility > Toolbox Icons -- Is transparency supported?)