Add Tabs and TabItem content from ViewModel - c#

I have a ViewModel from which I am trying to populate a TabControl. What I want is to create tabs and all the controls in tab items from the view model.
Right now Tabs are created correctly, but the user control "CustomList" (added from Collection in the Tab class) is being added vertically in each tab and is stretched horizontally. What I want to do is to add CustomLists horizontally and it should stretch vertically.
My question is how can I add CustomList from the Collection in ViewModel in TabItem horizontally and stretched vertically?
Thanks in advance.
The code is:
MainWindow.xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
xmlns:models="clr-namespace:WpfApplication1.Models"
xmlns:comps="clr-namespace:WpfApplication1.Components"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<models:ViewModel />
</Window.DataContext>
<Grid>
<TabControl ItemsSource="{Binding Tabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<DockPanel>
<!-- this is where user controls are added vertically -->
<ItemsControl ItemsSource="{Binding CustomLists}" DockPanel.Dock="Left" />
</DockPanel>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
CustomList.xaml
<UserControl x:Class="WpfApplication1.Components.CustomList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication1.Components"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<DockPanel LastChildFill="True">
<Label DockPanel.Dock="Top" Content="Title" x:Name="title" />
<ListView x:Name="listView" />
</DockPanel>
</UserControl>
Tab.cs
namespace WpfApplication1.Models
{
public class Tab
{
public String Header { get; set; }
public ObservableCollection<CustomList> CustomLists { get; set; } = new ObservableCollection<CustomList>();
}
}
ViewModel.cs
namespace WpfApplication1.Models
{
public class ViewModel
{
public ObservableCollection<Tab> Tabs { get; set; } = new ObservableCollection<Tab>();
public ViewModel()
{
var tab1 = new Tab();
tab1.Header = "Tab 1";
tab1.CustomLists.Add(new Components.CustomList());
tab1.CustomLists.Add(new Components.CustomList());
tab1.CustomLists.Add(new Components.CustomList());
Tabs.Add(tab1);
var tab2 = new Tab();
tab2.Header = "Tab 2";
tab2.CustomLists.Add(new Components.CustomList());
Tabs.Add(tab2);
var tab3 = new Tab();
tab3.Header = "Tab 3";
tab3.CustomLists.Add(new Components.CustomList());
tab3.CustomLists.Add(new Components.CustomList());
Tabs.Add(tab3);
}
}
}
---EDIT--- Based on Rachel's comment
MainWindow.xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
xmlns:models="clr-namespace:WpfApplication1.Models"
xmlns:comps="clr-namespace:WpfApplication1.Components"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<models:ViewModel />
</Window.DataContext>
<Grid>
<TabControl ItemsSource="{Binding Tabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding CustomLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
CustomListControl.xaml
**<UserControl x:Class="WpfApplication1.Components.CustomListControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication1.Components"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<DockPanel LastChildFill="True">
<Label DockPanel.Dock="Top" Content="Title" x:Name="title" />
<ListView x:Name="listView" Width="300" />
</DockPanel>
</UserControl>**
CustomList.cs
namespace WpfApplication1.Models
{
public class CustomList
{
public String Title { get; set; }
}
}
Tab.cs
namespace WpfApplication1.Models
{
public class Tab
{
public String Header { get; set; }
public ObservableCollection<CustomList> CustomLists { get; set; } = new ObservableCollection<CustomList>();
}
}
ViewModel.xaml
namespace WpfApplication1.Models
{
public class ViewModel
{
public ObservableCollection<Tab> Tabs { get; set; } = new ObservableCollection<Tab>();
public ViewModel()
{
var tab1 = new Tab();
tab1.Header = "Tab 1";
tab1.CustomLists.Add(new CustomList());
tab1.CustomLists.Add(new CustomList());
tab1.CustomLists.Add(new CustomList());
Tabs.Add(tab1);
var tab2 = new Tab();
tab2.Header = "Tab 2";
tab2.CustomLists.Add(new CustomList());
Tabs.Add(tab2);
var tab3 = new Tab();
tab3.Header = "Tab 3";
tab3.CustomLists.Add(new CustomList());
tab3.CustomLists.Add(new CustomList());
Tabs.Add(tab3);
}
}
}

Related

Extending A ListBox with an ItemTemplate

