I have called json request & it will give me 20 items at one call.I have set this 20 items in my page but actually total item are 1000, now i want to call another 20 data & load it in same page after scrolling so which event of scrollviewer i have to handle so that i will manage all items in one page?
ListBox look Like:
<ListBox Name="lstSubNews" Grid.Row="1" SelectionChanged="lstSubNews_SelectionChanged"
ScrollViewer.VerticalScrollBarVisibility="Visible" Style="{StaticResource ListColor}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="5,0.8,5,0.8">
<StackPanel Orientation="Vertical" Height="90" Width="500" Background="AliceBlue" >
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="420"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding subject}"Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding poster}" Grid.Row="1" Grid.Column="0" ></TextBlock>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ScrollViewer which is within the ListBox template and handle the ValueChanged event of listbox which occurs as soon as scrolling starts.
You could extract the ScrollViewer and then detect when the user scrolls to the bottom.
var border = (VisualTreeHelper.GetChild(lstSubNews, 0) as Border);
ScrollViewer scrollViewer = border.Child as ScrollViewer;
scrollViewer.ViewChanged += async (a, t) =>
{
if (scrollViewer.VerticalOffset > scrollViewer.ScrollableHeight - 5)
{
//code here
}
};
However the right way of doing would be to implement the ISupportIncrementalLoading interface :
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.data.isupportincrementalloading
Related
How i can bind two list box item source in single page Windows Phone? I mean:
Case 1: I have a json url and I get a response and so in listbox is ok
Case 2: When a user will tap the selected item and I have one more json url, the response will show on same page inside of selected item.
<ListBox Name="list_contact" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock x:Name="ContactResults" Foreground="Red" Text="{Binding service_name, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="10, 0, 0, 0" />
</StackPanel>
<StackPanel>
<TextBlock x:Name="ContactResult" Foreground="Red" Text="{Binding fname , Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="10, 20, 0, 0" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am facing issues getting the string values using e.ClickedItem.
Here's how my ListView looks like:
<ListView
x:Name="PoemListView"
AutomationProperties.AutomationId="PoemListView"
AutomationProperties.Name="Poems In Item"
TabIndex="1"
ItemsSource="{Binding Item.Poems}"
IsItemClickEnabled="True"
ItemClick="PoemView_PoemClick"
SelectionMode="None"
SelectionChanged="PoemSelectionChanged"
IsSwipeEnabled="False" Padding="0,0,0,0" Margin="0,0,0,0"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="0,0,0,27.5" HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<!--<CheckBox x:Name="PoemCheckbox" Checked="ContentChecked" Unchecked="ContentUnchecked"/>-->
<TextBlock x:Uid="PoemId" Name="PoemId" Text="{Binding PoemId}" DataContext="{Binding}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" TextWrapping="WrapWholeWords"/>
<TextBlock x:Uid="PoemTitleId" Text="{Binding PoemTitle}" FontSize="{Binding ElementName=FontSlider, Mode=OneWay, Path=Value}" DataContext="{Binding}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" Foreground="{ThemeResource PhoneMidBrush}" TextWrapping="WrapWholeWords"/>
<TextBlock x:Uid="PoemMeanId" Text="{Binding PoemMean}" DataContext="{Binding}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" TextWrapping="WrapWholeWords"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is the code behind the xaml page:
private void PoemView_PoemClick(object sender, ItemClickEventArgs e)
{
TextBlock PoemId = e.ClickedItem as TextBlock;
this.Frame.Navigate(typeof(Favorite), (e.ClickedItem as TextBlock));
On LoadState event of the Favorite page, I have added the below code:
private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
string poem = e.NavigationParameter as string;
if (string.IsNullOrEmpty(poem))
{
FavText.Text = "no favorite text";
}
else { FavText.Text = poem;
}
}
The problem is in the LoadState while the e.NavigationParameter is loaded with the strings passed to it, the string poem is not loading properly. Therefore, the FavText.Text is always returning the "no favorite text".
Anyone has a clue on how to fix this?
Your PoemId is probably null when you cast e.ClickedItem as TextBlock
Try this
Poem poem = e.ClickedItem as Poem;
this.Frame.Navigate(typeof(Favorite), poem);
Instead of casting e.ClickedItem as TextBlock, I updated the code as below which worked perfectly fine:
var type = ((PoemItem)e.ClickedItem).PoemTitle;
this.Frame.Navigate(typeof(Favorite), type);
I have an app where I save the user's contacts in a local Database, then bind this contacts in a LongListSelector using ObservableCollection to update the UI (when a new item is add or deleted).
But I'm having a strange behavior when the ObservableCollection is changed...
The item is add to the UI correctly, but after this, when I scroll fast, a blank space appears in the middle of the list.
Then I found out that, apparently, the list is cutting some items...
I was testing with a list of 140 items (strings), having at least one item starting with each alphabetic letter.
When this problem happens, I saw that after items with C letter, started the items with P letters (D to O disappeared!).
Does anybody can tell me what is happening?
I bind the items on LongListSelector this way:
XAML:
<Grid x:Name="ContentPanelContatos" Grid.Row="1" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid x:Name="gridContatos" Grid.Row="1" Margin="12,2,12,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,12" >
<TextBox x:Name="tbxSearch" VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed" TextChanged="TbxSearch_TextChanged" LostFocus="TbxSearch_LostFocus" Style="{StaticResource TextBoxStyle}" />
</Grid>
<phone:LongListSelector Grid.Row="1" x:Name="llsContacts" ItemsSource="{Binding}" SelectionChanged="llsContacts_SelectionChanged" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem local:TiltEffect.IsTiltEnabled="true">
<Grid Margin="0,0,0,10" >
<TextBlock Text="{Binding COLUMN_NAME, Mode=TwoWay}" FontFamily="Segoe WP" FontSize="28" Margin="77,0,0,0" />
<TextBlock Text="{Binding Path=COLUMN_NUMBER, Mode=TwoWay}" FontFamily="Segoe WP Light" FontSize="17" Margin="77,33,0,0"/>
</Grid>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
<!-- more 2 grids with contents -->
</Grid>
CS:
public ObservableCollection list;
public Main()
{
InitializeComponent();
list = new ObservableCollection<MyClass>(GetDataFromDatabase);
llsContacts.DataContext = list;
}
When I insert or remove something on DataBase, I alter on the list too:
list.Add(newData);
Am I doing something worng??
Reading this article: Frame rate counters in Windows Phone, I noticed that when this problem happens, some of the numbers that are on the side of the screen when debugging, stops changing...
They stops like this:
User Interface Thread FPS: 000
Texture Memory Usage: 007181
Surface Counter: 050
Intermediate Texture Counter: 002
Does this numbers means something?
I have a scrollviewer with an item template on it. the user sends a control number and I need to scroll to that item. How can I find the offset for the scrollviewer?
here is the scrollviewer that I am using
<ScrollViewer Grid.Row="0" x:Name="ScrollPanel" Padding="0">
<Grid x:Name="TestPanel" >
<ItemsControl x:Name="MainItemsControl" ItemsSource="{Binding PostList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="PostPanel" Margin="0,5,0,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="IconUrl" Source="{Binding IconUrl}" Grid.Row="0" Grid.Column="0" Margin="12,0,12,0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50"/>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock x:Name="PostAuthorName" Text="{Binding PostAuthorName}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PostTime" Text="{Binding PostTime}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<TextBlock x:Name="ReplyNumber" Text="{Binding ReplyNumber}" Grid.Row="0" Grid.Column="2" TextWrapping="NoWrap" Foreground="Black" Margin="12,0,12,0" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Center"/>
</Grid>
<RichTextBox x:Name="PostContent" localcontrols:Properties.BBCode="{Binding PostContent}" />
<Rectangle Grid.Row="1" Fill="Gray" Height="1" HorizontalAlignment="Stretch" Margin="0,10,0,10"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
The offset can be calculated in this way. The code is adopted from this answer.
void ScrollToIndex(int index)
{
var itemContainer = MainItemsControl.ItemContainerGenerator.ContainerFromIndex(index) as UIElement;
GeneralTransform transform = itemContainer.TransformToVisual(ScrollPanel);
Point position = transform.Transform(new Point(0, 0));
ScrollPanel.ScrollToVerticalOffset(position.Y);
}
The ItemsControl does not implement logic that allows scrolling to a particular item. You can use the ListBox control instead. This control has a ScrollIntoView method that accepts the object you would like to scroll to as an argument. You can still use the RadWrapPanel by setting the ItemsPanel property of the ListBox control.
You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
this.scrollViewer2.ScrollToVerticalOffset(0);
<StackPanel x:Name="LayoutRoot" Background="Transparent" >
<TextBlock Margin="20,20,0,0" Text="Type Text Here" HorizontalAlignment="Left"/>
<TextBox x:Name="SearchTextBox" IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="70" Width="400" dp:TextBoxOnTextChangedDependency.UpdateSourceOnChange="True" Text="{Binding SearchBoxText, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=SearchTextBox, Path=DataContext.SearchTextBox_TextChangedCommand}"
/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Grid x:Name="LayoutList" Background="{StaticResource PhoneChromeBrush}">
<toolkit:LongListMultiSelector x:Name="treksLocationItems" Background="Transparent"
ItemsSource="{Binding Path=TreksLocationItems}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding PictureFilename}" VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding ShortDescription}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Address:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=StreetName}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Site:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=Website}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=DataContext.TapCommand, ElementName=searchItems}" CommandParameter="{Binding Path=Id}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</StackPanel>
I have this code in XAML, a textbox for search and a multi line select list. The problem is that the multiLineList is not scrollable even if there are many items. If I remove the stackpanel and the textblock and textbox, the list works ok with scroll enabled. Any suggestion?
Try adding a ScrollViewer above your grid.
<ScrollViewer>
<Grid x:Name="LayoutList" ....>
...
</Grid>
</ScrollViewer>
Or you could probably replace your Grid with a ScrollViewer if you're not using it to position your elements.
Wraping LLMS in a ScrollViewer will destroy the item virtualization and throw an OutOfMemoryException if the collection is too long.
Expose the LLMS' inner LongListSelector, then use the ScrollTo() method to scroll to the item u want.
LongListMultiSelector llms = LongListMultiSelector as LongListMultiSelector;
if (llms != null && llms.ItemsSource.Count > 0)
{
llms.InnerLongListSelector.ScrollTo(llms.ItemsSource[llms.ItemsSource.Count - 1]);
}
I've encountered this weird issue and found an easy solution.
It happens for both Longlistselector and LonglistMultiselector.
When you have several controls in one page, you need to set the height of selector's row to "*" instead of "Auto" in order to make the scrolling function to work correctly.
For example :
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Row def for another row
<RowDefinition Height="*"/> //Row def for your selector
</Grid.RowDefinitions>
If the RowDefinition Height not set to "*" but "Auto", scrolling for Longlistselector will not response to user's action.