Develop Reference

Display class properties in labels (like a header) and list<string> in listbox

im a little bit confused about the following problem:
I have a class called 'Games' like this
public class Game {
public int GameID { get; set; }
public string GameName { get; set; }
public int GameMaxPlayers { get; set; }
public int GamePrize { get; set; }
public List<string> GamePlayers {get;set; }
}
private list<Games> GameList;
and a list, which holdes the game-objects.
Now i add serveral games to the GameList and want to display them in a datagrid or any other control (i dont know, if datagrid is the best choice for this).
It should look like this example:
Example
A header, maybe some labels in a stackpanel, with GameID, GameName, GameMaxPlayers, GamePrize and then below a listbox with the player names.
I tried a datagrid with edited headers, but this won't work as i expected.
Does someone have a tipp for me, how to achieve this?
Thanks in advance,
best regards
Flo

Hello I have made a working example using a ListView control.
The XAML code for the ListView:
<ListView x:Name="ListView1" HorizontalAlignment="Left" Margin="82.337,135.208,0,0" VerticalAlignment="Top" Background="Red">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The C# code:
class Game
{
public int GameID { get; set; }
public string GameName { get; set; }
public int GameMaxPlayers { get; set; }
public int GamePrize { get; set; }
public List<string> GamePlayers = new List<string>();
}
private void BTN1_Click(object sender, RoutedEventArgs e)
{
StackPanel SPanel = new StackPanel();
TextBlock TXTB1 = new TextBlock();
TextBlock TXTB2 = new TextBlock();
TextBlock TXTB3 = new TextBlock();
TextBlock TXTB4 = new TextBlock();
ListBox LBox1 = new ListBox();
Game AddGame = new Game();
AddGame.GameID = 10;
AddGame.GameName = "Football";
AddGame.GameMaxPlayers = 16;
AddGame.GamePrize = 10000;
AddGame.GamePlayers.Add("Test1"); AddGame.GamePlayers.Add("Test2"); AddGame.GamePlayers.Add("Test3");
TXTB1.Margin = new Thickness(10); TXTB1.FontSize = 26;
TXTB1.HorizontalAlignment = HorizontalAlignment.Center; TXTB1.VerticalAlignment = VerticalAlignment.Center;
TXTB1.Text = AddGame.GameID.ToString();
TXTB2.FontSize = 26; TXTB2.Background = Brushes.Black; TXTB2.Foreground = Brushes.White;
TXTB2.HorizontalAlignment = HorizontalAlignment.Stretch; TXTB2.VerticalAlignment = VerticalAlignment.Stretch;
TXTB2.Text = AddGame.GameName;
TXTB3.FontSize = 26; TXTB3.Margin = new Thickness(10);
TXTB3.HorizontalAlignment = HorizontalAlignment.Center; TXTB3.VerticalAlignment = VerticalAlignment.Center;
TXTB3.Text = AddGame.GameMaxPlayers.ToString();
TXTB4.FontSize = 26; TXTB4.Margin = new Thickness(10);
TXTB4.HorizontalAlignment = HorizontalAlignment.Center; TXTB4.VerticalAlignment = VerticalAlignment.Center;
TXTB4.Text = "$ " + AddGame.GamePrize.ToString();
foreach (string s in AddGame.GamePlayers)
{
LBox1.Items.Add(s);
}
SPanel.Children.Add(TXTB1); SPanel.Children.Add(TXTB2); SPanel.Children.Add(TXTB3); SPanel.Children.Add(TXTB4); SPanel.Children.Add(LBox1);
ListView1.Items.Add(SPanel);
}
I know it's not the most elegant solution but It should work, best regards, Golan.

