Displaying key/value pairs - windows-phone-8

I have a bunch of key/value pair text data that I need to display.
I currently use LongListSelector with an ItemTemplate which uses a horizontal StackPanel with two TextBlock s inside:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title: " />
<TextBlock Text="{Binding Path=Title}" TextWrapping="Wrap" />
</StackPanel>
This gives a nice "label: value" look.
However, I find this verbose.
Is there a nicer way to achieve the same thing?
I've tried putting everything in a single TextBlock like so:
<TextBlock Text="Title: {Binding Path=Title}" TextWrapping="Wrap" />
but it doesn't want to work!

Inside a single TextBlock, this is not possible. However, you could use a ValueConverter:
public class NameValueConverter : IValueConverter
{
public object Convert(Object value,
Type targetType,
Object parameter,
CultureInfo culture)
{
return "Title: " + (string)value;
}
}
You should add this to your app.xaml as a global resource (named NameValueConverter). Then you can do this in XAML:
<TextBlock Text="{Binding Path=Title, Converter={StaticResource NameValueConverter}}" TextWrapping="Wrap" />
When databinding kicks in, it will pass the Title to the valueconverter and bind the result to the textbox.

Related

Populate ScrollView at runtime in WIndows Phone 8

I have an app for windows phone 8 that displays data loaded from my website.
At the moment, I have setup 4 'holders' for the data, that contain a few TextBlocks and Images. When the app is loaded, these 4 holders display the data for the first 4 'records'. To display the next 4 'records', the user has to click a button, 'Next'.
I want to change this so that all 'records' are displayed in a ScrollView so the user simply has to scroll down to view records rather than click the 'Next' button.
I have also written the app for Android using Eclipse and Java. To do the above, I created a layout of the 'holder' in xml and then this is used as a template for the data. I only have to define the layout once and it is repeated at runtime, populated with the data from each record.
How do I achieve the same in Windows Phone, using vb.net and xaml?
I have googled and possibly DataTemplate is what I need however I'm not sure and have no idea how to implement it.
If you could point me in the right direction I'm sure I can figure it out!
Thanks in advance.
EDIT:
Ok, I've tried the following but the ListBox is empty:
Basically I have a List populated at runtime from my website (I know this bit works):
Public WebData As New System.Collections.Generic.List(Of WebInfo)
WebInfo Class:
Public Class WebInfo
Public ID As Integer
Public H1 As String
Public A1 As String
Public C1 As String
Public C2 As String
Public K1 As Date
End Class
xaml:
<ListBox x:Name="MainList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Grid.Row="3" Grid.RowSpan="6" Grid.Column="0" Grid.ColumnSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="H1" Text="{Binding H1}" FontSize="15" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Right" FontWeight="Bold" Foreground="Black"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I try to set the ItemsSource using:
MainList.ItemsSource = WebData
The ListBox does not populate.
Any Thoughts?
I think LongListSelector works for you, but you should edit DataTemplate for your needs.
<phone:LongListSelector ItemsSource="{Binding ArticleList}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
The problem was, I was using variables in my class rather than properties:
Public Class WebInfo
Public Property ID As Integer
Public Property H1 As String
Public Property A1 As String
Public Property C1 As String
Public Property C2 As String
Public Property K1 As Date
End Class
Thanks for your help.

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:

How to display element in LongListSelector only if bool=true?

I have a LongListSelector binded to a ObservableCollection(MyObject) I want display an image inside a container (Grid) only if the myobject.BoolProperty=True. How can I do that ?
Unfortunatly it seems we can't access elements inside the LongListSelector from code behind...In my xaml page i want to display the image (IsSuscribed) only if the boolean property is true...
<phone:LongListSelector x:Name="llsAllDoclibs"
LayoutMode="List"
ItemsSource="{Binding}"
HideEmptyGroups="False"
Background="WhiteSmoke"
SelectionChanged="Doclibs_SelectionChanged"
Margin="20,20,20,20"
>
<phone:LongListSelector.ItemTemplate >
<DataTemplate >
<Grid
Height="auto"
Margin="0,20,0,0"
Background="White"
>
<StackPanel Margin="10,10,10,10">
<Image HorizontalAlignment="Right"
VerticalAlignment="Center"
Source="/Images/BDocs/ico_action_valider.png"
x:Name="IsSuscribed"></Image>
<TextBlock
Text="{Binding NomDocLib}"
Foreground="#FF00485A"/>
<TextBlock
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding NbrElements}"
Foreground="#FF00485A"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
EDIT
I implemented this code.It works fine.But I was wondering How can use this class with an int value.If the value >10 I want display my element otherwise I want to hide it. I try to replace the object value by an int but i had an error...
public sealed class BooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
return (value is bool && (bool)value) ? Visibility.Collapsed : Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
return value is Visibility && (Visibility)value == Visibility.Visible;
}
}
Add the following attribute to your Grid:
Visibility="{Binding BoolValue,Converter={StaticResource BooleanToVisibilityConverter}}"
It should be fairly easy to write such converter (one line actually), but it is part of many frameworks out there.

longlistselector Context Menu NavigationService Wrong item

i have a longlistselector and use contextmenu. I have problem when use NavigationService.
For each list item there is a context menu to delete or edit the item and that appears to work okay for pre-existing lists of items.
However, if I add a new person, add a new item to that person, edit it, then add another item, when I try to edit the second item, the first item is selected instead.
IS A BUG?
My Xaml code looks like this:
<DataTemplate x:Key="LongListSelectorItemTemplate">
<StackPanel Orientation="Horizontal" Margin="4,4">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding DataContext, ElementName=LayoutRoot}">
<toolkit:MenuItem Header="Edit" cal:Message.Attach="[Event Tap] = [Action ContextMenuEdit_EventTap($datacontext)]" />
<toolkit:MenuItem Header="Delete" cal:Message.Attach="[Event Tap] = [Action ContextMenuDelete_EventTap($datacontext)]" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Name2}" />
</StackPanel>
</DataTemplate>
I'm not sure if this is the solution for your problem, but i had a same sort of problem and it works for me.
Add a name to the phoneApplicationPage (top of the xaml)
<phone:PhoneApplicationPage
......
Your settings
......
x:Name="Page">
And change this code:
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding DataContext, ElementName=LayoutRoot}">
Into this:
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding ElementName=Page, Path=DataContext}">

How to display flatlist using LongListSelector phone control of WP8

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.