Ok so i am trying to pass list of items into a XAML-view in order to "loop" over them. I am used to working with html and have not really understood how to achieve this in XAML.
Here is the class containing Item and also a method that creates a list of Items which I wish to pass to the view:
public class Item
{
public int ItemId { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Description { get; set; }
public List<Item> GetList()
{
var _test = new List<Item>();
for (int i = 0; i < 10; i++)
{
var newItem = new Item()
{
ItemId = i++,
Name = "Person",
Age = 30,
Description = "Description",
};
_test.Add(newItem);
}
return _test;
}
}
My view consists of a XAML-template calles GroupDetailPage which consists of a listview to the left and a "detail-view" in the middle which is supposed to switch depending on what item from the list I pick. Here is the XAML for the list-view, untouched:
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="0,0,0,10"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here is the Code-behind for the view. I guess I need to create a method here that gets my list of items and binds it to the view? I,ve been struggling a lot with this. Im probably to stuck in my MVC-thinking to be able to figure out how to go about this:
public sealed partial class GroupDetailPage1 : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
/// <summary>
/// This can be changed to a strongly typed view model.
/// </summary>
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
/// <summary>
/// NavigationHelper is used on each page to aid in navigation and
/// process lifetime management
/// </summary>
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public GroupDetailPage1()
{
this.InitializeComponent();
// Setup the navigation helper
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
this.navigationHelper.SaveState += navigationHelper_SaveState;
// Setup the logical page navigation components that allow
// the page to only show one pane at a time.
this.navigationHelper.GoBackCommand = new SimpleMapping.Common.RelayCommand(() => this.GoBack(), () => this.CanGoBack());
this.itemListView.SelectionChanged += itemListView_SelectionChanged;
// Start listening for Window size changes
// to change from showing two panes to showing a single pane
Window.Current.SizeChanged += Window_SizeChanged;
this.InvalidateVisualState();
}
void itemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.UsingLogicalPageNavigation())
{
this.navigationHelper.GoBackCommand.RaiseCanExecuteChanged();
}
}
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Assign a bindable group to Me.DefaultViewModel("Group")
// TODO: Assign a collection of bindable items to Me.DefaultViewModel("Items")
if (e.PageState == null)
{
// When this is a new page, select the first item automatically unless logical page
// navigation is being used (see the logical page navigation #region below.)
if (!this.UsingLogicalPageNavigation() && this.itemsViewSource.View != null)
{
this.itemsViewSource.View.MoveCurrentToFirst();
}
}
else
{
// Restore the previously saved state associated with this page
if (e.PageState.ContainsKey("SelectedItem") && this.itemsViewSource.View != null)
{
// TODO: Invoke Me.itemsViewSource.View.MoveCurrentTo() with the selected
// item as specified by the value of pageState("SelectedItem")
}
}
}
Can someone ponit me in the right direction here. Im trying to pass my list of items to the view and hoping that there is an equivalent of the foreach-loop or something similar? Thank you!
EDIT: In the constructor for the GroupDetailPage I added this code:
var items = new ObservableCollection<Item>();
items = model.GetList();
DataContext = items;
Does this now mean that I can access the in my view?
I added this snippet of code from the link:
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding }"></TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Can I somehow bind my properties to the textbloxk in the middle? Does not seem to be any intellisense. Thank you.