Thank you all for your inputs, i do it with an itemscontrol now:
<ItemsControl ItemsSource="{Binding PokerTables}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0" Margin="5">
<StackPanel Orientation="Vertical" Margin="6">
<ComboBox ItemsSource="{Binding NameList}" SelectedItem="{Binding Name,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
<ComboBox ItemsSource="{Binding GameList}" SelectedItem="{Binding Game,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
<ComboBox ItemsSource="{Binding LimitList}" SelectedItem="{Binding Limit,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
<ComboBox ItemsSource="{Binding BuyInList}" SelectedItem="{Binding BuyIn,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
<ComboBox ItemsSource="{Binding BlindList}" SelectedItem="{Binding Blinds,Mode=TwoWay}" Foreground="Black" FontSize="20" FontWeight="Bold" Background="Transparent"/>
<TextBox Text="{Binding OpenSeats, Mode=TwoWay,StringFormat=Open seats: {0}}" Foreground="White" FontSize="16" FontWeight="Bold" Background="Transparent" BorderThickness="0"/>
<ListBox Name="PlayerListbox" ItemsSource="{Binding Players}" SelectedItem="{Binding DataContext.SelectedPlayer, RelativeSource={RelativeSource AncestorType=UserControl}}" IsSynchronizedWithCurrentItem="True" Background="#33A2A2A2" Foreground="White" BorderThickness="0" FontWeight="Bold" FontSize="12" Margin="0,15,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="X" Command="{Binding DataContext.DeletePlayerCommand, ElementName=MyTables}" CommandParameter="{Binding}"/>
<TextBlock Name = "TextControl" Text="{Binding Name}" Background="Transparent" Padding="4">
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I changed the names of the fields a little bit, but now all information is provided as i expacted.
Best regards,
Flo

ListVIew of ItemsControl: Get the ListViewItem index after selecting one its item from ItemsControl

I have a ListView. Inside of this ListView there is ItemsControl and inside it there is second ItemsControl. Inside of the second ItemsControl there are TextBoxes.
ListView -> ItemsControl -> ItemsControl -> TextBox
Is there any chance that I would be able to get index of ListViewItem, which specific TextBox belongs to after clicking on this TextBox?
For example
I select a ListViewItem on index 0 but then I click on TextBox which belong to ListViewItem on index 2. In that case I would like to change value of SelectedGroupIndex from 0 to 2.
"Hello" strings are just for testing.
Thank you very much.
ViewModel
public class MainWindowViewModel
{
public ObservableCollection<ObservableCollection<ObservableCollection<ListViewString>>> AllTexts { get; set; }
public int SelectedGroupIndex { get; set; }
public ICommand AddGroup { get; private set; }
public ICommand AddColumn { get; private set; }
public ICommand TextBoxSelected { get; private set; }
public MainWindowViewModel()
{
this.AllTexts = new ObservableCollection<ObservableCollection<ObservableCollection<ListViewString>>>();
this.SelectedGroupIndex = -1;
this.AddGroup = new Command(this.AddGroupCommandHandler);
this.AddColumn = new Command(this.AddColumnCommandHandler);
this.TextBoxSelected = new Command(this.TextBoxSelectedCommandHandler);
}
private void AddGroupCommandHandler()
{
var tempColumn = new ObservableCollection<ListViewString>() {
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello") };
var tempGroup = new ObservableCollection<ObservableCollection<ListViewString>>();
tempGroup.Add(tempColumn);
this.AllTexts.Add(new ObservableCollection<ObservableCollection<ListViewString>>(tempGroup));
}
private void AddColumnCommandHandler()
{
if (this.SelectedGroupIndex >= 0 && this.SelectedGroupIndex < this.AllTexts.Count)
{
var tempColumn = new ObservableCollection<ListViewString>() {
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello"),
this.GetListViewString("Hello") };
this.AllTexts[this.SelectedGroupIndex].Add(tempColumn);
}
}
private void TextBoxSelectedCommandHandler()
{
// TODO: Change SelectedItem of ListView
// this.SelectedGroupIndex = ...;
}
private ListViewString GetListViewString(string text)
{
return new ListViewString { Value = text };
}
private string GetTextFromListViewString(ListViewString listViewString)
{
return listViewString.Value;
}
}
/// <summary>
/// Class used to show user Text in ListView.
/// Using this class fixes the issue that ObservableCollection didn't update
/// after user changed values of TextBoxes in GUI.
/// </summary>
public class ListViewString : DependencyObject
{
public string Value
{
get
{
return (string)GetValue(ValueProperty);
}
set
{
SetValue(ValueProperty, value);
}
}
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(string), typeof(ListViewString), new PropertyMetadata(string.Empty));
}
View:
<Window.Resources>
<ResourceDictionary>
<local:MainWindowViewModel x:Key="vm" />
</ResourceDictionary>
</Window.Resources>
<Grid Margin="10,10,10,10" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition />
</Grid.RowDefinitions>
<ListView Grid.Row="0"
ItemsSource="{Binding AllTexts, Source={StaticResource vm}, Mode=TwoWay}"
Background="Blue"
SelectedIndex="{Binding SelectedGroupIndex, Source={StaticResource vm}}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Value}"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Width="100" Height="40">
<TextBox.InputBindings>
<MouseBinding Gesture="LeftClick"
Command="{Binding TextBoxSelected, Source={StaticResource vm}}" />
</TextBox.InputBindings>
</TextBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,20,0,0">
<Button Content="Add Group" Width="120" Height="30"
Command="{Binding AddGroup, Source={StaticResource vm}}" />
<Button Content="Add Column" Margin="20,0,0,0" Width="120" Height="30"
Command="{Binding AddColumn, Source={StaticResource vm}}" />
<TextBlock Width="120" Height="30" FontSize="20" Margin="20,0,0,0"
Text="{Binding SelectedGroupIndex, Source={StaticResource vm}}" />
</StackPanel>
</Grid>

