We Keep Coding

How do I flip this "grid" of displayed objects to be in 3x2 instead of 2x3

I am trying to show the user a bunch of data based on a grid (not the ui element grid). The data changes and the displayed instances are based on the X/Y position of that data. I used an example I found here (but can't find it right now) and I basically got everything working. Except that the displayed grid is on it's side. I have created a test project under which I'm trying to make the thing work correctly before taking that to my main project.
Here is what it looks like
Here is what I want it to look like (Tanks Paint)
Codebehind: (Quick and dirty but works for testing purposes)
private DataContainer[][] dataArray;
public MainWindow()
{
dataArray = new DataContainer[3][];
dataArray[0] = new DataContainer[2];
dataArray[1] = new DataContainer[2];
dataArray[2] = new DataContainer[2];
dataArray[0][0] = new DataContainer(1,"At: 0,0");
dataArray[1][0] = new DataContainer(2, "At: 1,0");
dataArray[2][0] = new DataContainer(3, "At: 2,0");
dataArray[0][1] = new DataContainer(4, "At: 0,1");
dataArray[1][1] = new DataContainer(5, "At: 1,1");
dataArray[2][1] = new DataContainer(6, "At: 2,1");
InitializeComponent();
lst.ItemsSource = dataArray;
}
XAML:
<Window.Resources>
<DataTemplate x:Key="DataTemplate_Level2">
<Border Name="border" BorderBrush="LightGreen" BorderThickness="5"
Padding="2" Margin="2" Width="80">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Border Name="border2" BorderBrush="Red" BorderThickness="2"
Grid.Row ="0" Padding="1" Margin="1">
<TextBlock Text="{Binding Path=Text1, UpdateSourceTrigger=PropertyChanged}"/>
</Border>
<Border Name="border3" BorderBrush="Blue" BorderThickness="2"
Grid.Row ="1" Padding="1" Margin="1">
<TextBlock Text="{Binding Path=Number1, UpdateSourceTrigger=PropertyChanged}"/>
</Border>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="DataTemplate_Level1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_Level2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl x:Name="lst" ItemTemplate="{DynamicResource DataTemplate_Level1}"/>
</Grid>
What I've tried:
I tried changing stackpanel orientation to Vertical. That got me half way there. The Result is left column on top of right column. The problem is changing the 3 elements within that column to be Horizontal, which should give the result I'm looking for.
I also triend fondling the DataTemplate_Level2 but that just left me with error messages.
To be honest, I'm new to WPF (in case you haven't noticed) This databinding and templating is the most complicated UI part of my project and I've been thoroughly confused by trying to learn all the stuff at once. I would appreciate it if someone would point me towards an answer here. It's almost Christmas and I would much rather not spend the holidays thinking about this problem.
One solution I can think of is swapping the X and Y coordinates in the array to be dataArray[Y][X] instead of dataArray[X][Y] but that would make things difficult for me in the future and it would be best to get the problems solved now.
In case you wonder what the datacontainer object looks like, but this shouldn't be important to the solution of this issue. it's just something I whipped together to demonstrate that I have gotten the binding and updating to work. It just displays the coordinates it should be at and at random interval changes the value of the number:
public class DataContainer : INotifyPropertyChanged
{
private int number1 = 0;
private string text1 = "none";
private System.Timers.Timer aTimer;
public event PropertyChangedEventHandler PropertyChanged;
public DataContainer(int num,string str)
{
number1 = num;
text1 = str;
aTimer = new System.Timers.Timer(num*1000);
aTimer.Elapsed += OnTimedEvent;
aTimer.AutoReset = true;
aTimer.Enabled = true;
}
private void OnTimedEvent(object sender, ElapsedEventArgs e)
{
Random r = new Random();
number1 = r.Next(0, 100);
number1 += 1;
this.NotifyPropertyChanged("Number1");
}
public int Number1
{
get { return this.number1; }
set
{
if (this.number1 != value)
{
this.number1 = value;
this.NotifyPropertyChanged("Number1");
}
}
}
public string Text1
{
get { return this.text1; }
set
{
if (this.text1 != value)
{
this.text1 = value;
this.NotifyPropertyChanged("Text1");
}
}
}
public void NotifyPropertyChanged(string propName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}

public MainWindow()
{
InitializeComponent();
lst.ItemsSource = new List<DataContainer>
{
new DataContainer(1, "At: 0,0"),
new DataContainer(2, "At: 1,0"),
new DataContainer(3, "At: 2,0"),
new DataContainer(4, "At: 0,1"),
new DataContainer(5, "At: 1,1"),
new DataContainer(6, "At: 2,1")
}
}
<ItemsControl x:Name="lst" ItemTemplate="{DynamicResource DataTemplate_Level2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformsGrid Columns="3" Rows="2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

I had some sleep and tested out some things and figured out where exactly things are going wrong by adding more borders. Here's the solution that I found myself:
<ItemsControl x:Name="lst" ItemTemplate="{DynamicResource DataTemplate_Level1}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
and the data template:
<DataTemplate x:Key="DataTemplate_Level1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_Level2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>

c# uwp gridview items zindex

In UWP I have GridView. That GridView has ItemTemplate like this:
<Page.Resources>
<DataTemplate x:Key="Template" x:DataType="local:ModelClass">
<local:CustomUserControl
Model="{x:Bind Mode=OneWay}"/>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="gvMain" ItemTemplate="{StaticResource Template}" SelectionChanged="gvMain_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical"
Margin="0,0,0,-10"
MaximumRowsOrColumns="1"
ItemWidth="50"
ItemHeight="50"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
The usercontrol is like this:
<Grid x:Name="gridMain" Width="50" Height="50">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0, 0, -10, 0" Width="20" Height="20" Background="Pink"/>
</Grid>
And in codebehind:
public ModelClass Model
{
get { return (ModelClass)GetValue(ModelProperty); }
set { SetValue(ModelProperty, value); SetBackground(); }
}
public static readonly DependencyProperty ModelProperty =
DependencyProperty.Register("Model", typeof(ModelClass), typeof(CustomUserControl), new PropertyMetadata(new ModelClass()));
private void SetBackground()
{
if (Model == null)
{
return;
}
gridMain.Background = Model.BackgroundColor;
}
public CustomUserControl()
{
this.InitializeComponent();
}
I am populating the GridView like this:
List<ModelClass> list = new List<ModelClass>();
ModelClass mc = new ModelClass();
mc.BackgroundColor = new SolidColorBrush(Colors.Red);
ModelClass mc1 = new ModelClass();
mc1.BackgroundColor = new SolidColorBrush(Colors.Blue);
ModelClass mc2 = new ModelClass();
mc2.BackgroundColor = new SolidColorBrush(Colors.Yellow);
ModelClass mc3 = new ModelClass();
mc3.BackgroundColor = new SolidColorBrush(Colors.Green);
list.Add(mc);
list.Add(mc1);
list.Add(mc2);
list.Add(mc3);
gvMain.ItemsSource = list;
And what it looks like is this:
On each item there is a small square in upper right corner, colored in pink.
When I click on some item, I want that item to overlap every other items, so my pink square will be visible.
How to change Z-index of GridView items in this case?

How to change Z-index of GridView items in this case?
If you want to change the GridViewItem's Z-Index, you might think about using canvas relevant panel as the GridView's ItemsPanel.
Then, in your SelectionChanged event handler method, you could use the Canvas.SetZIndex(UIElement, index) method to set current selected item's Canvas.ZIndex. It would get your effect that you want.
But, if you used the general Canvas control as the GridView's ItemsPanel. You would find that the items would not be shown as the general items list.
As a result, in your case, you also would need to define your custom panel. You could need to rearrange the items in it.
I've made a simple for your reference:
<GridView x:Name="gvMain" SelectionChanged="gvMain_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<local:CustomPanel></local:CustomPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridViewItem >
<Rectangle Fill="Red" Width="50" Height="50"></Rectangle>
</GridViewItem>
<GridViewItem >
<Rectangle Fill="Blue" Width="50" Height="50" ></Rectangle>
</GridViewItem>
<GridViewItem>
<Rectangle Fill="Yellow" Width="50" Height="50"></Rectangle>
</GridViewItem>
</GridView>
public class CustomPanel:Canvas
{
protected override Size MeasureOverride(Size availableSize)
{
Size s = base.MeasureOverride(availableSize);
foreach (UIElement element in this.Children)
{
element.Measure(availableSize);
}
return s;
}
protected override Size ArrangeOverride(Size finalSize)
{
this.Clip = new RectangleGeometry { Rect = new Rect(0, 0, finalSize.Width, finalSize.Height) };
Double position = 0d;
foreach (UIElement item in this.Children)
{
if (item == null)
continue;
Size desiredSize = item.DesiredSize;
if (double.IsNaN(desiredSize.Width) || double.IsNaN(desiredSize.Height)) continue;
var rect = new Rect(0, position, desiredSize.Width, desiredSize.Height);
item.Arrange(rect);
TranslateTransform compositeTransform = new TranslateTransform();
compositeTransform.X = position / 2;
item.RenderTransform = compositeTransform;
position += desiredSize.Width;
}
return finalSize;
}
}
private void gvMain_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
GridViewItem item = (sender as GridView).SelectedItem as GridViewItem;
if (item != null)
{
Canvas.SetZIndex(item,index);
}
}
This just is a simple code sample, you could do more custom behavior in your custom panel.
The following are the effect screenshots:

Binding all System Colors to a ListBox

I'd like to bind all Windows.UI.Colors to a ListBox (ListView?) in a XAML Page, in a Universal Windows App (for Windows 10, in Visual Studio 2015).
I found this way to get all system colors:
Dictionary<string, Windows.UI.Color> Colors()
{
var _Colors = typeof(Windows.UI.Colors)
// using System.Reflection;
.GetRuntimeProperties()
.Select(c => new
{
Color = (Windows.UI.Color)c.GetValue(null),
Name = c.Name
});
return _Colors.ToDictionary(x => x.Name, x => x.Color);
}
I don't know how to bind it to a ListBox
<ListBox ItemsSource="{x:Bind colors}" >
</ListBox>
Ideally the list item text should be the color name, and the list item background the color value.

An alternative approach to #Romasz's answer:
Change the Color() method to a property, and return a dictionary with SolidColorBrush values instead of Color like so:
public Dictionary<string, SolidColorBrush> Colors
{
get
{
var _Colors = typeof(Windows.UI.Colors)
// using System.Reflection;
.GetRuntimeProperties()
.Select(c => new
{
Color = new SolidColorBrush((Windows.UI.Color)c.GetValue(null)),
Name = c.Name
});
return _Colors.ToDictionary(x => x.Name, x => x.Color);
}
}
Then, in the XAML, change the list box to this:
<ListBox ItemsSource="{x:Bind Colors}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="{Binding Value}">
<TextBlock Text="{Binding Key}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

There is couple of things you need to improve about binding (and I would advise to read some more at MSDN). As for your code - in xaml you will need to declare how your ItemTemplate will look like and bind to a property within DataContext. You will also need probably a converter to convert Color to Brush:
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{Binding MyColors}">
<ListView.Resources>
<local:ColorToBrush x:Key="ColorToBrush"/>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Color, Converter={StaticResource ColorToBrush}}">
<TextBlock Text="{Binding Name}"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
And the code behind - converter class, the suitable property and setting DataContext in constructor:
public class ColorToBrush : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language) => new SolidColorBrush((Windows.UI.Color)value);
public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); }
}
public sealed partial class MainPage : Page
{
// this is the shortcut of {get { return ... }}
public Array MyColors => typeof(Windows.UI.Colors).GetRuntimeProperties()
.Select(c => new
{
Color = (Windows.UI.Color)c.GetValue(null),
Name = c.Name
}).ToArray();
public MainPage()
{
this.InitializeComponent();
DataContext = this;
}
}
Of course you can also bind to Dictionary, then you will have to exchange in XAML bindings: Name -> Key and Color -> Value.