I need to extend a ListBox with a custom ItemTemplate but when I run my code the ItemTemplate does not get applied?
<ListBox x:Class="ExtendedCheckedListbox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ExtListBoxPOC"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Description}" VerticalAlignment="Stretch" VerticalContentAlignment="Center" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
private YesNoModel YesNo = new YesNoModel();
{
DataContext = YesNo;
cbl.ItemsSource = YesNo;
}
My main Window XAML which uses the control called cbl which has the ItemsSource set in code behind:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ExtListBoxPOC"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:ExtendedCheckedListbox x:Name="cbl" HorizontalAlignment="Left" Height="300" Margin="10" VerticalAlignment="Top" Width="300"/>
</Grid>
</Window>
The Model class is this:
public class YesNoModel
{
public string Description { get; set; }
public int Value { get; set; }
}
And I am adding items here:
{
YesNo.Add(new YesNoModel() { Description = "Yes", Value = 1 });
YesNo.Add(new YesNoModel() { Description = "No", Value = 2 });
YesNo.Add(new YesNoModel() { Description = "N/A", Value = 3 });
}
Code behind the ExtendedCheckedListbox View:
public class ExtendedCheckedListbox : ListBox
{
}
Your derived ListBox simply ignores the XAML, because you did apparently not call InitializeComponent() anywhere.
However, the usual way to derive from a control is to create a default Style in Themes\Generic.xaml. Add a "custom control" to your Visual Studio project and modify it like this:
public class ExtendedCheckedListBox : ListBox
{
static ExtendedCheckedListBox()
{
DefaultStyleKeyProperty.OverrideMetadata(
typeof(ExtendedCheckedListBox),
new FrameworkPropertyMetadata(typeof(ExtendedCheckedListBox)));
}
}
Then change the content of the generated Themes\Generic.xaml file to this:
<Style TargetType="local:ExtendedCheckedListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="{Binding Description}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
See Control Authoring Overview for details.

Binding ObservableCollection to ComboBox in WPF App with MVVM

I am new to WPF and I tried a simple dropdown menue with a list as ItemsSource. My ComboBox unfortunately stays empty while my list should be fine.
Can you guys help me out?
My XAML:
<Window x:Class="ProjectX.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:ProjectX.ViewModel"
xmlns:local="clr-namespace:ProjectX"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
DataContext="{DynamicResource ViewModelMain}">
<Window.Resources>
<vm:ViewModelMain x:Key="ViewModelMain"/>
</Window.Resources>
<Grid>
<ComboBox ItemsSource="{Binding WaageListe}" DisplayMemberPath="{Binding Waage}" />
</Grid>
</Window>
And here is my ViewModel:
using ProjectX.Model;
using System.Collections.ObjectModel;
namespace ProjectX.ViewModel
{
public class ViewModelMain : ViewModelBase
{
public ObservableCollection<Waage> waageListe;
public ObservableCollection<Waage> WaageListe
{
get => waageListe;
set
{
RaisePropertyChanged("WaageListe");
}
}
public ViewModelMain()
{
WaageListe = new ObservableCollection<Waage>
{
new Waage {Name="Hamburg - 1"},
new Waage {Name="Hamburg - 2"},
new Waage {Name="Hamburg - 3"},
};
}
}
}
Use this:
<Window x:Class="ProjectX.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:ProjectX.ViewModel"
xmlns:local="clr-namespace:ProjectX"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<vm:ViewModelMain />
</Window.DataContext>
<Grid>
<ComboBox ItemsSource="{Binding WaageListe}" DisplayMemberPath="Name"/>
</Grid>
And:
using ProjectX.Model;
using System.Collections.ObjectModel;
namespace ProjectX.ViewModel
{
public class ViewModelMain : ViewModelBase
{
public ObservableCollection<Waage> WaageListe {get;} = new ObservableCollection<Waage>();
public ViewModelMain()
{
WaageListe.Add(new Waage {Name="Hamburg - 1"});
WaageListe.Add(new Waage {Name="Hamburg - 2"});
WaageListe.Add(new Waage {Name="Hamburg - 3"});
}
}
}
Set the DisplayMemberPath to "Name". You should also set the DataContext correctly:
<Window x:Class="ProjectX.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:ProjectX.ViewModel"
xmlns:local="clr-namespace:ProjectX"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<vm:ViewModelMain />
</Window.Resources>
<Grid>
<ComboBox ItemsSource="{Binding WaageListe}" DisplayMemberPath="Name" />
</Grid>
</Window>
"Name" is a public property of the Waage class.
You could also define an ItemTemplate:
<ComboBox ItemsSource="{Binding WaageListe}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Waage is a type name but not a property name.