Actually what you need is to pass the DataContext of your TextBox to the command as parameter, so use CommandParameter for it and implement your command with parameter:
<TextBox.InputBindings>
<MouseBinding Gesture="LeftClick"
Command="{Binding TextBoxSelected, Source={StaticResource vm}}"
CommandParameter="{Binding DataContext, RelativeSource={RelativeSource Mode=Self}}"/>
</TextBox.InputBindings>
So you will have an item from your items source collection as command parameter and can find the index of it.

Windows phone 8 DataTemplate in XAML not showing data

I would like to display some information in a data template in my app but when it is run it shows nothing in the listbox.
Here is the class code (class called notes)
public class notes
{
public string strNoteName { get; set; }
public string strCreated { get; set; }
public string strModified { get; set; }
public bool boolIsProtected { get; set; }
public string strNoteImage { get; set; }
public static ObservableCollection<notes> GetnotesRecord()
{
ObservableCollection<notes> notesRecord = new ObservableCollection<notes>
{
new notes{strNoteName="Science",strCreated="17/07/2014",strModified="17/07/2014",boolIsProtected=true,strNoteImage=""},
new notes{strNoteName="Math",strCreated="12/02/2014",strModified="15/07/2014",boolIsProtected=false,strNoteImage=""},
new notes{strNoteName="HW",strCreated="05/06/2014",strModified="2/07/2014",boolIsProtected=false,strNoteImage=""},
new notes{strNoteName="Business",strCreated="23/04/2014",strModified="17/07/2014",boolIsProtected=true,strNoteImage=""},
};
return notesRecord;
}
public ObservableCollection<notes> _notes;
public ObservableCollection<notes> allNotes
{
get
{
return _notes;
}
set
{
_notes = value;
}
}
}
And here is the XAML code:
<ListBox Margin="0,10,0,88">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding strNoteImage}" Height="80" Width="80" Grid.Column="0"></Image>
<StackPanel Grid.Column="1" Orientation="Vertical" Width="150" Height="100" >
<TextBlock Text="{Binding strNoteName}" Margin="5,1,0,1"></TextBlock>
<TextBlock Text="{Binding strCreated}" Margin="5,1,0,1"></TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Last modified: " Margin="5,1,0,1"></TextBlock>
<TextBlock Text="{Binding strModified}" Margin="3,1,0,1"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Is protected: " Margin="5,1,0,1"></TextBlock>
<TextBlock Text="{Binding boolIsProtected}" Margin="3,1,0,1"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox >
Thank you in advance for any help :)

Change the ListBox definition to
<ListBox Margin="0,10,0,88" ItemsSource="{Binding}">
and set in C# code
this.DataContext = Notes.GetnotesRecord();

You are missing to set the ItemsSource to the Listbox,
You can do that in XAML and set the DataContext in code behind , Something like this,
<ListBox Margin="0,10,0,88" Name = "lstBox1" ItemsSource= "{Binding}" />
In code behind,
This.DataContext = GetnotesRecord();
Or
lstBox1.ItemsSource = GetnotesRecord();

DataContext Gridview within Stack Panel in XAML Windows Phone 8

