The problem with this is probably obvious but im struggling to see it.
I have the following XAML:
<ItemsControl x:Name="contentList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" />
<ItemsControl x:Name="imageContent" Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ImageCollection.FullName}" TextWrapping="Wrap" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I've set up the itemsSource for contentList like so:
contentList.ItemsSource = myObservableCollection;
However when I try to do the same for imageContent, I can't seem to access it via IntelliSense.
I've tried a clean/rebuild of the Project and it's made no difference.
Do I need to access imageContent a different way?
I want to use myObservableCollection for both contentList and imageContent as it has the following structure:
Name (String)
ImageCollection (ObservableCollection)
With an aim to produce the following UI:
You need to define another ObservableCollection within the list objects of your outer collection. Something like this:
ObservableCollection<MyObject> OuterList = new ObservableCollection<MyObject>();
//...
public class MyObject
{
public ObservableCollection<FileInfo> ImageCollection {get; set;}
public MyObject()
{
ImageCollection = new ObservableCollection<FileInfo>();
}
}
Then just update your xaml like so:
...
<ItemsControl x:Name="imageContent" ItemsSource="{Binding ImageCollection}">
...
So this will cause each item in your outer list to hold it's own observable collection holding it's list.
Also with this change make sure you update the binding on your text block, since each item will represent a FileInfo object you can simply write this:
<DataTemplate>
<TextBlock Text="{Binding FullName}" TextWrapping="Wrap" />
</DataTemplate>
Related
I am using the Microsoft.Toolkit.Mvvm library as an MVVM library. My C# code is the following:
class SampleViewModel : ObservableObject
{
private List<int> _sampleList;
public List<int> sampleList
{
get => _sampleList;
set
{
SetProperty(ref _sampleList, value);
}
}
}
The XAML code I am attempting to use to display all the values of the List<int> is:
<ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="x:Int32">
<TextBlock Text="{x:Bind}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When the list is updated, the elements are created, but the value of the int is not displayed, only an empty row is present. If I use the following, I can display the value:
<TextBlock Text="{x:Bind ViewModel.sampleList[0], Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
How should I change the ListView, so that it displays the values as well?
i think you have over complicated what you want to do
<ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:Int32">
<TextBlock Text="{x:Bind}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
should do the trick
this reads as create an text box for every item in the sampleList
if this doesn't work then the issue is most likely that your datacontext hasn't been set and the binding can't trace the relative address
also you should try using
an Observable collection
ie
public ObservableCollection<int> sampleList { get ;} = new ObservableCollection<int>();
this is because you should be changing the content of the list not the list itself so you need to INotifyCollectionChanged Event to inform the binding the content has changed
Try to use ObservableCollection<int> instead of List<int>
Your binding in XAML is very compicated. Try the following:
<ListView x:Name="mylistview" ItemsSource="{x:Bind ViewModel.sampleList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<Label Content="{x:Bind}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hey I have a list box that I set the ItemsSource to be an ObservableCollection of objects from my database, and I need to add a single object at the end of this list. However I keep getting an invalid operation exception. Somehow my listbox is in use (which in my mind is a given as it is displayed and already have items inside.) Here is my code for the list box:
<ListBox x:Name="CarList" SelectionChanged="ItemSelected" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="LeftToRight" ItemHeight="300" ItemWidth="300"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10,10">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding image_path}" VerticalAlignment="Stretch"/>
<Grid Grid.Row="1" Background="SteelBlue">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3" Text="{Binding model}"/>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Margin="3" Text="{Binding price}"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I first set the ItemsSource like so:
CarList.ItemsSource = CarController.GetAllCars();
And then want to add my custom object like this:
ListBoxItem carAdd = new ListBoxItem();
carAdd.Content = new CarModel{ image_path = "/../Assets/add-512.png", id=-1};
CarList.Items.Add(carAdd);
But alas the last operation fails with this message:
Operation is not valid while ItemsSource is in use. Access and modify
elements with ItemsControl.ItemsSource instead.
I have looked for a few other suggestions but all use strings and single bindings in their examples and thus I haven't been able to figure out what exactly to do. If anyone got a suggestion it would be much appreciated.
-
Thanks.
You need to add the item to the items source, and the source should be observable so that the ListBox takes the new item into account:
var cars = new ObservableCollection<CarModel>(CarController.GetAllCars());
CarList.ItemsSource = cars;
...
var car = new CarModel{ image_path = "/../Assets/add-512.png", id=-1};
cars.Add(car);
Can you tell me why this code isn't working?
I have a viewmodel with an observablecollection of searchresults which has an observablecollection of resultproperties. I cannot seem to display the nested collection of result properties like I want.
Here are the objects (abstracted for readability):
class ViewModel
{
public ObservableCollection<SearchResults<TDomain>> SearchResults { get; set; }
}
class SearchResults<TDomain>
{
public TDomain Result { get; set; }
public ObservableCollection<ResultProperty> ResultProperties { get; set; }
}
class ResultProperty
{
public string PropertyValue { get; set; }
}
Here is the xaml I cannot get to work. The DataContext is set to the ViewModel:
<StackPanel>
<ItemsControl ItemsSource={Binding SearchResults}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text={Binding Result.Id}/>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource={Binding ResultProperties}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding PropertyValue}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="PLACEHOLDER /////"/>
</StackPanel>
The outcome I am looking for is something like this:
[Stack panel to keep things orderly]
1
property1property2property3...
2
property1property2property3...
3
property1property2property3...
PLACEHOLDER /////
The results I am getting are these
[Stack panel to keep things orderly]
1
2
3
PLACEHOLDER /////
In otherwords, the binding isn't picking up the string. I have verified that the collections are populating like expected. But I can't get the xaml to work.
**ADDITION INFORMATION
Ok, so I tried some of the solutions, but they aren't working so I am going to add more details because maybe I am missing something about how the collections are getting updated.
The viewmodel has a button on it called "Search" which uses an ICommand that calls a the view model's TrySearch method which is below:
public void TrySearch()
{
var results = _model.GetAll();
foreach(var result in results)
this.SearchResults.Add(new SearchResults<TDomain>(result));
}
Could there be a reason this doesn't work because of the way the collection is updated? SearchResults is a dependency property (I know I know, it should be INPC, but its not, its dependency), but the other collections are not. Could this be a problem?
I would create the data templates as resources and refer to them elsewhere in the XAML. For example:
<Window ....>
<Window.Resources>
<DataTemplate x:Key="SearchResultTemplate" TargetType="SearchResults">
<TextBlock Text={Binding PropertyValue}"
</DataTemplate>
<DataTemplate x:Key="ViewModelTemplate" TartgetType="ViewModel">
<StackPanel>
<TextBlock Text={Binding Result.Id}/>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource={Binding ResultProperties} ItemTemplate="{StaticResource SearchResultTemplate}" />
</StackPanel>
</StackPanel
</DataTemplate>
</Window.Resources>
<StackPanel>
<ItemsControl ItemsSource={Binding SearchResults} ItemTemplate="{StaticResource ViewModelTemplate}" />
</Window>
I'm not sure, but I think that the bindings you're using are telling the XAML parser to look for properties of the ViewModel class called ResultProperties and PropertyValue. The XAML parser doesn't see that they're properties of the object bound to that instance of the collection. Splitting it up like this should make it plain that the properties belong to the instance that the template is being applied to.
Your code is somehow correct but according to what you want it has a flow. The StackPanel has to be the ItemsPanel. Change it like this:
<StackPanel>
<ItemsControl ItemsSource="{Binding SearchResults}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Result.Id}"/>
<ItemsControl ItemsSource="{Binding ResultProperties}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding PropertyValue}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="PLACEHOLDER /////"/>
</StackPanel>
The answer is that my SearchResults class was not hooked up properly. I made it a dependency object with dependency properties and it works fine. I am assuming that would translate similarly if it was INotifyPropertyChanged. Thank you for the responses.
I'm trying to make a budget program. Where I need to have groupboxes with a list of textblocks inside.
<ItemsControl DataContext="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding}">
<ItemsControl DataContext="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
<TextBlock Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I need somehow to databind a list (perhaps?) with groupboxes so I'd create a list of group boxes, with some lines inside that would be a text with a currency value. So that I could create a group called "Apartment", with two lines "Rent $3000" and "Maintenance $150". Then I could have a second group called "Car" with lines "Insurance", "Loan" and "Maintenance" for instance.
But how would I databind this? And how would I need in C# to perform this. I'm at a loss.
Building off of Jay's comment, you would want to create a Hierarchical data model. Note I have left implementing INotifyPropertyChanged on the properties to you
public class BudgetLineItem : INotifyPropertyChanged
{
public string Name { get; set; }
public decimal Cost { get; set; }
}
public class BudgetGroup : INotifyPropertyChanged
{
public string GroupName { get; set; }
public ObservableCollection<BudgetLineItem> LineItems { get; set; }
}
public class BudgetViewModel : INotifyPropertyChanged
{
public ObservableCollection<BudgetGroup> BudgetGroups { get; set; }
}
Then your data-template would look like this:
<ItemsControl DataContext="{Binding ViewModel}"
ItemsSource="{Binding BudgetGroups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding GroupName}">
<ItemsControl ItemsSource="{Binding LineItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Cost}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I could be off base here, but it sounds like you want to change the DataTemplate based on the type of object that is being bound from a list of heterogeneous objects.
If that's the case, you want to look into DataTemplateSelectors or create DataTemplates for each of the types you want to support in the list.
For example, for an Apartment you might have:
<DataTemplate DataType="local:ApartmentBudget">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
<TextBlock Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
a Car may look like:
<DataTemplate DataType="local:CarBudget">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Insurance}" />
<TextBlock Text="{Binding Loan}" />
<TextBlock Text="{Binding Maintenance}" />
</StackPanel>
</DataTemplate>
Then your ItemsControl can be set like:
<ItemsControl ItemSource="{Binding BudgetItems}">
The correct DataTemplate will be picked based on the data type. You can have even more control by creating a custom DataTemplateSelector.
See https://msdn.microsoft.com/en-us/library/ms742521(v=vs.100).aspx for more information.
I'm developing a Windows Phome application. I have the following ListBox on a page:
<ListBox Margin="10,10,8,8" x:Name="WallList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="ListBoxItemLayout" Background="Transparent" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.33*"/>
<ColumnDefinition Width="0.77*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" Margin="0" Source="{Binding ImagePath}" Height="200"/>
<StackPanel Margin="5,0,0,0" Grid.Column="1">
<TextBlock x:Name="Name" TextWrapping="Wrap" Text="{Binding Name}" Style="{StaticResource PhoneTextTitle2Style}"/>
<TextBlock x:Name="Comment" Margin="0,5,0,0" TextWrapping="Wrap" Text="{Binding Comment}" Style="{StaticResource PhoneTextNormalStyle}" Height="130"/>
<TextBlock x:Name="When" TextWrapping="Wrap" Text="{Binding When}" Style="{StaticResource PhoneTextTitle3Style}" VerticalAlignment="Bottom"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm using this to fill the ListBox on Loaded event:
this.WallList.ItemsSource = StartingWall.GetWallPosts();
And now I want to add more items programmatically when the user write down some text on a TextBox and click on a button. I want to place this text on Comment field.
I'm gooing to fill the rest fields with default data.
My question is:
How can I add more items to WallList ListBox?
Someone has suggested to do the following:
public ObservableCollection<WallPostEntry> MyWallPosts {get;set;}
// Initialize MyWallPosts to whatever
MyWallPosts.Add(new WallPostEntry("new entry"));
<ListBox Margin="10,10,8,8" x:Name="WallList" ItemsSource="{Binding MyWallPosts}">
But Binding ListBox ItemsSource doesn't work for me. I'm initializing MyWallPosts on constructor, just before InitializeComponent();, like this:
public Wall()
{
MyWallPosts = StartingWall.GetWallPosts();
InitializeComponent();
}
Any advice?
Thanks.
I see a couple wierd things:
first, you're using the itemssource binding in one place, but explicitly setting it in another? setting something in code will override/undo any bindings, so that could cause a problem (but it looks like you're setting it to the same thing so that shouldn't make a difference, but i'd remove the this.WallList.ItemsSource = StartingWall.GetWallPosts(); call entirely, and leave the ItemsSource="{Binding MyWallPosts}" in the xaml. the point of using bindings is to get rid of this kind of code)
second, you're setting mywallposts and using a binding, but not setting the datacontext on your object itself? simplest in your example would be to just add one line to your constructor:
public Wall()
{
DataContext = this;
MyWallPosts = StartingWall.GetWallPosts();
InitializeComponent();
}
My next suggestion would be to simplify until it works. leave the listbox but comment out all of the item/data templating to make sure that you don't have a bug in your template
Could he just add
a DataContext property to this:
<ListBox Margin="10,10,8,8" x:Name="WallList" ItemsSource="{Binding MyWallPosts}">
so:
<ListBox Margin="10,10,8,8" x:Name="WallList" ItemsSource="{Binding MyWallPosts}" DataContext="{Binding MyWallPosts}">
Would there be any way of setting the dataContext declarativelly?
tks,
Oscar