GridView horizontal Header with own ItemsPanelTemlate Windows Store App - windows-store-apps

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.

Related

How To Save Chat in Windows Phone 8

Hi All i am working on a windows phone chat application and i have done chatting with both end now i am facing issue when i reopen my app my all previous chat history is removed. how i can save my previous chat history please help me.
Thanks
i am using following code
<ListBox Name="listChat" Grid.Row="0" ItemsSource="{Binding Path=Instance.Messages,Source={StaticResource Binder}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="430">
<cc:ChatBubble Width="380" HorizontalAlignment="{Binding Converter={StaticResource MType},ConverterParameter=align}" Opacity="{Binding Converter={StaticResource MType}}" ChatBubbleDirection="{Binding Converter={StaticResource MType},ConverterParameter=direction}" Margin="0,0,0,10" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" HorizontalAlignment="Left" FontSize="17" Text="{Binding Name}"></TextBlock>
<TextBlock Grid.Row="0" HorizontalAlignment="Right" FontSize="17" Text="{Binding SendingDate}"></TextBlock>
<TextBlock Grid.Row="1" Name="txt_Msg" Text="{Binding Text}" TextWrapping="Wrap" Width="430"></TextBlock>
</Grid>
</cc:ChatBubble>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the easiest way is Isolated Storage
For example I have this helper class
public static class SettingsManager
{
private static IsolatedStorageSettings appSettings;
public static IsolatedStorageSettings AppSettings
{
get { return SettingsManager.appSettings; }
set { SettingsManager.appSettings = value; }
}
public static void LoadSettings()
{
if (appSettings == null)
appSettings = IsolatedStorageSettings.ApplicationSettings;
if (!appSettings.Contains(SettingValues.LoadedData))
appSettings[SettingValues.LoadedData] = false;
appSettings.Save();
}
public static void SaveValue(string key, object value)
{
appSettings[key] = value;
appSettings.Save();
}
}
Then you can use it as follows
SettingsManager.SaveValue("myname", someVariableYouWantToStore);
And after start, you can load it with
SettingsManager.AppSettings["myname"]

How to handler click item from string inside of listview Windows Phone 8.1

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
}

How to make horizontal dropdown menu like this in WP

I need to show items in dropdown menu in line. How can i make it?
You will probably need to build the Control yourself. You can make a Composite Control consisting of a <Button> and a <ListBox> to emulate what you're trying to do. It is actually pretty easy.
For example:
<Button Content="{Binding SelectedItem.Song, FallbackValue=Show List, ElementName=myListBox}" Height="100" Click="Button_Click"></Button>
<ListBox x:Name="myListBox" Height="60" Visibility="Collapsed">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="1" Height="50" Padding="15,0">
<TextBlock VerticalAlignment="Center">
<Run Text="{Binding Song}"></Run>
</TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I did here is programmed a Button with its Content Binded to the ListBox's SelectedItem which has .Song Property, if none is selected it falls back to "Show List"
When the user clicks on the button it should hide/show the list box depending on its current Visibility.
private void Button_Click(object sender, RoutedEventArgs e)
{
if (this.myListBox.Visibility == System.Windows.Visibility.Collapsed)
{
this.myListBox.Visibility = System.Windows.Visibility.Visible;
}
else
this.myListBox.Visibility = System.Windows.Visibility.Collapsed;
}
Your job is to wrap all this up inside a nice UserControl or you can just use it as is.
Here are some screenshots of it in action:

toolkit:LongListSelector JumpList not jumping

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>

How to Bind text value of a textblock inside a dataTempalte of Listfootertemplate of a Longlistselector

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.