I'm trying to data bind a collection ("Dashboard") that contains a ObservableCollection property.
I have managed to databind the dashboard class without any issues. I cant however work out how to databind to the Release collection that is contained within the dashboard class.
The issue seems to be on the GridView which is databound to the Releases property of the Dashboard class. The Stack Panel around the GridView is working correctly.
The classes
public class Dashboard
{
public Dashboard(String id, String projectName)
{
this.Id = id;
this.ProjectName = projectName;
this.Releases = new ObservableCollection<Release>();
}
public string Id { get; private set; }
public string ProjectName { get; private set; }
public ObservableCollection<Release> Releases { get; private set; }
public override string ToString()
{
return this.ProjectName;
}
}
public class Release
{
public Release(string environmentName, string releaseVersion, string state, string releaseDate)
{
EnvironmentName = environmentName;
ReleaseVersion = releaseVersion;
State = state;
ReleaseDate = releaseDate;
}
public string EnvironmentName { get; private set; }
public string ReleaseVersion { get; private set; }
public string State { get; private set; }
public string ReleaseDate { get; private set; }
}
The XAML
<HubSection x:Uid="Dashboard" x:Name="Dashboard" Header="Dashboard" DataContext="{Binding Dashboard}">
<DataTemplate>
<GridView x:Uid="DashboardGrid" x:Name="DashboardGrid" ItemsSource="{Binding}" ItemTemplate="{StaticResource Standard200x180TileItemTemplate}" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
The data template
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<StackPanel DataContext="{Binding}" >
<TextBlock Text="{Binding ProjectName}" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Typography.Capitals="SmallCaps" Grid.Row="0" IsTextScaleFactorEnabled="False"/>
<GridView Grid.Row="1" DataContext="{Binding Releases}">
<TextBlock Text="{Binding EnvironmentName}" />
<TextBlock Text="{Binding ReleaseVersion}" />
<TextBlock>hello</TextBlock>
<Border Background="#FF0CB90C" Height="110" Width="110" HorizontalAlignment="Left" Margin="0,0,10,0">
</Border>
</GridView>
</StackPanel>
</DataTemplate>

Set ItemsSource of GridView not DataContext and then use another DataTemplate
<StackPanel>
<TextBlock Text="{Binding ProjectName}" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Typography.Capitals="SmallCaps" Grid.Row="0" IsTextScaleFactorEnabled="False"/>
<GridView Grid.Row="1" ItemsSource="{Binding Releases}">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding EnvironmentName}" />
<TextBlock Text="{Binding ReleaseVersion}" />
<TextBlock>hello</TextBlock>
<Border Background="#FF0CB90C" Height="110" Width="110" HorizontalAlignment="Left" Margin="0,0,10,0">
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>

Binding Error in my windows phone 8 project

Well I am trying to do a simple binding in a Long list but the emulator is throwing a debug Exception in
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
I would paste my code below
My model class is
public class CommentView
{
public string ID { get; set; }
public string IsApproved { get; set; }
public string PostersComment { get; set; }
public string Name { get; set; } //Note that this is the name of the Jizuser
public string PostedDate { get; set; }
public string PostedTime { get; set; }
}
I am doing my binding from the xaml csharp code. so the script is pasted below
List<CommentView> commenterContainer = new List<CommentView>();
commenterContainer.Add(new CommentView() { Name ="FEMI", IsApproved="True", ID="1", PostedDate="2/3/2014", PostedTime="01:02:2011", PostersComment= "Me" });
commenterlist.ItemsSource = commenterContainer;
This is the longlist item. how I crafted the dataItem template
<phone:LongListSelector Margin="3" x:Name="commenterlist" SelectionChanged ="Bloglist_SelectionChanged" Grid.Row="6"
Background="White">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="#4063A9">
<StackPanel Margin="10,10,10,10" Orientation="Vertical" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="{Binding ID}" Visibility="Collapsed"/>
<Image Source="/Assets/profile.jpg"/>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="12,20,0,0" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#4063A9"/>
</StackPanel>
<TextBlock Text="{Binding PostersComment}" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="{Binding PostedDate}" />
<TextBlock x:Name="{Binding PostedTime}" />
<TextBlock x:Name="{Binding IsApproved}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

Problem was from the LongListSelector
Recreating the LongListSelector Solves the issue. I did this and it works fine