public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
List<SystemColor> legacyBrushes = new List<SystemColor>();
foreach(var b in this.LegacyBrushes)
{
SystemColor c = new SystemColor();
c.ColorName = b;
c.ColorBrush = Application.Current.Resources[b] as SolidColorBrush;
legacyBrushes.Add(c);
}
foreach (var b in this.SystemBrushes)
{
SystemColor c = new SystemColor();
c.ColorName = b;
c.ColorBrush = Application.Current.Resources[b] as SolidColorBrush;
legacyBrushes.Add(c);
}
this._lvColors.ItemsSource = legacyBrushes;
}
public class SystemColor
{
public string ColorName { get; set; }
public SolidColorBrush ColorBrush { get; set; }
}
public string[] LegacyBrushes = new string[] {
"AppBarBackgroundThemeBrush",
"AppBarBorderThemeBrush",
"AppBarItemBackgroundThemeBrush",
"AppBarItemDisabledForegroundThemeBrush",
"AppBarItemForegroundThemeBrush",
"AppBarItemPointerOverBackgroundThemeBrush",
"AppBarItemPointerOverForegroundThemeBrush",
"AppBarItemPressedForegroundThemeBrush",
"AppBarSeparatorForegroundThemeBrush",
"AppBarToggleButtonCheckedBackgroundThemeBrush",
"AppBarToggleButtonCheckedBorderThemeBrush",
"AppBarToggleButtonCheckedDisabledBackgroundThemeBrush",
"AppBarToggleButtonCheckedDisabledBorderThemeBrush",
"AppBarToggleButtonCheckedDisabledForegroundThemeBrush",
"AppBarToggleButtonCheckedForegroundThemeBrush",
"AppBarToggleButtonCheckedPointerOverBackgroundThemeBrush",
"AppBarToggleButtonCheckedPointerOverBorderThemeBrush",
"AppBarToggleButtonCheckedPressedBackgroundThemeBrush",
"AppBarToggleButtonCheckedPressedBorderThemeBrush",
"AppBarToggleButtonCheckedPressedForegroundThemeBrush",
"AppBarToggleButtonPointerOverBackgroundThemeBrush",
"ApplicationForegroundThemeBrush",
"ApplicationHeaderForegroundThemeBrush",
"ApplicationPageBackgroundThemeBrush",
"ApplicationPointerOverForegroundThemeBrush",
"ApplicationPressedForegroundThemeBrush",
"ApplicationSecondaryForegroundThemeBrush",
"AutoSuggestBackgroundThemeBrush",
"BackButtonBackgroundThemeBrush",
"BackButtonDisabledForegroundThemeBrush",
"BackButtonForegroundThemeBrush",
"BackButtonPointerOverBackgroundThemeBrush",
"BackButtonPointerOverForegroundThemeBrush",
"BackButtonPressedForegroundThemeBrush",
"ButtonBackgroundThemeBrush",
"ButtonBorderThemeBrush",
"ButtonDisabledBackgroundThemeBrush",
"ButtonDisabledBorderThemeBrush",
"ButtonDisabledForegroundThemeBrush",
"ButtonForegroundThemeBrush",
"ButtonPointerOverBackgroundThemeBrush",
"ButtonPointerOverForegroundThemeBrush",
"ButtonPressedBackgroundThemeBrush",
"ButtonPressedForegroundThemeBrush",
"CheckBoxBackgroundThemeBrush",
"CheckBoxBorderThemeBrush",
"CheckBoxContentDisabledForegroundThemeBrush",
"CheckBoxContentForegroundThemeBrush",
"CheckBoxDisabledBackgroundThemeBrush",
"CheckBoxDisabledBorderThemeBrush",
"CheckBoxDisabledForegroundThemeBrush",
"CheckBoxForegroundThemeBrush",
"CheckBoxPointerOverBackgroundThemeBrush",
"CheckBoxPointerOverBorderThemeBrush",
"CheckBoxPointerOverForegroundThemeBrush",
"CheckBoxPressedBackgroundThemeBrush",
"CheckBoxPressedBorderThemeBrush",
"CheckBoxPressedForegroundThemeBrush",
"ComboBoxArrowDisabledForegroundThemeBrush",
"ComboBoxArrowForegroundThemeBrush",
"ComboBoxArrowPressedForegroundThemeBrush",
"ComboBoxBackgroundThemeBrush",
"ComboBoxBorderThemeBrush",
"ComboBoxDisabledBackgroundThemeBrush",
"ComboBoxDisabledBorderThemeBrush",
"ComboBoxDisabledForegroundThemeBrush",
"ComboBoxFocusedBackgroundThemeBrush",
"ComboBoxFocusedBorderThemeBrush",
"ComboBoxFocusedForegroundThemeBrush",
"ComboBoxForegroundThemeBrush",
"ComboBoxHeaderForegroundThemeBrush",
"ComboBoxItemDisabledForegroundThemeBrush",
"ComboBoxItemPointerOverBackgroundThemeBrush",
"ComboBoxItemPointerOverForegroundThemeBrush",
"ComboBoxItemPressedBackgroundThemeBrush",
"ComboBoxItemPressedForegroundThemeBrush",
"ComboBoxItemSelectedBackgroundThemeBrush",
"ComboBoxItemSelectedDisabledBackgroundThemeBrush",
"ComboBoxItemSelectedDisabledForegroundThemeBrush",
"ComboBoxItemSelectedForegroundThemeBrush",
"ComboBoxItemSelectedPointerOverBackgroundThemeBrush",
"ComboBoxPlaceholderTextForegroundThemeBrush",
"ComboBoxPointerOverBackgroundThemeBrush",
"ComboBoxPointerOverBorderThemeBrush",
"ComboBoxPopupBackgroundThemeBrush",
"ComboBoxPopupBorderThemeBrush",
"ComboBoxPopupForegroundThemeBrush",
"ComboBoxPressedBackgroundThemeBrush",
"ComboBoxPressedBorderThemeBrush",
"ComboBoxPressedHighlightThemeBrush",
"ComboBoxPressedForegroundThemeBrush",
"ComboBoxSelectedBackgroundThemeBrush",
"ComboBoxSelectedPointerOverBackgroundThemeBrush",
"ContentDialogBackgroundThemeBrush",
"ContentDialogBorderThemeBrush",
"ContentDialogContentForegroundBrush",
"ContentDialogDimmingThemeBrush",
"DatePickerHeaderForegroundThemeBrush",
"DatePickerForegroundThemeBrush",
"DefaultTextForegroundThemeBrush",
"FlipViewButtonBackgroundThemeBrush",
"FlipViewButtonBorderThemeBrush",
"FlipViewButtonForegroundThemeBrush",
"FlipViewButtonPointerOverBackgroundThemeBrush",
"FlipViewButtonPointerOverBorderThemeBrush",
"FlipViewButtonPointerOverForegroundThemeBrush",
"FlipViewButtonPressedBackgroundThemeBrush",
"FlipViewButtonPressedBorderThemeBrush",
"FlipViewButtonPressedForegroundThemeBrush",
"FlyoutBackgroundThemeBrush",
"FlyoutBorderThemeBrush",
"FocusVisualBlackStrokeThemeBrush",
"FocusVisualWhiteStrokeThemeBrush",
"HyperlinkButtonBackgroundThemeBrush",
"HyperlinkButtonBorderThemeBrush",
"HyperlinkDisabledThemeBrush",
"HyperlinkForegroundThemeBrush",
"HyperlinkPointerOverForegroundThemeBrush",
"HyperlinkPressedForegroundThemeBrush",
"HubSectionHeaderPointerOverForegroundThemeBrush",
"HubSectionHeaderPressedForegroundThemeBrush",
"IMECandidateBackgroundThemeBrush",
"IMECandidateForegroundThemeBrush",
"IMECandidatePointerOverBackgroundThemeBrush",
"IMECandidatePointerOverForegroundThemeBrush",
"IMECandidateSecondaryForegroundThemeBrush",
"IMECandidateSelectedBackgroundThemeBrush",
"IMECandidateSelectedForegroundThemeBrush",
"IMECandidateListBackgroundThemeBrush",
"IMECandidateListPagingButtonBackgroundThemeBrush",
"IMECandidateListPagingButtonBorderThemeBrush",
"IMECandidateListPagingButtonForegroundThemeBrush",
"IMECandidateListPagingButtonPointerOverBackgroundThemeBrush",
"IMECandidateListPagingButtonPointerOverForegroundThemeBrush",
"IMECandidateListPagingButtonPressedBackgroundThemeBrush",
"IMECandidateListPagingButtonPressedForegroundThemeBrush",
"JumpListDefaultEnabledForeground",
"JumpListDefaultEnabledBackground",
"JumpListDefaultDisabledForeground",
"JumpListDefaultDisabledBackground",
"ListBoxBackgroundThemeBrush",
"ListBoxBorderThemeBrush",
"ListBoxDisabledForegroundThemeBrush",
"ListBoxFocusBackgroundThemeBrush",
"ListBoxForegroundThemeBrush",
"ListBoxItemDisabledForegroundThemeBrush",
"ListBoxItemPointerOverBackgroundThemeBrush",
"ListBoxItemPointerOverForegroundThemeBrush",
"ListBoxItemPressedBackgroundThemeBrush",
"ListBoxItemPressedForegroundThemeBrush",
"ListBoxItemSelectedBackgroundThemeBrush",
"ListBoxItemSelectedDisabledBackgroundThemeBrush",
"ListBoxItemSelectedDisabledForegroundThemeBrush",
"ListBoxItemSelectedForegroundThemeBrush",
"ListBoxItemSelectedPointerOverBackgroundThemeBrush",
"ListPickerFlyoutPresenterSelectedItemForegroundThemeBrush",
"ListPickerFlyoutPresenterSelectedItemBackgroundThemeBrush",
"ListViewGroupHeaderForegroundThemeBrush",
"ListViewGroupHeaderPointerOverForegroundThemeBrush",
"ListViewGroupHeaderPressedForegroundThemeBrush",
"ListViewItemCheckHintThemeBrush",
"ListViewItemCheckSelectingThemeBrush",
"ListViewItemCheckThemeBrush",
"ListViewItemDragBackgroundThemeBrush",
"ListViewItemDragForegroundThemeBrush",
"ListViewItemFocusBorderThemeBrush",
"ListViewItemOverlayBackgroundThemeBrush",
"ListViewItemOverlayForegroundThemeBrush",
"ListViewItemOverlaySecondaryForegroundThemeBrush",
"ListViewItemPlaceholderBackgroundThemeBrush",
"ListViewItemPointerOverBackgroundThemeBrush",
"ListViewItemSelectedBackgroundThemeBrush",
"ListViewItemSelectedForegroundThemeBrush",
"ListViewItemSelectedPointerOverBackgroundThemeBrush",
"ListViewItemSelectedPointerOverBorderThemeBrush",
"LoopingSelectorForegroundThemeBrush",
"LoopingSelectorSelectionBackgroundThemeBrush",
"LoopingSelectorSelectionForegroundThemeBrush",
"MediaButtonForegroundThemeBrush",
"MediaButtonBackgroundThemeBrush",
"MediaButtonPointerOverForegroundThemeBrush",
"MediaButtonPointerOverBackgroundThemeBrush",
"MediaButtonPressedForegroundThemeBrush",
"MediaButtonPressedBackgroundThemeBrush",
"MediaButtonPressedBorderThemeBrush",
"MediaControlPanelVideoThemeBrush",
"MediaControlPanelAudioThemeBrush",
"MediaDownloadProgressIndicatorThemeBrush",
"MediaErrorBackgroundThemeBrush",
"MediaTextThemeBrush",
"MenuFlyoutItemFocusedBackgroundThemeBrush",
"MenuFlyoutItemFocusedForegroundThemeBrush",
"MenuFlyoutItemDisabledForegroundThemeBrush",
"MenuFlyoutItemPointerOverBackgroundThemeBrush",
"MenuFlyoutItemPointerOverForegroundThemeBrush",
"MenuFlyoutItemPressedBackgroundThemeBrush",
"MenuFlyoutItemPressedForegroundThemeBrush",
"PivotForegroundThemeBrush",
"PivotHeaderBackgroundSelectedBrush",
"PivotHeaderBackgroundUnselectedBrush",
"PivotHeaderForegroundSelectedBrush",
"PivotHeaderForegroundUnselectedBrush",
"PivotNavButtonBackgroundThemeBrush",
"PivotNavButtonBorderThemeBrush",
"PivotNavButtonForegroundThemeBrush",
"PivotNavButtonPointerOverBackgroundThemeBrush",
"PivotNavButtonPointerOverBorderThemeBrush",
"PivotNavButtonPointerOverForegroundThemeBrush",
"PivotNavButtonPressedBackgroundThemeBrush",
"PivotNavButtonPressedBorderThemeBrush",
"PivotNavButtonPressedForegroundThemeBrush",
"MenuFlyoutSeparatorThemeBrush",
"ProgressBarBackgroundThemeBrush",
"ProgressBarBorderThemeBrush",
"ProgressBarForegroundThemeBrush",
"ProgressBarIndeterminateForegroundThemeBrush",
"RadioButtonBackgroundThemeBrush",
"RadioButtonBorderThemeBrush",
"RadioButtonContentDisabledForegroundThemeBrush",
"RadioButtonContentForegroundThemeBrush",
"RadioButtonDisabledBackgroundThemeBrush",
"RadioButtonDisabledBorderThemeBrush",
"RadioButtonDisabledForegroundThemeBrush",
"RadioButtonForegroundThemeBrush",
"RadioButtonPointerOverBackgroundThemeBrush",
"RadioButtonPointerOverBorderThemeBrush",
"RadioButtonPointerOverForegroundThemeBrush",
"RadioButtonPressedBackgroundThemeBrush",
"RadioButtonPressedBorderThemeBrush",
"RadioButtonPressedForegroundThemeBrush",
"RepeatButtonBorderThemeBrush",
"RepeatButtonDisabledBackgroundThemeBrush",
"RepeatButtonDisabledBorderThemeBrush",
"RepeatButtonDisabledForegroundThemeBrush",
"RepeatButtonForegroundThemeBrush",
"RepeatButtonPointerOverBackgroundThemeBrush",
"RepeatButtonPointerOverForegroundThemeBrush",
"RepeatButtonPressedBackgroundThemeBrush",
"RepeatButtonPressedForegroundThemeBrush",
"ScrollBarButtonForegroundThemeBrush",
"ScrollBarButtonPointerOverBackgroundThemeBrush",
"ScrollBarButtonPointerOverBorderThemeBrush",
"ScrollBarButtonPointerOverForegroundThemeBrush",
"ScrollBarButtonPressedBackgroundThemeBrush",
"ScrollBarButtonPressedBorderThemeBrush",
"ScrollBarButtonPressedForegroundThemeBrush",
"ScrollBarPanningBackgroundThemeBrush",
"ScrollBarPanningBorderThemeBrush",
"ScrollBarThumbBackgroundThemeBrush",
"ScrollBarThumbBorderThemeBrush",
"ScrollBarThumbPointerOverBackgroundThemeBrush",
"ScrollBarThumbPointerOverBorderThemeBrush",
"ScrollBarThumbPressedBackgroundThemeBrush",
"ScrollBarThumbPressedBorderThemeBrush",
"ScrollBarTrackBackgroundThemeBrush",
"ScrollBarTrackBorderThemeBrush",
"SearchBoxBackgroundThemeBrush",
"SearchBoxBorderThemeBrush",
"SearchBoxDisabledBackgroundThemeBrush",
"SearchBoxDisabledTextThemeBrush",
"SearchBoxDisabledBorderThemeBrush",
"SearchBoxPointerOverBackgroundThemeBrush",
"SearchBoxPointerOverTextThemeBrush",
"SearchBoxPointerOverBorderThemeBrush",
"SearchBoxFocusedBackgroundThemeBrush",
"SearchBoxFocusedTextThemeBrush",
"SearchBoxFocusedBorderThemeBrush",
"SearchBoxButtonBackgroundThemeBrush",
"SearchBoxButtonForegroundThemeBrush",
"SearchBoxButtonPointerOverForegroundThemeBrush",
"SearchBoxButtonPointerOverBackgroundThemeBrush",
"SearchBoxSeparatorSuggestionForegroundThemeBrush",
"SearchBoxHitHighlightForegroundThemeBrush",
"SearchBoxHitHighlightSelectedForegroundThemeBrush",
"SearchBoxIMECandidateListSeparatorThemeBrush",
"SearchBoxForegroundThemeBrush",
"SemanticZoomButtonBackgroundThemeBrush",
"SemanticZoomButtonBorderThemeBrush",
"SemanticZoomButtonForegroundThemeBrush",
"SemanticZoomButtonPointerOverBackgroundThemeBrush",
"SemanticZoomButtonPointerOverBorderThemeBrush",
"SemanticZoomButtonPointerOverForegroundThemeBrush",
"SemanticZoomButtonPressedBackgroundThemeBrush",
"SemanticZoomButtonPressedBorderThemeBrush",
"SemanticZoomButtonPressedForegroundThemeBrush",
"SettingsFlyoutBackgroundThemeBrush",
"SettingsFlyoutBackButtonPointerOverBackgroundThemeBrush",
"SettingsFlyoutHeaderBackgroundThemeBrush",
"SettingsFlyoutHeaderForegroundThemeBrush",
"SliderBorderThemeBrush",
"SliderDisabledBorderThemeBrush",
"SliderThumbBackgroundThemeBrush",
"SliderThumbBorderThemeBrush",
"SliderThumbDisabledBackgroundThemeBrush",
"SliderThumbPointerOverBackgroundThemeBrush",
"SliderThumbPointerOverBorderThemeBrush",
"SliderThumbPressedBackgroundThemeBrush",
"SliderThumbPressedBorderThemeBrush",
"SliderTickMarkInlineBackgroundThemeBrush",
"SliderTickMarkInlineDisabledForegroundThemeBrush",
"SliderTickmarkOutsideBackgroundThemeBrush",
"SliderTickMarkOutsideDisabledForegroundThemeBrush",
"SliderTrackBackgroundThemeBrush",
"SliderTrackDecreaseBackgroundThemeBrush",
"SliderTrackDecreaseDisabledBackgroundThemeBrush",
"SliderTrackDecreasePointerOverBackgroundThemeBrush",
"SliderTrackDecreasePressedBackgroundThemeBrush",
"SliderTrackDisabledBackgroundThemeBrush",
"SliderTrackPointerOverBackgroundThemeBrush",
"SliderTrackPressedBackgroundThemeBrush",
"SliderHeaderForegroundThemeBrush",
"TextBoxForegroundHeaderThemeBrush",
"TextBoxPlaceholderTextThemeBrush",
"TextBoxBackgroundThemeBrush",
"TextSelectionHighlightColorThemeBrush",
"TextBoxBorderThemeBrush",
"TextBoxButtonBackgroundThemeBrush",
"TextBoxButtonBorderThemeBrush",
"TextBoxButtonForegroundThemeBrush",
"TextBoxButtonPointerOverBackgroundThemeBrush",
"TextBoxButtonPointerOverBorderThemeBrush",
"TextBoxButtonPointerOverForegroundThemeBrush",
"TextBoxButtonPressedBackgroundThemeBrush",
"TextBoxButtonPressedBorderThemeBrush",
"TextBoxButtonPressedForegroundThemeBrush",
"TextBoxDisabledBackgroundThemeBrush",
"TextBoxDisabledBorderThemeBrush",
"TextBoxDisabledForegroundThemeBrush",
"TextBoxForegroundThemeBrush",
"ThumbBackgroundThemeBrush",
"ThumbBorderThemeBrush",
"ThumbPointerOverBackgroundThemeBrush",
"ThumbPointerOverBorderThemeBrush",
"ThumbPressedBackgroundThemeBrush",
"ThumbPressedBorderThemeBrush",
"TimePickerHeaderForegroundThemeBrush",
"TimePickerForegroundThemeBrush",
"ToggleButtonBackgroundThemeBrush",
"ToggleButtonBorderThemeBrush",
"ToggleButtonCheckedBackgroundThemeBrush",
"ToggleButtonCheckedBorderThemeBrush",
"ToggleButtonCheckedDisabledBackgroundThemeBrush",
"ToggleButtonCheckedDisabledForegroundThemeBrush",
"ToggleButtonCheckedForegroundThemeBrush",
"ToggleButtonCheckedPointerOverBackgroundThemeBrush",
"ToggleButtonCheckedPointerOverBorderThemeBrush",
"ToggleButtonCheckedPressedBackgroundThemeBrush",
"ToggleButtonCheckedPressedBorderThemeBrush",
"ToggleButtonCheckedPressedForegroundThemeBrush",
"ToggleButtonDisabledBorderThemeBrush",
"ToggleButtonDisabledForegroundThemeBrush",
"ToggleButtonForegroundThemeBrush",
"ToggleButtonPointerOverBackgroundThemeBrush",
"ToggleButtonPressedBackgroundThemeBrush",
"ToggleButtonPressedForegroundThemeBrush",
"ToggleSwitchCurtainBackgroundThemeBrush",
"ToggleSwitchCurtainDisabledBackgroundThemeBrush",
"ToggleSwitchCurtainPointerOverBackgroundThemeBrush",
"ToggleSwitchCurtainPressedBackgroundThemeBrush",
"ToggleSwitchDisabledForegroundThemeBrush",
"ToggleSwitchForegroundThemeBrush",
"ToggleSwitchHeaderDisabledForegroundThemeBrush",
"ToggleSwitchHeaderForegroundThemeBrush",
"ToggleSwitchOuterBorderBorderThemeBrush",
"ToggleSwitchOuterBorderDisabledBorderThemeBrush",
"ToggleSwitchThumbBackgroundThemeBrush",
"ToggleSwitchThumbBorderThemeBrush",
"ToggleSwitchThumbDisabledBackgroundThemeBrush",
"ToggleSwitchThumbDisabledBorderThemeBrush",
"ToggleSwitchThumbPointerOverBackgroundThemeBrush",
"ToggleSwitchThumbPointerOverBorderThemeBrush",
"ToggleSwitchThumbPressedBackgroundThemeBrush",
"ToggleSwitchThumbPressedForegroundThemeBrush",
"ToggleSwitchTrackBackgroundThemeBrush",
"ToggleSwitchTrackBorderThemeBrush",
"ToggleSwitchTrackDisabledBackgroundThemeBrush",
"ToggleSwitchTrackPointerOverBackgroundThemeBrush",
"ToggleSwitchTrackPressedBackgroundThemeBrush",
"ToolTipBackgroundThemeBrush",
"ToolTipBorderThemeBrush",
"ToolTipForegroundThemeBrush",
};
public string[] SystemBrushes = new string[] {
"SystemControlBackgroundAccentBrush",
"SystemControlBackgroundAltHighBrush",
"SystemControlBackgroundAltMediumHighBrush",
"SystemControlBackgroundAltMediumLowBrush",
"SystemControlBackgroundBaseHighBrush",
"SystemControlBackgroundBaseLowBrush",
"SystemControlBackgroundBaseMediumBrush",
"SystemControlBackgroundBaseMediumHighBrush",
"SystemControlBackgroundBaseMediumLowBrush",
"SystemControlBackgroundChromeBlackHighBrush",
"SystemControlBackgroundChromeBlackMediumBrush",
"SystemControlBackgroundChromeMediumBrush",
"SystemControlBackgroundChromeMediumLowBrush",
"SystemControlBackgroundChromeWhiteBrush",
"SystemControlBackgroundListLowBrush",
"SystemControlBackgroundListMediumBrush",
"SystemControlDisabledAccentBrush",
"SystemControlDisabledBaseHighBrush",
"SystemControlDisabledBaseLowBrush",
"SystemControlDisabledBaseMediumLowBrush",
"SystemControlDisabledChromeDisabledHighBrush",
"SystemControlDisabledChromeDisabledLowBrush",
"SystemControlDisabledChromeHighBrush",
"SystemControlDisabledChromeMediumLowBrush",
"SystemControlDisabledListMediumBrush",
"SystemControlDisabledTransparentBrush",
"SystemControlForegroundAccentBrush",
"SystemControlForegroundAltHighBrush",
"SystemControlForegroundAltMediumHighBrush",
"SystemControlForegroundBaseHighBrush",
"SystemControlForegroundBaseLowBrush",
"SystemControlForegroundBaseMediumBrush",
"SystemControlForegroundBaseMediumHighBrush",
"SystemControlForegroundBaseMediumLowBrush",
"SystemControlForegroundChromeBlackHighBrush",
"SystemControlForegroundChromeHighBrush",
"SystemControlForegroundChromeMediumBrush",
"SystemControlForegroundChromeWhiteBrush",
"SystemControlForegroundChromeDisabledLowBrush",
"SystemControlForegroundListLowBrush",
"SystemControlForegroundListMediumBrush",
"SystemControlForegroundTransparentBrush",
"SystemControlForegroundChromeBlackMediumBrush",
"SystemControlForegroundChromeBlackMediumLowBrush",
"SystemControlHighlightAccentBrush",
"SystemControlHighlightAltAccentBrush",
"SystemControlHighlightAltAltHighBrush",
"SystemControlHighlightAltBaseHighBrush",
"SystemControlHighlightAltBaseLowBrush",
"SystemControlHighlightAltBaseMediumBrush",
"SystemControlHighlightAltBaseMediumHighBrush",
"SystemControlHighlightAltAltMediumHighBrush",
"SystemControlHighlightAltBaseMediumLowBrush",
"SystemControlHighlightAltListAccentHighBrush",
"SystemControlHighlightAltListAccentLowBrush",
"SystemControlHighlightAltListAccentMediumBrush",
"SystemControlHighlightAltChromeWhiteBrush",
"SystemControlHighlightAltTransparentBrush",
"SystemControlHighlightBaseHighBrush",
"SystemControlHighlightBaseLowBrush",
"SystemControlHighlightBaseMediumBrush",
"SystemControlHighlightBaseMediumHighBrush",
"SystemControlHighlightBaseMediumLowBrush",
"SystemControlHighlightChromeAltLowBrush",
"SystemControlHighlightChromeHighBrush",
"SystemControlHighlightListAccentHighBrush",
"SystemControlHighlightListAccentLowBrush",
"SystemControlHighlightListAccentMediumBrush",
"SystemControlHighlightListMediumBrush",
"SystemControlHighlightListLowBrush",
"SystemControlHighlightTransparentBrush",
"SystemControlHyperlinkTextBrush",
"SystemControlHyperlinkBaseHighBrush",
"SystemControlHyperlinkBaseMediumBrush",
"SystemControlHyperlinkBaseMediumHighBrush",
"SystemControlPageBackgroundAltMediumBrush",
"SystemControlPageBackgroundMediumAltMediumBrush",
"SystemControlPageBackgroundBaseLowBrush",
"SystemControlPageBackgroundBaseMediumBrush",
"SystemControlPageBackgroundListLowBrush",
"SystemControlPageBackgroundChromeLowBrush",
"SystemControlPageTextBaseHighBrush",
"SystemControlPageTextBaseMediumBrush",
"SystemControlPageTextChromeBlackMediumLowBrush",
};
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
CheckBox cb = sender as CheckBox;
Frame rootFrame = Window.Current.Content as Frame;
rootFrame.RequestedTheme = cb.IsChecked.Value ? ElementTheme.Dark : ElementTheme.Light;
}
<ListView Name="_lvColors" SelectionMode="None" Margin="0 30 0 0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ColorName}" VerticalAlignment="Center" IsTextSelectionEnabled="True" Margin="10 0"/>
<Grid Background="{Binding ColorBrush}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
<CheckBox Content="Theme" Checked="CheckBox_Checked" Unchecked="CheckBox_Checked" HorizontalAlignment="Center" VerticalAlignment="Top"/>

