I have a problem with my LongListSelector: The Jumplist ist not working properly. When a MenuItem is clicked, the JumpList opens correctly. But when afterwards a header is tapped, the LongListSelector does not jump to the correct position. Instead, the App freezes for about three seconds, and then the jumplist just closes.
Apparently, the program does not know where to jump, but how is this possible? I've used the List from here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj244365(v=vs.105).aspx
I'm creating the LongListSelector dynamically, might that be a Problem?
My List Class is:
public class Group<TKey, TItem> : ObservableCollection<TItem>
{
public TKey Key { protected set; get; }
public Group(TKey key, IEnumerable<TItem> items)
: base(items)
{
Key = key;
}
public Group(IGrouping<TKey, TItem> grouping)
: base(grouping)
{
Key = grouping.Key;
}
}
I'm Binding with:
LongListSelector listBox = new LongListSelector { JumpListStyle = (Style)Resources["MenuTemplate"], ItemTemplate = (DataTemplate)Resources["Template"], GroupHeaderTemplate = (DataTemplate)Resources["HeaderTemplate"], HideEmptyGroups = true, IsGroupingEnabled = true, LayoutMode = LongListSelectorLayoutMode.List, Name = "somename" };
XAML Templates: Header and Menu Template:
<DataTemplate x:Key="HeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border>
<TextBlock Text="{Binding Key}"/>
</Border>
</Border>
</DataTemplate>
<Style x:Key="MenuTemplate" TargetType="phone:LongListSelector">
<Setter Property="LayoutMode" Value="List" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border>
<TextBlock Text="{Binding Key}"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I've been reading this article about Navigation Drawer and i Succeed, but how can i create a Click Event to each item i have inside of mu ListView?
i have that Array and bind all this to listview!
string[] menuItems = new string[5] { "Item1", "Item2", "Item3", "Item4", "Item5" };
ListMenuItems.ItemsSource = menuItems.ToList();
XAML.....
<Grid x:Name="ListFragment" Background="#F4F4F4">
<ListView x:Name="ListMenuItems" SelectedItem="true" SelectionChanged="ListMenuItems_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18" Foreground="Black" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Thanks!
Define an event handler for ItemClick event of ListView. You also need to set IsItemClickEnabled property to true.
<ListView x:Name="listview"
IsItemClickEnabled="True"
ItemClick="listView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
..
..
private void listView_ItemClick(object sender, ItemClickEventArgs e) {
// Code here
}
I defined my own ItemsPanelTemplate:
public sealed class ItemsPanel : Panel
{
...
protected override Size MeasureOverride(Size availableSize)
{
Size s = base.MeasureOverride(availableSize);
...
return s;
}
protected override Size ArrangeOverride(Size finalSize)
{
...
return finalSize;
}
}
and than I use it in GridView:
<GridView x:Name="itemGridView"
ItemsSource="{Binding Items}"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ItemTemplate="{StaticResource CalendarItemTemplate}">
<GridView.HeaderTemplate>
<DataTemplate>
<StackPanel Background="#182945"
Orientation="Horizontal">
...
</StackPanel>
</DataTemplate>
</GridView.HeaderTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<controls:ItemsPanel />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
My problem is that header is shown on left side vertical but I want them on top of grid horizontal.
I want to open a ListPicker in Fullscreen mode on ApplicationBarButton click. The ListPicker should be opened as new popup and should not be visible in the page.
This was my try:
private void OnAppBarButtonClick(object sender, EventArgs e)
{
ListPicker listPicker = new ListPicker();
listPicker.ExpansionMode = ExpansionMode.FullScreenOnly;
this.ContentPanel.Children.Add(listPicker);
ListPickerItem item1 = new ListPickerItem() { Content = "Item1" };
ListPickerItem item2 = new ListPickerItem() { Content = "Item2" };
ListPickerItem item3 = new ListPickerItem() { Content = "Item3" };
listPicker.Items.Add(item1);
listPicker.Items.Add(item2);
listPicker.Items.Add(item3);
listPicker.Open();
}
You can accomplish this by defining the ListPicker in your xaml, setting the ExpansionMode to FullScreenOnly and making it Collapsed.
<Grid x:Name="Content"/>
<!-- other controls -->
<toolkit:ListPicker x:Name="Picker" ExpansionMode="FullScreenOnly"
Visibility="Collapsed"
FullModeHeader="SELECT"
ItemsSource="{Binding MyItems}"
SelectionChanged="OnPickerSelectionChanged">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Margin="0,20" Text="{Binding Name}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
</Grid>
Then in your code, you open the picker.
Picker.Open();
This samples assumes you have a DataContext with a MyItems property that is a collection of items that has a Name property.
this code works for me without the need of any base code,
<toolkit:ListPicker Header="State"
x:Name="State"
ExpansionMode="FullScreenOnly">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="0 24 24 24"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle2Style}" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Just initialize State.ItemsSource with a list.
I have a TextBlock in the datatemplate of ListFooterTemplate of LongListSelector,to which I give a Collection as Itemssource,I want to bind the Text Property of TextBlock to a string in the Codebehind. Please tell me how to do it. Here is the xaml.
I am using VS2012 and WP8 SDK.
<toolkit:LongListSelector ItemsSource="{Binding Collection}">
<toolkit:LongListSelector.ListFooterTemplate>
<DataTemplate>
<TextBlock Text= "{Binding footertext}" />
</DataTemplate>
</toolkit:LongListSelector.ListFooterTemplate>
</toolkit:LongListSelector>
footertext is the string I have defined in the codebehind. I have implemented INotifyPropertyChanged also but footer doesnt show the text.
Just guessing here, but the most likely reason you're not seeing any footer is that you're not binding to the right object. The LongListSelector is binding to properties on its DataContext. If the Collection property lives on a different object than the footertext property that would cause this problem.
Here's some sample code that works for me:
Code-behind
namespace LongListSelector
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
SomeText = "This is my footer text from the code-behind";
}
public string SomeText { get; private set; }
}
}
XAML
<phone:PhoneApplicationPage
x:Class="LongListSelector.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LongListSelector"
mc:Ignorable="d"
x:Name="page"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.DataContext>
<local:SampleData/>
</phone:PhoneApplicationPage.DataContext>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector ItemsSource="{Binding Collection}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<phone:LongListSelector.ListFooterTemplate>
<DataTemplate>
<TextBlock Text="{Binding SomeText,ElementName=page}"/>
</DataTemplate>
</phone:LongListSelector.ListFooterTemplate>
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.HeaderText, ElementName=page, Mode=OneWay}"/>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Sample data object
using System.Collections.ObjectModel;
namespace LongListSelector
{
public class SampleData
{
public SampleData()
{
Collection = new ObservableCollection<string>( new string[] { "Item 1", "Item 2", "Item 3" } );
HeaderText = "This is my header text";
}
public ObservableCollection<string> Collection { get; private set; }
public string HeaderText { get; private set; }
}
}
Note that the ItemsSource property on the LongListSelector binds to the DataContext (as does the header) while footer binds to a property in the code-behind class.
Hope this helps.
In toolkit LongListSelector, there used to be a property IsFlatList which needed to be set to true to display flat list without any grouping. But in the LongListSelector provided in phone control, this property is missing. Here is what I am doing
<phone:LongListSelector Name="myList" IsGroupingEnabled="False" LayoutMode="List" ItemsSource="{Binding Source ={StaticResource SortedList} }" CacheMode="BitmapCache" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<components:MyControl CacheMode="BitmapCache" MyItem="{Binding}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
If I change the control to ListBox and remove LongListSelector specific property then it display my list.
Can someone please tell me what I am missing?
I am following this(Remarks) documentation of LongListSelector
In the Windows Phone 8 Version of the LongListSelector setting LayoutMode to List and IsGroupingEnabled to false should display your databound data as a flat list like in the WP7 Toolkit version of the control.
For example,
Given an Entity class
public class Entity
{
public string Name
{
get;
set;
}
public string Info
{
get;
set;
}
public int ID
{
get;
set;
}
}
All I need to do is create an ObservableCollection of Entity on my page and bind it to the itemsource of my LongListSelector (named list).
ObservableCollection<Entity> data = new ObservableCollection<Entity>();
list.ItemsSourdce = data;
Then I create the entities and add them to the collection.
Here is the XAML for my LongListSelector:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector Name="list" HorizontalAlignment="Left" Height="609" VerticalAlignment="Top" Width="456" LayoutMode="List" IsGroupingEnabled="False" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
<TextBlock Text="{Binding Info}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
LayoutMode ="List" that's all you need.