WPF Binding TabControl TabItem

I am relatively new to MVVM in WPF and have been trying to solve an issue for several days now. I am using the dragablz tab control and binding the ItemsSource which is an ObservableList of objects. The content of the Tab Item is a UserControl, however; its datacontext is null. I've created a simple setup to demonstrate the issue I'm having:
Model/ViewModel Classes:
public class Item
{
public string Header { get; set; }
public ItemContent Body { get; set; }
}
public class ItemContent
{
public string Name { get; set; }
public string Description { get; set; }
}
class MainWindowViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public ObservableCollection<Item> Items { get; set; }
}
Main Window XAML
<Window x:Class="WpfTestApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfTestApplication"
xmlns:views="clr-namespace:WpfTestApplication.ViewModels"
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<views:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Button Name="btnAdd" Content="Add" Click="btnAdd_Click" />
<dockablz:Layout Grid.Row="1">
<dragablz:TabablzControl HeaderMemberPath="Header" ItemsSource="{Binding Items}" SelectedIndex="1">
<dragablz:TabablzControl.ContentTemplate>
<DataTemplate DataType="{x:Type views:Item}">
<local:TabItemControl />
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
</dragablz:TabablzControl>
</dockablz:Layout>
</Grid>
</Window>
Tab Item XAML
<UserControl x:Class="WpfTestApplication.TabItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfTestApplication"
xmlns:views="clr-namespace:WpfTestApplication.ViewModels"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<views:ItemContent />
</UserControl.DataContext>
<Grid>
<TextBox Text="{Binding Body}" />
</Grid>
</UserControl>
And the btnAdd_Click event
Note that I don't use this in my actual code but it was a fast and dirty way to add tab items dynamically without adding a command.
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
((ViewModels.MainWindowViewModel)DataContext).Items.Add(new ViewModels.Item() { Header = "New One", Body = new ViewModels.ItemContent() { Name = "This One" } });
}
Will answered my question in the comment to the original question. I used his answer to another post: https://stackoverflow.com/a/44729258/1228 to do the following.
I removed this from my UserControl:
<UserControl.DataContext>
<views:ItemContent />
</UserControl.DataContext>
I then added a dependency property called Body to my UserControl code behind:
public static readonly DependencyProperty BodyProperty =
DependencyProperty.Register("Body",
typeof(ViewModels.ItemContent),
typeof(TabItemControl),
new PropertyMetadata(null));
public ViewModels.ItemContent Body
{
get
{
return (ViewModels.ItemContent)GetValue(BodyProperty);
}
set
{
SetValue(BodyProperty, value);
}
}
public string BodyText {
get
{
return Body?.Name;
}
set
{
if (Body != null)
{
Body.Name = value;
}
}
}
I updated my MainWindow's Tab control ContentTemplate as such:
<dragablz:TabablzControl.ContentTemplate>
<DataTemplate DataType="{x:Type views:ItemContent}">
<local:TabItemControl Body="{Binding Body}" />
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
And changed my UserControl to use the BodyText property for the value of the TextBox:
<Grid x:Name="LayoutRoot">
<TextBox Text="{Binding BodyText}" />
</Grid>

WPF: Can't access the view. Datagrid is not refreshing with data in tabs