vertically scrolling gridview XAML windows store app

how to edit GRIDVIEW in windows store app xaml so that we can make it scroll vertically instead of horizontal.
am using XAML should we manually make a new user element using scroll-view or is there any simple way to achieve this with windows store app .
<GridView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding imagelist}">
<GridView.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Width="250" Height="250" Tapped="Grid_Tapped">
<Image Source="{Binding imsourceurl}"/>
</Grid>
</DataTemplate>
</GridView.Resources>
<GridView.ItemTemplate>
<StaticResource ResourceKey="DataTemplate1"/>
</GridView.ItemTemplate>
</GridView>

solved created custom grid-view template
public class AdaptableGridView : GridView
{
// default itemWidth
private const double itemWidth = 100.00;
public double ItemWidth
{
get { return (double)GetValue(ItemWidthProperty); }
set { SetValue(ItemWidthProperty, value); }
}
public static readonly DependencyProperty ItemWidthProperty =
DependencyProperty.Register("ItemWidth", typeof(double), typeof(AdaptableGridView), new PropertyMetadata(itemWidth));
// default max number of rows or columns
private const int maxRowsOrColumns = 3;
public int MaxRowsOrColumns
{
get { return (int)GetValue(MaxRowColProperty); }
set { SetValue(MaxRowColProperty, value); }
}
public static readonly DependencyProperty MaxRowColProperty =
DependencyProperty.Register("MaxRowsOrColumns", typeof(int), typeof(AdaptableGridView), new PropertyMetadata(maxRowsOrColumns));
public AdaptableGridView()
{
this.SizeChanged += MyGridViewSizeChanged;
}
private void MyGridViewSizeChanged(object sender, SizeChangedEventArgs e)
{
// Calculate the proper max rows or columns based on new size
this.MaxRowsOrColumns = this.ItemWidth > 0 ? Convert.ToInt32(Math.Floor(e.NewSize.Width / this.ItemWidth)) : maxRowsOrColumns;
}
}
xaml:
<local:AdaptableGridView ItemWidth="250" x:Name="tumbview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ItemsSource="{Binding imagelist}" SelectionChanged="GridView_SelectionChanged" Margin="50,0,0,0" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal"
ItemWidth="{Binding ElementName=tumbview, Path=ItemWidth}"
MaximumRowsOrColumns="{Binding ElementName=tumbview, Path=MaxRowsOrColumns}"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
nice tutorial at:custom grid view tutorial

