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
Related
I'm trying to figure out how to print a ListView ItemTemplate using the uwp PrintHelper.cs sample. Everything works, except the print preview does not display items added to the ListView at runtime. I can add other controls such as a textbox, and the print preview will show it, so there must be something peculiar with printing databound ListView items at runtime, but I cannot find any information about it.
<ListView x:Name="ClipboardList"
xmlns:m="using:QuickieEdit.Models"
ItemsSource="{x:Bind ViewModel.MemoryItems}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="m:MemoryItem">
<StackPanel Orientation="Horizontal">
<Button x:Name="MemoryCopyBtn"
Content="Copy"
Click="How to Copy currently selected
MemoryListItem.Text?"/>
<TextBox x:Name="MemoryListItem"
Text="{x:Bind Memory, Mode=TwoWay}">
</TextBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
I cannot understand your exact query, but I think you may be facing situation where your ListView does not get updated with the model and hence does not show up while printing. You can use
ObservableCollection<Model> instead of List<Model>
This will solve your problem or if it does not please provide the c# code in detail as well
Cheers
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?
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
I'm having a problem with the listpicker (SelectionMode="Multiple"!!!). When i go to fullmode it doesnt show "done", "cancel" icons like if the images were not in my project.
On full screen mode i only have this xaml code
<DataTemplate x:Key="listPickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="30" Height="40" FontFamily="Segoe WP"/>
</StackPanel>
</DataTemplate>
<toolkit:ListPicker Header="Floral" SelectionMode="Multiple" FullModeHeader="Floral" CacheMode="BitmapCache" x:Name="floralListPicker" Margin="0,0,12,0" ItemTemplate="{StaticResource listPickerItemTemplate}" FullModeItemTemplate="{StaticResource listPickerFullModeItemTemplate}"/>
Code is ok, everything works fine but the icons doesn't show, actually it shows as the default app bar missing icon image. I copied the images from toolkit sample but no go.
anyone know whats wrong?
anyway to force icons on template?
thanks.
Do you need to set the Build Action of the icons to "Content" in their properties window?
I found out the solution by exploring the sample solution of the toolkit.
If you don't use a special page for the fullmode selection, you need to include the following images to your project:
Create one subfolder named Toolkit.Content (not ToolKit/Content).
Then, include the files named as this : ApplicationBar.Cancel.png and ApplicationBar.Check.png.
Mark them to be generated as content.
That's all! Your icons should now been displayed.
Hope this helps you !