In my app, there is an about section with the app icon in it:
<Border Background="Gray" Margin="0,0,12,0" Width="136" Height="136">
<Image Source="ms-appx:///Assets/StoreLogo.scale-400.png" Width="68"/>
</Border>
During debug it behaves as expected:
debug with asset visible
But after uploading it to the store and having it downloaded with another client, it looks like this:
result after store upload - asset not visible, just background
The build settings for that specific files inside Visual Studio should be correct, but you can check:
asset properties: Build Action = Content; Copy to Output Directory = Copy always
How can I manage to display the asset in store release too?
<Image Source="ms-appx:///Assets/StoreLogo.png" Width="68"/>
just use normal StoreLogo name, without the scale extension, the scale extension is for store to figure out best image on store for different screens sizes.
Related
In my UWP application I am binding the images from azure. It is getting cached when it get the response. When I change the image in the azure it's not reflecting in my UI, Instead it display the image from cache.
Is there any way to clear the cache of my UWP application or to restrict the application to cache images?.
Have you tried CreateOptions="IgnoreImageCache"?
<Image>
<Image.Source>
<BitmapImage UriSource="{Binding Url}"
CreateOptions="IgnoreImageCache"
DecodePixelWidth="120"
DecodePixelHeight="120" />
</Image.Source>
</Image>
But make sure you set the proper decode pixel width/height to avoid using unnecessary memory.
According to the documentation -
You should only use BitmapCreateOptions.IgnoreImageCache in cases
where you know that the source image file as retrieved by Uniform
Resource Identifier (URI) has the potential to change over time.
Otherwise, setting CreateOptions to use
BitmapCreateOptions.IgnoreImageCache causes all newly retrieved image
sources to be decoded again, which can negatively impact performance.
So maybe try setting None as the default value for CreateOptions, and only update it to IgnoreImageCache once you are absolutely sure that the image has been updated by the cloud. Note CreateOptions is also a dependency property, so you should be able to use data binding too.
So, i've saved my image in
StorageFile picture = await KnownFolders.PicturesLibrary.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
and i want to display it in XAML :
<Image Grid.Row="1"
Grid.Column="0"
x:Name="Photo"
Source="ms-appx:///Pictures/test.png"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Stretch="Fill"
Width="1024"
Height="768">
</Image>
and it's not working :(
Thank you very much for you help :)
There aren't any uri schemes that work with a pictures library.
You wouldn't typically hard-code a URI to a pictures library file in your XAML anyway since you can't rely on that file being there.
If you store a list of files by paths somewhere you'd still have to load them using some code - perhaps using future access list, opening streams to the files etc.
You could probably create an IValueConverter or an attached behavior/DependencyProperty to convert a string to an ImageSource, but you could just as well do that in your view model.
i tried to load a downloaded font in windows phone app.
i installed the font in pc.
i tried following
<TextBlock Width="237" Text="About" FontSize="36" Height="46" LineHeight="8"
FontFamily="{StaticResource nokia}"/>
<TextBlock Width="237" Text="About"
FontFamily="/font/nokia.ttf#Nokia Cellphone" FontSize="36" Height="46" LineHeight="8"/>
why external font is not loading
It doesn't matter if the font is installed on the PC or not.
For a font to work inside your app you'll need a few things.
You'll have to set the build action to 'Content' and output to directory set to: 'Copy if newer'.
And then the hardest part - Getting the preferred family right. I usually advocate using a tool for it, because the Windows Font viewer does not always show the right one.
'dp font viewer' is the one I usually use.
For a complete guide on implementing custom fonts, you could have a look here: http://www.blendrocks.com/code-blend/2015/01/04/a-complete-guide-to-working-with-custom-fonts-in-your-windows-and-windows-phone-app
I am referencing external image urls for the source property of an image element in my app.
I have 3 versions of the image at 100, 140 and 180 scales e.g.
myimage.scale-100.jpg
myimage.scale-140.jpg
myimage.scale-180.jpg
If the images lived in the app you would normally put the source like the following and Windows works out which image to load based on the resolution scale of the device:
ms-appx:///Assets/Images/myimage.jpg
However as my 3 images live externally I am having to work out the resolution scale and then build up the correct source string so that the correct image is loaded e.g:
http://www.mywebsite.com/myimage.scale-180.jpg
This works, however, windows is taking my image e.g. the 180 scale one myimage.scale-180.jpg, and then scaling it up by a further 180%, it doesn't know that I have loaded an image at the correct 180% scale already and that it doesn't need to scale it up!
Is there a way of telling it not to scale up specific image elements?
Update (added code):
The xaml image element:
<Image Source="{Binding Image, Converter={StaticResource ImageToExternalImagePathConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" />
The converter used on the image element to determine the external image path (it works out the scale and uses the binding to build up the correct string).
public object Convert(object value, Type targetType, object parameter, string language)
{
ResolutionScale resolutionScale = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ResolutionScale;
string ImageScale = ".scale-100";
switch (resolutionScale)
{
case ResolutionScale.Scale140Percent:
ImageScale = ".scale-140";
break;
case ResolutionScale.Scale180Percent:
ImageScale = ".scale-180";
break;
}
//builds up the correct string e.g. http://www.mywebsite.com/myimage.scale-180.jpg
string externalPath = "http://www.mywebsite.com/" + (string)value + ImageScale + ".jpg";
return externalPath;
}
Update(added reference):
To further explain what I am currently doing see this link:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx
Manually load images based upon scale percentage at runtime If your
app is loading images at runtime using code, for example if you use
DirectX directly, not XAML or HTML to create your UI, use the
DisplayProperties.ResolutionScale property to determine the scale and
manually load images based upon scale percentage.
So that's what I am doing, but the problem is that Windows is scaling up the UI as it should to 140% or 180%, and that includes my manually loaded image. So if I manually load in an image that is already sized at 140%, it gets scaled up by Windows anyway and it DOES get physically bigger. If the images lived in the app package this problem wouldnt exist because Windows recognises the filename identifiers and doesnt scale them up (see below)
Use resource loading for bitmap images in the app package For bitmap
images stored in the app package, provide a separate image for each
scaling factor(100%, 140%, and 180%), and name your image files using
the "scale" naming convention described below. Windows loads the right
image for the current scale automatically.
How can I replicate the same behavior from Windows for images that live in the app package but for images that are external to the app and are loaded manually? Logically at the point at which I load the image in (code), I want to say to Windows, this image is already scaled correctly, don't upscale it by the resolution factor.
Try sizing grip property to false
I'm making a Windows Phone 7 application and I'm a bit confused with dark/light themes.
With a panorama, you very often set a background image. The issue is it's very hard to make a picture which is right for both dark and light themes. How are we supposed to proceed?
Is there a way to force a dark/light theme for a panorama? This will avoid making theme-specific panorama background pictures. Then how do I do? I found xaml files in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design. If this is a right way to proceed, how can I import them for my panorama?
Or if there's no way (or if it's wrong) to force a dark/light theme: how to write conditional XAML to set correct resources? Now I have the following XAML (default.xaml) which is fine with the dark theme:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackground.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackground.png" Stretch="None" />
But when I use a light theme, black controls and black texts are hard to read with my dark background pictures. So I made different pictures that I can use this way:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackgroundLight.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackgroundLight.png" Stretch="None" />
Now my issue is to make XAML conditional to declare the right thing depending on the current theme.
I found no relevant way on the Internet. I would prefer not to use code or code-behind for that because I believe XAML is able to do this (I just don't know how).
EDIT: Code snippet to load a xaml file as ResourceDictionary
string xaml = null;
StreamResourceInfo xamlInfo = Application.GetResourceStream(new Uri("light.xaml", UriKind.Relative));
using (StreamReader sr = new StreamReader(xamlInfo.Stream))
xaml = sr.ReadToEnd();
dic = (ResourceDictionary)XamlReader.Load(xaml);
this.Resources.MergedDictionaries.Add(dic);
To force a dark or white theme you can indeed use the styles defined in the folder you pointed out. Copy and Paste the rules you need to your App.xaml (just PhoneForegroundColor, PhoneBackgroundColor and the related Brushes would be a good start).
It's probably better though to stay "theme-aware" and load a different image for light and dark themes. Here is an article explaining how to do this: http://blog.jayway.com/2010/12/16/theme-aware-panorama-background-in-windows-phone-7/
There is another possibility I've found: You can use the Coding4Fun Toolkit Converter according to these instructions. However, I'm unable to use correctly use them.
Another possibiliy is to use an OpacityMask. But this only works for black/white images :/
Yousef's solution looks interesting. but it takes too much time to load. The image will be changed round about 1s after the app started. I've tested this on a Nokia 820. I've moved the call for setting the DataContext in a Loaded Event, which was called much later. Now the call takes place in the constructor, so the image will be already set when the application displays it. However, it still adds more loading time :( Any suggestions on how to improve this?