We Keep Coding

WPF Binding Listbox into ListView (different Source / datacontext)

i have these two classes.
classes:
public class OuterList
{
public string Process { get; set; }
public OuterList(string _process)
{
Process = _process;
}
}
public class InnerList
{
public string Order { get; set; }
public string Product { get; set; }
public InnerList(string _order, string _product)
{
Order = _order;
Product = _product;
}
}
And i will get a Listbox in a ListView.
XAML:
<ListView x:Name="Container" ItemsSource="{Binding OuterList}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Margin="5" FontSize="24" FontFamily="Arial" Background="Red" Text="{Binding Process}"/>
<ListBox x:Name="Orders" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.InnerList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Product}"/>
<TextBlock Text="{Binding Order}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code:
public partial class MainWindow : Window
{
ObservableCollection<OuterList> myContainers = new();
ObservableCollection<InnerList> myItems = new();
public MainWindow()
{
InitializeComponent();
myContainers.Add(new OuterList("Start"));
myContainers.Add(new OuterList("Middle"));
myContainers.Add(new OuterList("End"));
Container.ItemsSource = myContainers;
myItems.Add(new InnerList("34545","SD5"));
myItems.Add(new InnerList("45654", "SD5"));
myItems.Add(new InnerList("65775", "SD5"));
myItems.Add(new InnerList("78677", "SD5"));
myItems.Add(new InnerList("35887", "SD5"));
Orders.ItemsSource = myItems; //<- The name "Orders" does not exist in the current context.
}
}
All the Content of the OuterList will shown, but no Item from InnerList
How can i add Content from two different ItemSources? Or, what am I doing wrong?
Got an issue in Code: The name "Orders" does not exist in the current context.
Thanks for you Help!

Because your DataContext is incorrect.
Assuming the Grid that wraps both of them its DataContext contains Outer and Inner
You can do this:
<Grid>
<ListView x:Name="Container" ItemsSource="{Binding OuterList}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Margin="5" FontSize="24" FontFamily="Arial" Background="Red" Text="{Binding Process}"/>
<ListBox x:Name="Orders" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.InnerList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Product}"/>
<TextBlock Text="{Binding Order}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

wpf - listview inside of tabcontrol

I'm having difficulties to Binding a ListView inside of a TabControl
Bellow is my ViewModel
public ObservableCollection<TabItem> Tabs { get; set; }
public class TabItem
{
public string Header { get; set; }
public ObservableCollection<abc> Content { get; set; }
}
public class abc
{
public string text { get; set; }
}
this is how I initialize it
InitializeComponent();
Tabs = new ObservableCollection<TabItem>()
{
new TabItem {
Header = "Header1",
Content = new ObservableCollection<abc>()
{
new abc{ text = "content1" },
new abc{ text = "content2" },
}
},
new TabItem {
Header = "Header2",
Content = new ObservableCollection<abc>()
{
new abc{ text = "content3" },
new abc{ text = "content4" },
}
}
};
tabControl1.ItemsSource = Tabs;
and here is how I populate and Bind it in the view
<TabControl Name="tabControl1">
<TabControl.ItemTemplate>
<!-- this is the header template-->
<DataTemplate>
<TextBlock Width="500" Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<!-- this is the body of the TabItem template-->
<DataTemplate>
<ListView Margin="10" ItemsSource="{Binding Content}">
<ListViewItem>
<StackPanel>
<TextBlock Text="{Binding text}" />
</StackPanel>
</ListViewItem>
</ListView>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
but then I got an errror saying that
InvalidOperationException: Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.
How can I bind a ListView inside a TabControl?
Each Tab control will have the same format of ListView. The Actual ListView will have more than 1 field. not only text field.
Where did I do it wrongly?

ListViewItems are created by ListView for each element in ItemsSource. To change their look you need ItemTemplate:
<ListView Margin="10" ItemsSource="{Binding Content}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding text}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
if you have more than 1 field, not only text field, define GridView with columns like shown in this post

Navigation in between pages using ListView in UWP

I am trying to navigate in between pages using listitems but its not working. My home page is MainPage.xaml and I want to navigate to "xyz" when I click on the Aba image in listview
Here is my code:
namespace abc
{
public sealed partial class MainPage : Page
{
ObservableCollection<Class1> list1 = new ObservableCollection<Class1>();
public MainPage()
{
this.InitializeComponent();
Filldata();
}
void Filldata()
{
list1.Add(new Class1 { name = "Aba", image = "ms-appx:///images/aba.png" });
list1.Add(new Class1 { name = "Al", image = "ms-appx:///images/al.png" });
}
private void itemclicked(object sender, ItemClickEventArgs e)
{
var nme = (Class1)e.ClickedItem;
switch (nme.name)
{
case "Aba":
Frame.Navigate(typeof(xyz),null);
break;
}
}
}
}
MainPage.xaml
<ListView x:Name="list" ItemClick="itemclicked">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="100" Width="100" Source="{Binding image}"></Image>
<TextBlock Text="{Binding name}" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Class1.cs
class Class1
{
public String name { get; set; }
public String image { get; set; }
}