I'm following this How to create tab-able content in WPF/C#? but I want each tab to show a datagrid. The datagrid doesn't show and also doesn't show the data. When I step into the code, I do see 0,1 being set.
MainWindow.xaml
<Window x:Class="MVVMDataInstances.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:viewModel="clr-namespace:MVVMDataInstances"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<viewModel:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.Resources>
<DataTemplate x:Key="ContentTemplate"
DataType="{x:Type viewModel:ChildViewModel}"/>
</Grid.Resources>
<TabControl ContentTemplate="{StaticResource ContentTemplate}"
ItemsSource="{Binding Items}" />
</Grid>
</Window>
MainWindowViewModel.cs
public ObservableCollection<ChildViewModel> Items { get; private set; }
public MainWindowViewModel()
{
Items = new ObservableCollection<ChildViewModel> {new ChildViewModel(0), new ChildViewModel(1)};
}
ChildView.xaml
<UserControl x:Class="MVVMDataInstances.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ViewModel="clr-namespace:MVVMDataInstances"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<ViewModel:ChildViewModel/>
</UserControl.DataContext>
<DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Grid, Mode=TwoWay}" />
</UserControl>
ChildViewModel.cs
public class ChildViewModel : ViewModelBase
{
private ObservableCollection<ChildModel> _grid;
public ObservableCollection<ChildModel> Grid
{
get { return _grid; }
private set
{
_grid = value;
OnPropertyChanged("Grid");
}
}
public ChildModel Data { get; set; }
public ChildViewModel()
{
}
public ChildViewModel(int tabNumber)
{
Data = new ChildModel {A = tabNumber.ToString(CultureInfo.InvariantCulture)};
Grid = new ObservableCollection<ChildModel> {Data};
}
}
ChildModel.cs
public class ChildModel
{
public string A { get; set; }
public string B { get; set; }
}
ViewModelBase.cs
public class ViewModelBase : INotifyPropertyChanged
{
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
I would like to see one grid per tab. The entry on the first tab has a value of 0 for property A. The entry of the second tab has a value of 1 for the property B.
I see that when OnPropertyChanged is called PropertyChanged is null.
I can access the datagrid if I have this in MainWindow.xaml
<Grid>
<TabControl ItemsSource="{Binding Items}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TabTitle}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="True"
ItemsSource="{Binding Grid}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
But OnPropertyChanged is always null for this and I don't see the grid
<DataTemplate x:Key="ContentTemplate"
DataType="{x:Type viewModel:ChildViewModel}">
<viewModel:ChildView />
</DataTemplate>
Your DataTemplate is empty. From your question, you probably want to do something along these lines:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="ContentTemplate" TargetType="{x:Type viewModel:ChildViewModel}">
<DataGrid AutoGenerateColumns="False" . . .>
<DataGrid.Columns>
<!-- Your column definitions here -->
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</Grid.Resources>
<TabControl ContentTemplate="{StaticResource ContentTemplate}"
ItemsSource="{Binding Items}" />
</Grid>
This DataTemplate tells the ChildViewModel.cs that it's appearance is View.xaml :
<DataTemplate x:Key="ContentTemplate"
DataType="{x:Type viewModel:ChildViewModel}">
<viewModel:View />
</DataTemplate>
As a result behind the scenes it also sets each View's DataContext to an instance of ChildViewModel.
I follow this MVVM: ViewModel inheritance to have ViewModel Inheritance. The reason PropertyChanged was null because the constructor was initialized twice. First time with an integer, and then second time with the InitializedComponent. If I comment out the InitializedComponent, the grid was never initialized. The answer to the other stackoverflow question makes everything cleaner with view model inheritance.

How to display string in ListBox using MVVM?

I have a ListBox on a WPF form. I would like to display a list of string items horizontally. I have a Grid that holds my ListBox control.
When I run the form it displays the name of the encapsulating object: ProjectName.Folder.Category instead of the string object within it.
ViewModelLocator
public CategoryViewModel CategoryViewModel
{
get
{
if (categoryviewModel == null)
{
categoryviewModel = new CategoryViewModel();
categoryviewModel.ListData.Clear();
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy1" });
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy2" });
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy3" });
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy4" });
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy5" });
categoryviewModel.ListData.Add(new Category { MyCategory = "new categroy6" });
}
return categoryviewModel;
}
}
Model
class Category
{
public String MyCategory { get; set; }
}
MainPage.xaml
<Grid>
<my:featureControl HorizontalAlignment="Left"
x:Name="featureControl1"
VerticalAlignment="Top" Height="332"
Loaded="featureControl1_Loaded" />
</Grid>
Control.xaml
<UserControl x:Class="AmebaPrototype.UI.Longlist.CategoryControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="1280">
<Grid DataContext="{Binding Source={StaticResource viewModelLocator},Path=CategoryViewModel}">
<ListBox Height="300" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="1280" ItemsSource="{Binding ListData}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
You need to set the DisplayMemberPath in your ListBox
This seemed to have done the trick.
<DataTemplate x:Key="ListBoxTemplate">
<TextBlock x:Name="black" Text="{Binding MyCategory}"/>
</DataTemplate>

Categories

Resources