I found the easiest way was just to use a ListView and set the items to be a wrappedgrid.
This works for me
<ListView
Width="1300"
Height="1000"
Margin="20,0,20,0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Check out http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

Binding data in listview itemtemplate using style

I cannot bind my sample data to textblocks in stackpanel, which I defined in resources. I think that I use style in wrong way, because I receive toString() method instead of class binded fields.
That's my resources with defined style:
<UserControl.Resources>
<ItemsPanelTemplate x:Key="VirtualizingStackPanelTemplate">
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
<ListView x:Key="ListBoxTemplate" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<!--<ListBoxItem Background="DarkOrchid" Margin="1,1, 5,5" Height="400" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">-->
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Title}"/>
<TextBlock FontSize="20" Text="{Binding Desc}"/>
</StackPanel>
<!--</ListBoxItem>-->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</UserControl.Resources>
Here is my method in which i add listview programatically:
long rowCount = ContentGridFullView.RowDefinitions.LongCount();
if (rowCount > 8) return;
var c1 = new RowDefinition { Height = new GridLength(1, GridUnitType.Star) };
ContentGridFullView.RowDefinitions.Add(c1);
rowCount = ContentGridFullView.RowDefinitions.LongCount();
TextBlock tb = new TextBlock {Text = "TEXTBLOCK ITEM = " + (rowCount - 1), FontSize = 40};
Viewbox vb = new Viewbox { Child = tb };
if (rowCount > 8) return;
Grid.SetRow(vb, Convert.ToInt32(rowCount-1));
Grid.SetColumn(vb, 1);
ListView lb = new ListView();
lb.Style = Resources["ListBoxTemplate"] as Style;
lb.ItemsPanel = (ItemsPanelTemplate) Resources["VirtualizingStackPanelTemplate"];
var products = new ObservableCollection<Product>() { new Product("ASDASDSADAS", "VCBVCBVCBVCBC"), new Product("ASDASDSADAS", "VCBVCBVCBVCBC"), new Product("ASDASDSADAS", "VCBVCBVCBVCBC"), new Product("ASDASDSADAS", "VCBVCBVCBVCBC") };
lb.ItemsSource = products;
ContentGridFullView.Children.Add(lb);
ContentGridFullView.Children.Add(vb);
Grid.SetRow(lb, Convert.ToInt32(rowCount - 1));
Grid.SetColumn(lb, 2);
And my short class that I want to bind:
public class Product
{
public string Title { get; set; }
public string Desc { get; set; }
public Product(string title, string desc)
{
Title = title;
Desc = desc;
}
public override string ToString()
{
return "I see that message instead of Title and Desc";
}
}
Can someone tell me what's wrong with this code? Thank you.

Create your Observable collection as a property (getter/setter):
ObservableCollection<Product> _products;
public ObservableCollection<Product> products
{
get{return _products;}
set
{
_products=value;
PropertyChanged("products");
}
}
The property changed event will be need to indicate that the collection has changed,its needed when your using ObservableCollection. You'll need to read more about it.You can add items to the products collection by using :
products.Add(Product_object)
And your xaml code will have the itemsSource as follows:
<ListView x:Key="ListBoxTemplate" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding products}">
<ListView.ItemTemplate>
<DataTemplate>
<!--<ListBoxItem Background="DarkOrchid" Margin="1,1, 5,5" Height="400" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">-->
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Title}"/>
<TextBlock FontSize="20" Text="{Binding Desc}"/>
</StackPanel>
<!--</ListBoxItem>-->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The following statement is important in your xaml code so that your xaml code will know where to look for the data.
DataContext="{Binding RelativeSource={RelativeSource Self}, Path=x}
First try and create a static list and check if data is getting initialized properly and then you can try creating listviews dynamically. But the code above will be the same thing you will have to do create dynamic listviews.