You have an issue with your ListView control and the main reason is that you don't have this property in your ListView in XAML:
IsItemClickEnabled="True"
So in order to solve your problem add this property IsItemClickEnabled="True" at ListView in XAML page like this:
<ListView x:Name="list"
ItemClick="itemclicked"
IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="100"
Width="100"
Source="{Binding image}"></Image>
<TextBlock Text="{Binding name}"
HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your code is fine at navigation methods and other things but you need to "enable" items to be clicked, so add that property in order to can use them with click events.

Binding ListView SelectedItem between two or more ListViews

I have a Dictionary that contains an ObservableCollection like this:
Dictionary<string, ObservableCollection<Person>> MyDictionary
Now in my xaml, I'm creating an itemscontrol that uses the dictionary's key for an expander and the person's collection in a listview something like this:
<ItemsControl ItemsSource="{Binding MyDictionary}" VerticalAlignment="Center" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Name="expander" IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Left" Text="MyString:"/>
<TextBlock Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Left" Text="{Binding Key}"/>
</StackPanel>
</Expander.Header>
<Expander.Content>
<ListView SelectionMode="Single" ItemsSource="{Binding Value}">
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn>
<GridViewColumn.Header>
<TextBlock Text="Name" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.Header>
<TextBlock Text="Last Name" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding LastName}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Expander.Content>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now, as you can see it creates a collection of expanders and each expander has a listview within it's content...
I want to let only one listview have a selected item, how can I do it?
If I wasn't clear: I will have 3 Expanders, each one has 1 ListView, each ListView has 4-5 item's, i want that when a user click on a listviewitem all other ListViews selected items will be unselected.
Thanks !

Why don't you subscribe to the selection event of each list view and call UnselectAll on the others.

Hey I have an idea to do this . Bind the SelectedItem of all the listBox to same SelectedItemProperty of ViewModel like
>xaml here I have two ListBox whose SelectedItem is bound to same property of VM
<StackPanel Height="500" Width="500">
<ListBox Height="200" ItemsSource="{Binding StudentList1}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedStudent}"></ListBox>
<ListBox Height="200" ItemsSource="{Binding StudentList2}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedStudent}"></ListBox>
</StackPanel>
xaml.cs
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
ViewModel
public class ViewModel:INotifyPropertyChanged
{
public ViewModel()
{
StudentList1 = new ObservableCollection<Student>();
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList2 = new ObservableCollection<Student>();
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
}
public ObservableCollection<Student> StudentList1 { get; set; }
public ObservableCollection<Student> StudentList2 { get; set; }
Student selectedStudent;
public Student SelectedStudent
{
get { return selectedStudent; }
set { selectedStudent = value; Notify("SelectedStudent"); }
}
public void Notify(string propName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
Student Class
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
}
I hope you got an idea .SelectedItem works on the basis of References when you will select one Listbox item the SelectedStudent property of VM will get updated and hence all othe ListBox SelectedItem will get deselected because they dont have this reference in there itemssource. The power of MVVM :)
>Update
Student selectedStudent1;
public Student SelectedStudent1
{
get { return selectedStudent1; }
set {
selectedStudent=null;
selectedStudent1 = value;
Notify("SelectedStudent1"); }
}
Student selectedStudent;
public Student SelectedStudent
{
get { return selectedStudent; }
set {
selectedStudent1=null;
selectedStudent = value;
Notify("SelectedStudent"); }
}

Silverlight codebehind from XAML

I have the following code in XAML:
<data:DataGridTemplateColumn>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image x:Name="picture" Width="200" Height="130" Visibility="Visible"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
How would do I this in the code behind (C#), without using this XAML code?
EDIT:
Here is the solution I am using:
Creating a Silverlight DataTemplate in code
This lets me do exactly what I want.

For example, you have a simple DataGrid
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Items}">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn CellTemplate="{StaticResource ImageCellTemplate}"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
If you want to have several templates applied to a single DataGridRow, you can change visibility of internal parts inside the template:
<DataTemplate x:Key="ImageCellTemplate">
<Grid>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsImageTemplate}">
<Image Width="20" Height="20"/>
<TextBlock Text="{Binding Title}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsTextBoxTemplate}">
<TextBlock Text="{Binding Id}" Foreground="Red"/>
<TextBox Text="{Binding Title}"/>
</StackPanel>
</Grid>
</DataTemplate>
There is the part with Image and the part with TextBox that are bound to the properties of an item view model (IsImageTemplate and IsTextBoxTemplate respectively). They are mutually exclusive and panels will not cover each other.
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
var items = new List<ItemViewModel>()
{
new ItemViewModel{Id = 1, Title="First", IsImage = true},
new ItemViewModel{Id = 2, Title="Second", IsImage = false},
new ItemViewModel{Id = 3, Title="Third", IsImage = false}
};
this.DataContext = new MainViewModel { Items = items };
}
}
public class MainViewModel
{
public List<ItemViewModel> Items { get; set; }
}
public class ItemViewModel
{
public int Id { get; set; }
public string Title { get; set; }
public bool IsImage { get; set; }
public Visibility IsImageTemplate
{
get { return (IsImage == true) ? Visibility.Visible : Visibility.Collapsed; }
}
public Visibility IsTextBoxTemplate
{
get { return IsImage == false ? Visibility.Visible : Visibility.Collapsed; }
}
}