I'm trying to bind some data to a wp7 listbox (with custom item template) which includes a thumbnail image for each entry. The thing is - I'm running into one problem - when the linked image redirects to a 404 page - I get an empty image as a result and frankly - I have no idea how to check if the loaded data is a proper image or not ... here's the code I'm using right now:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Height="62"
Width="62">
<Image Stretch="UniformToFill"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image.Source>
<BitmapImage UriSource="{Binding MiniImage}"
CreateOptions="DelayCreation, BackgroundCreation" />
</Image.Source>
</Image>
</Grid>
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="{Binding Title}"
Margin="12,4,0,0"
FontSize="26"
FontFamily="Segoe WP Bold" />
<TextBlock Text="{Binding PubDate}"
Margin="12,0,0,9"
FontSize="16"
FontStyle="Italic"
Padding="5,0,0,0"
FontFamily="Segoe WP"
Opacity="0.5" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
and here's the code behind:
foreach (var item in RssFeedItems)
{
var inputString = item.Description;
var tempImageList = new List<string>();
var inputStringBuilt = new StringBuilder(item.Description);
var temp = 1;
while (temp > 0)
{
var img = inputString.IndexOf("<img", StringComparison.Ordinal);
var src = inputString.IndexOf("src", img, StringComparison.Ordinal);
var quot = inputString.IndexOf('"', src + 5);
var len = quot - (src + 5);
var sub = len > 0 ? inputString.Substring(src + 5, len) : null;
tempImageList.Add(sub);
var closingBracket = inputString.IndexOf(">", src, StringComparison.Ordinal);
inputStringBuilt.Clear();
inputStringBuilt.Append(inputString);
inputStringBuilt.Remove(img, closingBracket - img);
inputString = inputStringBuilt.ToString();
temp = inputString.IndexOf("<img", StringComparison.Ordinal);
}
item.MiniImage = tempImageList[0] ?? "ApplicationIcon.png";
var f = tempImageList.IndexOf(null) - 1;
while (f >= 0)
{
PostImages.Add(tempImageList[f]);
f--;
}
tempImageList.Clear();
FirstListBox.Items.Add(item);
}
any ideas?
You might want to issue a web request in your code behind, pass the results into PictureDecoder.DecodeJpeg and bind to the WriteableBitmap returned from that instead of the URL. This way you can detect error conditions in the web request and react accordingly.
The Image element has an event called ImageFailed you will get an exception (contained in the ExceptionRoutedEventArgs)
You could use this to detect error when loading images.
Related
I'm trying to keep five set of image(png format) in continuous animation which should occupy full screen and after clicking on that popup it should disappear.
There is same image with different position its feel like it is moving up and down continously. In the below code I have used only one image "good_job.png" as popup .But how to use five different image to show in motion up and down.Any help would be appreciated.
Xaml
<RelativePanel x:Name="contentPanel" Grid.Row="1">
<Canvas RelativePanel.AlignTopWithPanel="True">
<Popup x:Name ="ppup" IsOpen = "False" IsLightDismissEnabled = "True"
Width="420" VerticalAlignment="Top"
>
<Image Source = "Assets/good_job.png" Canvas.ZIndex="1" Width="420" />
</Popup>
<Popup x:Name ="ppup1" IsOpen = "False" IsLightDismissEnabled = "True"
Width="320" VerticalAlignment="Center">
<Image Source = "Assets/wrong_ans.png" Canvas.ZIndex="1" Width="420" />
</Popup>
</Canvas>
</RelativePanel>
<Image x:Name="image1" Source="Assets/LearnColor/Object/ob_0_0.png" Height="150" Width="160" RelativePanel.AlignLeftWithPanel="True" Margin="30,40,0,0" Tapped="image1Tap" d:LayoutOverrides="Width, LeftMargin, RightMargin" />
C# Code
if ((image1.Source as BitmapImage).UriSource == new Uri("ms-appx:///Assets/LearnColor/Object/ob_0_0.png", UriKind.Absolute) && (objNameWritten1.Text == "Banana"))
{
ppup.Height = Window.Current.Bounds.Height;
ppup.IsOpen = true;
mediaElement1.Source = new Uri("ms-appx:///Audio/wow good job.mp3");
mediaElement1.AutoPlay = true;
}
Note: This answers is untested and quickly thrown together. I submitted it because I was asked in the comments.
First create a way to loop through the images.
private int CurrentImageId = 0;
private List<string> Images = new List<string>() { "image1", "image2", "image3", "image4", "image5" };
private string NextImage() {
CurrentImageId = (CurrentImageId + 1) % 5;
return Images[CurrentImageId];
}
Then use a timer to reasign the ImageSource at an interval.
var timer = new Timer(100);
timer.Elapsed += (sender, args) => Images.ImageSource = NextImage();
timer.Start();
I have a problem with the performance of the wpf gui.
At first I will explain what I have done.
I read from a Database different chat data, mostly text but sometimes there is an icon in the middle of the text, like a smiley or similar. Or, there are no text just a Image.
I have this all done by using a Flowdocument and use a Textblock with inlines. Oh I forgot, I use wpf, sorry.
Thats work great, BUT at the moment the Flowdocument will be painted to the RichTextbox or FlowdocumentReader, its take a long time and the gui freeze. I have think about Virtualizing but a RichTextBox doesn't use this. So my next idea was to use a Listbox and set as item a Richtextbox for every Chatbubble. A Chat can contain round about 20.000 Chatbubbles.
So now I want to use Databinding but I doesn't find a way to bind the inlines of a Textblock.
So now some code.
<DataTemplate x:Key="MessageDataTemplate" DataType="{x:Type classes:Message}">
<Grid>
<RichTextBox x:Name="rtbChat"
SpellCheck.IsEnabled="False"
VerticalScrollBarVisibility="Auto"
VerticalContentAlignment="Stretch">
<FlowDocument
FontFamily="Century Gothic"
FontSize="12"
FontStretch="UltraExpanded">
<Paragraph>
<Figure>
<BlockUIContainer>
<Border>
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="tUser"
Foreground="Gray"
TextAlignment="Right"
FontSize="10"
Grid.Row="0"
Grid.Column="1"
Text="{Binding displayUserName}"/>
<TextBlock x:Name="tTime"
Foreground="Gray"
TextAlignment="Left"
FontSize="10"
Grid.Row="0"
Grid.Column="0"
Text="{Binding sendTime}"/>
<TextBlock x:Name="tMessage"
Foreground="Black"
TextAlignment="Justify"
FontSize="12"
Height="NaN"
TextWrapping="Wrap"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="{Binding contentText}" />
<Image x:Name="tImage"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Height="NaN"
Source="{Binding imageSend}"/>
</Grid>
</Border>
</Border>
</BlockUIContainer>
</Figure>
</Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
</DataTemplate>
So this is not final, I'm porting this from Source-code to xaml and some setters are missing at this moment.
I have benchmark the timings and everything works fine, 10 ms for the sqlite, round about 4 sec for the building of the FlowDocument but up to 5 min to paint the FlowDocument in the RichTextBox. I know that is why the hole box is painted, also the part that is not visible.
I hope that is understandable, if not ask me :)
Here the Source-Code before ported to xaml.
var rtBox = new RichTextBox
{
//IsEnabled = false,
BorderThickness = new Thickness(0, 0, 0, 0)
};
var doc = new FlowDocument();
Contact contact = null;
contact = _mess.remote_resource != "" ? _contacts.Find(x => x._jid == _mess.remote_resource) : _contacts.Find(x => x._jid == _mess.key_remote_jid);
var para = new Paragraph();
//--- Style of the message -----
para.Padding = new Thickness(0);
BlockUIContainer blockUI = new BlockUIContainer();
blockUI.Margin = new Thickness(0, 0, 0, 0);
blockUI.Padding = new Thickness(0);
blockUI.TextAlignment = _mess.key_from_me == 1 ? TextAlignment.Right : TextAlignment.Left;
Border bShadow = new Border();
bShadow.Width = 231;
bShadow.BorderBrush = Brushes.LightGray;
bShadow.BorderThickness = new Thickness(0, 0, 0, 1);
Border b2 = new Border();
b2.Width = 230;
b2.BorderBrush = Brushes.Gray;
b2.Background = Brushes.White;
b2.BorderThickness = new Thickness(0.5);
b2.Padding = new Thickness(2);
Grid g = new Grid();
g.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(150,GridUnitType.Star) });
g.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(80) });
g.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(15) });
g.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(25,GridUnitType.Auto) });
TextBlock tUser = new TextBlock()
{
Foreground = Brushes.Gray,
TextAlignment = TextAlignment.Right,
FontSize = 10,
};
tUser.SetValue(Grid.RowProperty, 0);
tUser.SetValue(Grid.ColumnProperty, 1);
if(contact != null)
tUser.Text = _mess.key_from_me == 1 ? "ich" : (contact._displayName == "" ? Whatsapp.Contacs.convertJidToNumber(_mess.remote_resource) : contact._displayName);
else
{
tUser.Text = Whatsapp.Contacs.convertJidToNumber(_mess.remote_resource);
}
TextBlock tTime = new TextBlock()
{
Foreground = Brushes.Gray,
TextAlignment = TextAlignment.Left,
FontSize = 10,
};
tTime.SetValue(Grid.RowProperty, 0);
tTime.SetValue(Grid.ColumnProperty, 0);
tTime.Text = UnixTime.TimeReturnUnix2DateUtc(_mess.timestamp, timeZone).ToString();
TextBlock tMessage = new TextBlock()
{
Foreground = Brushes.Black,
TextAlignment = TextAlignment.Justify,
FontSize = 12,
Height = Double.NaN,
TextWrapping = TextWrapping.Wrap
};
tMessage.SetValue(Grid.RowProperty, 1);
tMessage.SetValue(Grid.ColumnProperty, 0);
tMessage.SetValue(Grid.ColumnSpanProperty, 2);
for (var i = 0; i < _mess.data.Length; i += Char.IsSurrogatePair(_mess.data, i) ? 2 : 1)
{
var x = Char.ConvertToUtf32(_mess.data, i);
if (EmojiConverter.EmojiDictionary.ContainsKey(x))
{
//Generate new Image from Emoji
var emoticonImage = new Image
{
Width = 20,
Height = 20,
Margin = new Thickness(0, -5, 0, -5),
Source = EmojiConverter.EmojiDictionary[x]
};
//add grafik to FlowDocument
tMessage.Inlines.Add(emoticonImage);
}
else
{
tMessage.Inlines.Add(new Run("" + _mess.data[i]));
}
}
g.Children.Add(tUser);
g.Children.Add(tTime);
g.Children.Add(tMessage);
b2.Child = g;
bShadow.Child = b2;
blockUI.Child = bShadow;
Figure fig = new Figure(blockUI);
fig.Padding = new Thickness(0);
fig.Margin = new Thickness(0);
fig.Height = new FigureLength(0, FigureUnitType.Auto);
para.Inlines.Add(fig);
doc.Blocks.Add(para);
rtBox.Document = doc;
msgList.Add(rtBox);
Greetings and thanks for your help.
One method would be to virtualize using a ListBox, certainly. Arguably better methods would be to dynamically load in the required messages or make your own virtualized control (issues with the default ListBox virtualization include that you have to scroll entire items in a single go to get virtualization working... which can suck a bit from a UX perspective in some cases.)
From the sound of it still taking forever to load, the virtualization you've set up isn't working right...
The main thing that you require to get virtualization working is that you need to have the ScrollViewer inside the ListBox template have CanContentScroll=True. Ie do:
<ListBox ScrollViewer.CanContentScroll="True" .... >
Or give the ListBox a template similar to below:
<ControlTemplate>
<Border BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}">
<ScrollViewer Focusable="False"
Padding="{TemplateBinding Control.Padding}"
MaxHeight="{TemplateBinding Control.MaxHeight}"
CanContentScroll="True">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
Also, unless you want to actually select previous messages, maybe a ListBox isn't what you want, and you actually want an ItemsControl? See Virtualizing an ItemsControl? for more on that.
Addition 1 - Smooth Scrolling + Virtualization:
See below - if you also want smooth scrolling, might be worth looking at a TreeView - see http://classpattern.com/smooth-scrolling-with-virtualization-wpf-list.html#.VBHWtfldXSg - though I can't vouch for if this actually works at the moment, just discovered it myself!
Addition 2 - Clarification RE needed elements
As in my comments below, if you're not editing everything, you can get rid of all the tags:
<Grid><RichTextBox><FlowDocument><Paragraph><Figure>
In the data template. You probably can't bind the Text of the message to the contentText in the DataTemplate, and will have to have a bit of behind-the-scenes code to dynamically generate the inlines for the TextBlock.
Addition 3 - How to bind a TextBlock to contain images etc from XAML
Okay, so overall (neglecting some styling), I suggest the following:
<DataTemplate x:Key="MessageDataTemplate" DataType="{x:Type classes:Message}">
<Border>
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="tUser"
Foreground="Gray"
TextAlignment="Right"
FontSize="10"
Grid.Row="0"
Grid.Column="1"
Text="{Binding displayUserName}" />
<TextBlock x:Name="tTime"
Foreground="Gray"
TextAlignment="Left"
FontSize="10"
Grid.Row="0"
Grid.Column="0"
Text="{Binding sendTime}" />
<TextBlock x:Name="tMessage"
Foreground="Black"
TextAlignment="Justify"
FontSize="12"
Height="NaN"
TextWrapping="Wrap"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
classes:TextBlockInlineBinder.Inlines="{Binding contentInlines}" />
<Image x:Name="tImage"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Height="NaN"
Source="{Binding imageSend}" />
</Grid>
</Border>
</Border>
</DataTemplate>
Note the line classes:TextBlockInlineBinder.Inlines="{Binding contentInlines}" on the message TextBlock. This is in order to be able to bind to Inlines... Basically, this not a dependency property, so cannot be directly bound to!
Instead, we can use the custom static class TextBlockInlineBinder below to create a static dependency property to add to our TextBlock, which when it is updated, it runs the InlinesChanged method to update the Inlines:
public static class TextBlockInlineBinder
{
#region Static DependencyProperty Implementation
public static readonly DependencyProperty InlinesProperty =
DependencyProperty.RegisterAttached("Inlines",
typeof(IEnumerable<Inline>),
typeof(TextBlockInlineBinder),
new UIPropertyMetadata(new Inline[0], InlinesChanged));
public static string GetInlines(DependencyObject obj)
{
return (string)obj.GetValue(InlinesProperty);
}
public static void SetInlines(DependencyObject obj, string value)
{
obj.SetValue(InlinesProperty, value);
}
#endregion
private static void InlinesChanged(DependencyObject sender,
DependencyPropertyChangedEventArgs e)
{
var value = e.NewValue as IEnumerable<Inline>;
var textBlock = sender as TextBlock;
textBlock.Inlines.Clear();
textBlock.Inlines.AddRange(value);
}
}
Finally, the binding (which I've bound to a contentInlines property on your Message class) will need to be of type IEnumerable<Inline>, ie something like:
public IEnumerable<Inline> contentInlines
{
get {
var inlines = new List<Inline>();
for (var i = 0; i < _mess.data.Length; i += Char.IsSurrogatePair(_mess.data, i) ? 2 : 1)
{
var x = Char.ConvertToUtf32(_mess.data, i);
if (EmojiConverter.EmojiDictionary.ContainsKey(x))
{
//Generate new Image from Emoji
var emoticonImage = new Image
{
Width = 20,
Height = 20,
Margin = new Thickness(0, -5, 0, -5),
Source = EmojiConverter.EmojiDictionary[x]
};
inlines.Add(emoticonImage);
}
else
{
inlines.Add(new Run("" + _mess.data[i]));
}
}
return inlines;
}
}
I have a problem where im trying to use a Telerik Jump List with DataVirtualizationMode.Automatic, but i can't get it to work. The reason why i want to use this, is because i want my app to only download the data(games) which is in the current view of the Jump List control and not the whole data everytime. For example if i have searched for "Batman", and its returning 50 games, i don't want it to download and load all the games, only those i can see in the Jump List control.
Here is a sample of using DataVirtualizationMode.Automatic from Telerik, but i couldn't get it to work with my app: http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-datavirtualization-automatic.html
Below is my Jump List control which i want to use with data virtualization.
MainPage.xaml:
<phone:PivotItem Header="Browse">
<Grid>
<telerikPrimitives:RadTextBox Name="txtSearch" HorizontalAlignment="Left" VerticalAlignment="Top" Height="80" Width="390"/>
<telerikPrimitives:RadImageButton Name="imgBtnSeachGame" VerticalAlignment="Top" HorizontalAlignment="Right" ButtonShape="Ellipse" BorderThickness="2" Margin="0,8,0,0" Click="imgBtnSeachGame_Click"></telerikPrimitives:RadImageButton>
<Controls:RadJumpList Name="jlGameList" ItemsSource="{Binding}" Tap="jlGameList_Tap" Margin="0,90,0,0" DataVirtualizationMode="Automatic">
<Controls:RadJumpList.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{StaticResource PhoneAccentBrush}"
Padding="{StaticResource PhoneTouchTargetOverhang}"
Margin="0,0,0,0">
<TextBlock Name="tblGameTitle" Style="{StaticResource PhoneTextGroupHeaderStyle}" ManipulationStarted="tblGameTitle_ManipulationStarted" ManipulationCompleted="tblGameTitle_ManipulationCompleted">
<Run Text="{Binding GameTitle}"></Run>
</TextBlock>
</Border>
<Grid Background="#242424" Grid.Row="1">
<Image Name="imgGameList" Margin="0,0,0,0" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Height="96" Width="96">
<Image.Source>
<BitmapImage UriSource="{Binding BoxArtFrontThumb}"
CreateOptions="BackgroundCreation" DecodePixelHeight="96" DecodePixelWidth="96" />
</Image.Source>
</Image>
<TextBlock Margin="110,0,0,0" Text="Platform" FontWeight="Bold" TextWrapping="Wrap" Foreground="YellowGreen" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<TextBlock Name="txtPlatform" Margin="110,20,0,0" Text="{Binding Platform}"></TextBlock>
<TextBlock Text="Release Date" FontWeight="Bold" Margin="110,46,0,0" Foreground="YellowGreen" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<TextBlock Name="txtReleaseDate" Margin="110,66,0,0" Text="{Binding ReleaseDate}"></TextBlock>
<!--</StackPanel>-->
</Grid>
<Grid Grid.Row="2"></Grid>
</Grid>
</DataTemplate>
</Controls:RadJumpList.ItemTemplate>
</Controls:RadJumpList>
</Grid>
</phone:PivotItem>
Below is where i bind my DataContext to my GetGamesListItems ObservableCollection in my GameData class. The imgBtnSearchGame_Click event method is being called when a user have typed for example "Batman" in my textbox txtSearch and tapped the button, it will then send the text to my GetGamesListData method.
MainPage.cs:
GameData gd = new GameData();
public MainPage()
{
InitializeComponent();
jlGameList.DataContext = gd.GetGamesListItems;
}
private void imgBtnSeachGame_Click(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(txtSearch.Text))
{
gd.GetGamesListData(txtSearch.Text, "", "");
}
}
Below is where i download the data in XML for the game name searched for. For example if it is "Batman" it will find and return all games with "Batman". The "BoxArtFrontThumb" Property is where im storing all the images for each game and is using async, because sometimes there can be quite alot of images it has to download and show.
GameData.cs
public void GetGamesListData(string name, string platform, string genre)
{
var webClient = new WebClient();
webClient.DownloadStringCompleted += GetGamesListRequestCompleted;
webClient.DownloadStringAsync(new Uri("http://thegamesdb.net/api/GetGamesList.php?name=" + name));
}
private async void GetGamesListRequestCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
GetGamesListItems.Clear();
var feedXml = XDocument.Parse(e.Result);
var gameDataTasks = feedXml.Root.Descendants("Game").Select(
async x => new GetGamesList
{
ID = (int)x.Element("id"),
GameTitle = (string)x.Element("GameTitle"),
ReleaseDate = (string)x.Element("ReleaseDate") ?? "N/A",
Platform = (string)x.Element("Platform") ?? "N/A",
BoxArtFrontThumb = new Uri(await GetBoxArtFrontThumbAsync((int)x.Element("id")), UriKind.RelativeOrAbsolute),
}).ToList();
var gameData = await Task.WhenAll(gameDataTasks);
foreach (var item in gameData)
{
GetGamesListItems.Add(item);
}
}
}
Below is where its finding and storing the images for the games.
public async Task<string> GetBoxArtFrontThumbAsync(int id)
{
var client = new HttpClient();
var result = await client.GetStringAsync("http://thegamesdb.net/api/GetArt.php?id=" + id);
var feedXml = XDocument.Parse(result);
var gameData = feedXml.Root.Descendants("Images").Select(x => new GetArt
{
BoxArtFrontThumb = new Uri(GetBoxArtFrontThumb(x), UriKind.RelativeOrAbsolute),
}).ToList();
return gameData.Single().BoxArtFrontThumb.ToString();
}
private static string GetBoxArtFrontThumb(XElement gameNode)
{
string data = "http://thegamesdb.net/banners/" + (string)gameNode.Descendants("boxart")
.FirstOrDefault(b => (string)b.Attribute("side") == "front");
if (data == "http://thegamesdb.net/banners/")
{
data = "/NoImage.jpg";
}
return data;
}
I really hope i explained this well enough and hope that there is someone that can help me solve this problem. Thanks.
Although you are using JumpList, the mechanism for Virtualizing the data is the same as the DataBoundListBox. (You can find more information here in the DataBoundListBox docs. There is a good tutorial using an OData service.)
In order for the Automatic mode to work properly, you need to be using Telerik's VirtualizingDataCollection object and initialize it with the proper arguments (count and page size).
I don't see this in the code you have provided above, can you please open a support ticket so that I can investigate further? See my comment above for the link. Let me know the ticket number and I'll provide further assistance.
i am working on Windows 8 Phone Application.
I have issue where i am loading image with text on top of the images one by one.Its called coverflow feature.
I am getting Out of memory exception
for (int j = 0; j < items.Count; j++)
{
for (int i = 0; i < items.Collection.Count; i++)
{
Myobj obj = items[j].Collection[i];
if (obj.correct == 1)
{
coverflow.Add(new CoverFlow(items[j].Text, answer.TextTwo));
}
}
}
CarouselList.ItemsSource = coverflow;
DataTemplate :
<DataTemplate x:Key="DataTemplate1">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Height="400" Width="400" CornerRadius="30,30,30,30">
<Border.Background>
<ImageBrush ImageSource="Images/sample.png" />
</Border.Background>
</Border>
<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,20,5,5"
Foreground="#000000"
Text="{Binding Title}"/>
</Grid>
<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,5,5,20"
Foreground="#000000"
Text="{Binding SubTitle}"/>
</Grid>
</Grid>
</DataTemplate>
Here the there are around 300+ items that displays one after the other:
Like this :
Its not working at all i tried to reduce the widht and height from 400 to 200 it works but i want the image size to 400 so that it looks good.
how can i avoid this Out Of Memory even if my images are 400*400
This is going to be really from the top of my head. Haven't dealt with this in a while.
1.Write yourself a function which will return you a bunch of items
public List<Item> GetFirstItems()
{
return items.Collection.Take(50);
}
public Item GetOtherItems(int skip)
{
return items.Collection.Skip(skip).Take(25)
}
2.Hook up to the SelectionChangedEvent for your control
//keep this somewhere so you know where you are in the list
var currentBatch = 0;
private void SelectionChanged(sender object, ChangedEventArgs e)
{
var position = e.CurrentItemIndex % 25;
if(position > currentBatch)
{
currentBatch = position;
var newItems = GetOtherItems(currentBatch * 25);
//take the global list of items and modify it;
//because we are moving right we only need the last 25 so we
//can skip the first 25
coverflow= coverflow.Skip(25);
//add your new items
coverflow.AddRange(newItems);
CarouselList.ItemsSource = coverflow; // you will have to clear the source first
}
else if(position < currentBatch)
{
currentBatch = position;
var newItems = GetOtherItems(currentBatch * 25);
//take the global list of items and modify it;
//because we are moving left we only need the first 25 so we
//can take the first 25
coverflow= coverflow.Take(25);
//add your new items
newItems.AddRange(coverflow);
coverflow = newItems;
CarouselList.ItemsSource = coverflow; // you will have to clear the source first
}
}
One more thing you will have to take care of is memorizing which was the current item and setting it again to be the current item.
This is all written from the top of my head and I have no idea if it work with your control but I hope it will at least help you a bit :)
So I created an Windows Store app (aka Windows 8 Application / previously called Metro App) and I import a zip archive that contains image (the import work well).
When the zip is exctracted (in it's own folder), I add the object that represent the folder in an ObservableCollection.
This ObservableCollection is used as DataContext to a GridView, the name of the folder is properly displayed but the first image of the folder isn't... <= so that my problem.
I create my object using an static method after the extract is completed
public class ZipFolder
{
public string Title
{
get { return _title; }
set { _title = value;}
}
public int CurrentPage
{
get { return _currentPage; }
set { _currentPage = value;}
}
public Uri PathCover
{
get { return _pathCover; }
set { _pathCover = value;}
}
private string _title ;
private int _currentPage;
private Uri _pathCover;
}
public static async Task<ZipFolderObject> CreateComic(StorageFolder folder)
{
ZipFolderObject o = new ZipFolderObject();
o.Title = folder.DisplayName;
IReadOnlyList<StorageFile> asyncOperation = await folder.GetFilesAsync();
StorageFile cover = asyncOperation[0];
o.PathCover = new Uri("ms-appdata:///local/" + folder.Name + "/" + cover.Name);
return o;
}
And the binding look like this:
<DataTemplate x:Key="zipFolderItemTemplate">
<StackPanel Width="165" Height="250">
<Grid Height="215">
<Border Background="Bisque" Width="{Binding ActualWidth, ElementName=image}">
<!--<Image x:Name="image" VerticalAlignment="Top" HorizontalAlignment="Center" Source="{Binding Cover}" />-->
<Image Stretch="Uniform" x:Name="image" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image.Source>
<BitmapImage UriSource="{Binding PathCover}" />
</Image.Source>
</Image>
</Border>
<Polygon Points="0,0 0,50, 50,0" Stroke="Red" FillRed" RenderTransformOrigin="0.5,0.5" Visibility="{Binding CurrentPage, Converter={StaticResource BookmarkVisibilityConverter}}" Width="{Binding ActualWidth, ElementName=image}" />
</Grid>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Title}" Margin="0,10,0,0" Foreground="Black" />
</StackPanel>
</DataTemplate>
So if anyone have the a hint to my problem it'll be great!
You can be use only directory/filename.ext on Image Source, if extracted images, sub directory.
Concat two value and set to PathCover Property:
folder.Name + "/" + cover.Name
And edit Data Templete in this section:
<Image Stretch="Uniform" x:Name="image" VerticalAlignment="Top" HorizontalAlignment="Center" Source={Binding PathCover}/>
Regards.
Simply use String instead of Uri.
in mainpage.xaml
<Image Source="{Binding VehicleIcon}" Height="54" Width="54"/>
in viewmodel.cs file
public String VehicleIcon {get;set; }
...
VehicleIcon = "ms-appx:///Assets/logo.png";