I have two ListBoxs in my pivot and each has an image.
<DataTemplate x:Key="PostsFieldItemTemplate" >
...
<Image Grid.Row="0" Margin="5" Width="100" Height="100" HorizontalAlignment="Left" Source="{Binding WImage}" Stretch="UniformToFill"/>
...
</DataTemplate>
<DataTemplate x:Key="ItemTemplateListBoxAnimation">
...
<Image Width="235" Height="210" Grid.Row="0" Source="{Binding tImage}" Stretch="UniformToFill"/>
...
</DataTemplate>
And i add url string to image in my code
PostsField.Items.Add(new ListPost(post.id, api.improveText(post.title), api.improveText(post.excerpt), post.attachments[0].url, api.improveDate(post.date)));
GridImages.Items.Add(new TempGrid(post.id, post.attachments[0].url, api.improveText(post.title), api.improveDate(post.date)));
Then i press on my button "LOAD MORE" and at some point I recieve exception (Out Of Memory). I commented out <Image Source="{Binding MyImage}"... /> in my ItemTemplates and all is ok..
Can you tell me please, what should i do to improve my Images ?
there is a limit on memory usage for app here is the details. you can find detail here
as you mentioned that you are loading images form API(web API I think). and showing them in list box on some button click and at some point out of memory exception is thrown. now on low memory phone, an app can use upto 150MB of phone memory. when your app exceeds that limit it throws this exception is thrown. what you can do is to remove/dispose previously added images from listbox to release the memory and than add new Images.
You can check the memory limit available to your app by checking the ApplicationWorkingSetLimit value using the DeviceExtendedProperties.GetValue(String) method. For an example of how to do this see How to disable features in apps for lower-memory phones for Windows Phone 8
Hope this helps
Related
I am building a UWP app which gets content from the internet, as I am pulling images it often takes some time to load. I would like to have a loading screen when a user navigates to one of these pages that has an image.
I have attempted to use a progress ring which is visible while the content is being loaded and collapses when content has loaded, however this has been unsuccessful.
What would be the best way to do this.
Thanks in advance.
You can create a placeholder (image with text "image is loading").
If you have a ListView or some other data control you can use attribute Phase for this purpose:
<ListView ItemsSource="{x:Bind myimages}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:ImageInfo">
<StackPanel Orientation="Vertical">
<Grid>
<Image Source="Assets/placeHolderImage.jpg" x:Phase="0" />
<Image Source="{x:Bind Url}" x:Phase="3" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
As you can seein this template one image is placed over another. First is loading image with Phase="0" and when another one with Phase="3" is loaded it's placed over
Hi i am Developing a app on universal windows 10 app platform, and when i put some Objects on the XAML window and when change the screen size it's stay how it was before so it's fit the new screen size and if i fix it it's fit the old screen size and i need the app to be universal.
my xaml code:
<Page
x:Class="App17.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App17"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Loaded="Grid_Loaded">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/backPHONE.jpg"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="55*"/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<RelativePanel>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="41,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="128" Width="360" Text="test 123" FontFamily="Century Gothic" FontStretch="UltraExpanded" FontStyle="Italic" FontSize="26" Tapped="textBlock_Tapped" TextAlignment="Center"/>
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="84,700,0,-666.8" VerticalAlignment="Top" Width="264" SelectionChanged="comboBox_SelectionChanged" Height="32" Grid.Row="1">
<ComboBoxItem Content="test" IsSelected="True"/>
</ComboBox>
<TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="164,675,-2.8,-665" TextWrapping="Wrap" Text="test" VerticalAlignment="Top" Height="20" Width="120" Grid.Row="1" SelectionHighlightColor="#FFF10000" FontFamily="Century Gothic" FontSize="12" FontStretch="UltraExpanded" FontStyle="Italic" Foreground="White"/>
</RelativePanel>
</Grid>
thanks
Let me introduce two possible ways to handle various screen sizes related with Universal Windows 10 Apps.
1. Adaptive Triggers - you can use them to adjut your layout to different device families - for instance you can define how your Page will look on the smartphone and while app is launched on the PC. Below I tried to add some short instructions how you can start using them.
a) When you have Visual Studio opened, please right click on the MainPage.xaml and select "Design in Blend...":
b) Go to "States" tab and select icon (marked red rectangle below) called "Add state group":
c) Now you have to add state, so click the icon next to "Visual State Group" as show below:
d) Now add two state: "Mobile" and "Desktop" as shown below:
e) Last step is to set minimum window width to detect when screen size is changed:
f) Now you are able to set minimum window width for the "Mobile" state:
Please type 320 as below (remember that these are effective pixels not physical)
Once you click "OK" Visual State for "Mobile" will be configured.
Do the same above steps but for "Desktop" state and type 1024 for minimum window width:
Now I can switch between two states and adjust the design for each of them:
(Note that currently selected state is marked with red rectange):
1. Device-Family Folders - you can specify two separate views for Pages but with one code behind. This can help if you have to craft your design specially for mobile devices and for instance fot the PCs.
a) Right click on the project and add new falder called "DeviveFamily-Mobile":
b) Add new Xaml View called the same like your previous page - in my case this is "MainPage":
c) Now you have one code behind class but two separate views that will be applied accordingly to device family:
I hope that it will help you to start.
You can also watch very good Channel9 video or visit my blog where I am trying to present a lot of helpful samples related with UWP.
you must use AdaptiveTriggers
http://www.wintellect.com/devcenter/jprosise/using-adaptivetrigger-to-build-adaptive-uis-in-windows-10
I can't seem to solve issue with horrible UI freeze when assigning DataContext to Listbox control in WPF.
I have DataTemplate defined in Window.Resources.
When app starts I load and sort images in List, where ImageInfo holds various information about image that is loaded, including URI path or BitmapImage.
Problem does not lie here however, when I assign this List as DataContext of ListBox control, I get really huge freeze that I can't seem to be able to solve.
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="260" Height="360">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<Image Source="{Binding image}" Stretch="Fill" HorizontalAlignment="Center"/>
</Border>
<Border Background="Black" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Opacity="0.70" Height="50" Margin="0,10,10,0"></Border>
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" HorizontalAlignment="Center">
<!-- 3 buttons -->
</StackPanel>
</Grid>
</DataTemplate>
<ItemsPanelTemplate>
<UniformGrid Columns="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
I assign DataContext like so :
lbGallery.DataContext = lst169;
Lists contain more than 10 items.
So far I tried to solve issue by :
Trying some virtualization options on grid
Skipping loading image as BitmapImage, and instead using just URI from path
Using fixed size for grid
I'm sure that problem is not related to code regarding loading files in lst169, because it loads data only once on startup. Using URI instead of BitmapImage assured me that my method for getting image is not problem as well.
It all leads back to setting that DataContext to listbox control.
What is the proper way to do this ?
Thanks!
EDIT :
To clarify since my post is confusing many users :
Application starts
Resource data is loaded into List (3 lists with different images)
Once data is fully loaded, I set one fully loaded list as DataContext of ListBox
That is when freeze happens.
Later on user can switch between images by click on a button. I switch DataContext during this time as well. Freeze happens.
So - Freeze is not caused by loading resources on startup. It's caused by setting DataContext of Listbox to a List, when image gets binded to Image control. Regardless if I'm binding BitmapImage type, or URI with absolute path.
Have your tried setting the Image-Binding to IsAsync = true
<Image Source="{Binding image, IsAsync=True}" Stretch="Fill" HorizontalAlignment="Center"/>
I am developing a windows 10 Universal Application.I have a requirement like I need to show the details of a Room when I click on an item in the Rooms List.
I am planning to use a Flip-view control to show the details of a single room.
And When I swipe ,it should show the details of the second item and so on.
My question is if the item source is very large,will it make the app slow or will that create any memory usage issue?
Here is my code
<FlipView ItemsSource="{Binding RoomsCollection}" Loaded="FlipView_Loaded" >
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Room.Id"} HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Red"/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
So if the RoomsCollection goes say more that 1000 since i am using a flip view will the entire collection be loaded initially or is there any kind of visualization implemented by the control?
Via an XML file, I have to get a title, the link of a video and a date for display on WindowsPhone 8.
I browse the file with the following code:
foreach (var item in xElement.Elements("channel").Elements("item"))
{
var feed = new Feed
{
Link = item.Element("description").Value,
PubDate = DateTime.Now,
Title = item.Element("title").Value
};
Results.Items.Add(feed);
}
This code retrieves the values correctly. I use the binding to link the two :
<ScrollViewer Grid.Row="1" BorderThickness="0">
<ItemsControl Name="Results" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock TextWrapping="Wrap"
Text="{Binding Path=Title}" />
<MediaElement Name="Media"
Source="{Binding Path=Link}"
Stretch="Fill"
AutoPlay="True" />
<TextBlock Text="{Binding Path=PubDate}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
The problem is that only two videos are displayed (and not always the same). I don't know where the error is it, because all the data is retrieved, including links to my videos.
I would also add controls to the MediaElement such as : Play, Stop,... But I don't know where to place the code.
I'm sorry for my English ! I'm French. Thanks all.
A while ago I remember reading on MSDN that the number of active MediaElement that are fully supported on Windows Phone is one (this was either 7.0 or 7.1 mind you). I can no longer find this reference on MSDN, but if you search the web, you'll find similar assertions (though with no MSDN quotes or whatever).
Try having just the one and see if it works as you expect, and then try to go up to two.