Is that even possible? I have two ObservableCollections. I want to bind and populate a listbox with one of them. For example let's say that we have 2 buttons - one for Twitter and one for Facebook. Clicking on a Facebook button it will populate listbox with friend's names from facebook observable collection and it will bind it. Clicking on Twitter it will populate listbox with Twitter followers and populate listbox and bind it.
How to choose which collection will be populated in listbox?
I would just use one observable collection and fill based on the users choice. You could also fill it with the names from both sources and have a filter to filter out one or the other (apparently you need a wrapper object where you can indicate whether the name is a facebook friend or twitter follower).
Edit: Here is some quick code example of how you can do it:
public interface ISocialContact
{
string Name { get; }
}
public class FacebookContact : ISocialContact
{
public string Name { get; set; }
public string FacebookPage { get; set; }
}
public class TwitterContact : ISocialContact
{
public string Name { get; set; }
public string TwitterAccount { get; set; }
}
Then in your data context:
public ObservableCollection<ISocialContact> Contacts { get; set; }
...
Contacts = new ObservableCollection<ISocialContact> {
new FacebookContact { Name = "Face", FacebookPage = "book" },
new TwitterContact { Name = "Twit", TwitterAccount = "ter" }
};
And in your xaml:
<Grid>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:FacebookContact}">
<TextBlock Text="{Binding FacebookPage}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:TwitterContact}">
<TextBlock Text="{Binding TwitterAccount}"/>
</DataTemplate>
</Grid.Resources>
<ListBox ItemsSource="{Binding Contacts}" Width="100" Height="100"/>
</Grid>
This will apply the appropriate template to each object in your collection. So you can have collection with just facebook contacts or just twitter contacts or mixed.
Also note: You do not need the common interface. It will also work if you just make your ObservableCollection of type object. But given that they are being displayed by the same app in the same list box indicates that you can find some kind of common base and either can create a comon interface or base class.
In your ViewModel, create a property that exposes one or the other ObservableCollection, and swap it out when the button is clicked:
private ObservableCollection<string> _twitterFriendList;
private ObservableCollection<string> _facebookFriendList;
private ObservableCollection<string> _selectedFriendList;
public ObservableCollection<string> SelectedFriendList
{
get { return _selectedFriendList; }
set
{
if (value != _selectedFriendList)
{
_selectedFriendList = value;
RaisePropertyChanged("SelectedFriendList");
}
}
}
void TwitterButton_Click(object sender, RoutedEventArgs e)
{
SelectedFriendList = _twitterFriendList;
}
void FacebookButton_Click(object sender, RoutedEventArgs e)
{
SelectedFriendList = _facebookFriendList;
}
Then in your XAML you can just bind to the property:
<ListBox ItemsSource="{Binding SelectedFriendList}"/>
A non-elegant way of accomplishing this is to put 2 listboxes in the same location and bind 1 to the twitter collection and the other to the facebook collection. Bind their visibility to a property that changes based upon the button clicks. Personally, I'd have 2 radio buttons and display the listbox based upon which one is selected.
<ListBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=TwitterCollection}" SelectedItem="{Binding Path=SelectedTwitterItem}" Visibility="{Binding Path=IsTwitterSelected, Converter={StaticResource visibilityConverter}}" />
<ListBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=FacebookCollection}" SelectedItem="{Binding Path=SelectedFacebookItem}" Visibility="{Binding Path=IsFacebookSelected, Converter={StaticResource visibilityConverter}}" />
<RadioButton Grid.Row="1" Grid.Column="0" GroupName="rdoOptions" Content="{Binding Path=TwitterLabel}" IsChecked="{Binding Path=IsTwitterSelected}" />
<RadioButton Grid.Row="1" Grid.Column="1" GroupName="rdoOptions" Content="{Binding Path=FacebookLabel}" IsChecked="{Binding Path=IsFacebookSelected}" />
Related
I have the following Models:
public class Profile
{
public string name { get; set; }
public Member casemanager { get; set; }
public Member assistant { get; set; }
}
public class Member
{
public int Id { get; set; }
public int Type{ get; set; }
public string Name { get; set; }
}
In my ViewModel, I have the following objects:
an ObservableCollection<Profile> named Profiles that gets populated from a database;
a SelectedProfile of type Profile, of course;
Two Lists of Members named ListCaseManagers and ListAssistants that get populated from DB.
Each of the objects implement a NotifyOfPropertyChange method from Caliburn.Micro and are set with property and backing field.
The View:
<StackPanel>
<ListView ItemsSource="{Binding Profiles}" SelectedItem="{Binding SelectedProfile}" DisplayMemberPath="name" SelectionMode="Single" />
<ComboBox ItemsSource="{Binding ListCaseManagers}" SelectedItem="{Binding SelectedProfile.casemanager }" IsSynchronizedWithCurrentItem="True" DisplayMemberPath="Name"/>
<ComboBox ItemsSource="{Binding ListAssistants}" SelectedItem="{Binding SelectedProfile.assistant}" IsSynchronizedWithCurrentItem="True" DisplayMemberPath="Name"/>
</StackPanel>
In this XAML I was thinking that the SelectedItem of each ComboBox would bind directly to the SelectedProfile casemanager/assistant, changing everytime I modify the SelectedProfile using the ListView, but it doesn't seem to select the item in the combobox even though SelectedProfile.casemanager and SelectedProfile.assistant are not null.
What am I missing? Is there an easy way using conventions with Caliburn.Micro?
In combobox present couple properties which can allow you to modify your SelectedItem in your list.
SelectedValuePath="Id" <br/>
SelectedValue="{Binding SelectedProfile.casemanager.Id}"
Upd: this approach allow to bind selected element by their some unique attribute (ID or Name)
In case if you need to work with SelectedItem.. you must sure that props of items in Profiles collection are related to object in ListCaseManagers and ListAssistants
var query = from p in Profiles
join mgr in ListCaseManagers on p.casemanager==mgr
select p;
? query.Count
enter code here
I assume you will see 0.. since objects in collection are different.
to use the convention name of Caliburn, you have to give a name to your control
for example for ListView:
<StackPanel>
<ListView x:Name ="Profiles" />
</StackPanel>
with the convention of names, Caliburn binds automatically the collection Profiles and use SelectedProfiles as SelectedItem
You either need to raise the PropertyChanged for the SelectedProfile property when it's set:
private Profile_selectedProfile;
public ProfileSelectedProfile
{
get { return _selectedProfile; }
set
{
_selectedProfile = value;
NotifyOfPropertyChange(() => SelectedProfile);
}
}
Or you could bind to the SelectedItem property of the ListView control itself:
<StackPanel>
<ListView x:Name="lv" ItemsSource="{Binding Profiles}"
SelectedItem="{Binding SelectedProfile}"
DisplayMemberPath="name" SelectionMode="Single" />
<ComboBox ItemsSource="{Binding ListCaseManagers}"
SelectedItem="{Binding SelectedItem.casemanager, ElementName=lv }"
DisplayMemberPath="Name"/>
<ComboBox ItemsSource="{Binding ListAssistants}"
SelectedItem="{Binding SelectedItem.assistant, ElementName=lv}"
DisplayMemberPath="Name"/>
</StackPanel>
I have a class defined like:
public class Agent
{
public int Id { get; set; }
public string Category { get; set; }
// rest removed for brevity
}
Then, in WPF, I get the data as List and pass it to DataContext as this:
List<Agent> agents; // this includes my data
this.DataContext = agents;
And in .xaml part I want to list the Category field of each object. I have something like this:
<ListBox
Name="agentCategoryListBox"
Grid.Row="2"
Grid.Column="1"
ItemSource="{Binding Path=Category"} />
But this doesn't seem to work correctly. Any ideas?
Let me help you to do this in the correct way as Alex suggested.
Create a list and populate it in ViewModel like this
ViewModel
public class MainWindowViewModel : INotifyPropertyChanged
{
public MainWindowViewModel()
{
agents = new ObservableCollection<Agent>();
LoadData();
}
private void LoadData()
{
agents.Add(new Agent { Id = 1, Category = "a" });
agents.Add(new Agent { Id = 2, Category = "b" });
agents.Add(new Agent { Id = 3, Category = "c" });
}
}
In XAML, Make your list and use data template like this:
<Window.Resources>
<DataTemplate x:Key="AItemTemplate">
<TextBlock Text="{Binding Category}"></TextBlock>
</DataTemplate>
</Window.Resources>
<ListBox ItemsSource="{Binding agents}"
ItemTemplate="{StaticResource AItemTemplate}"></ListBox>
That is it !!
Normally the DataContext would be a view model class that would contain the list of agents; then you can bind the ItemsSource to that list. Any of the many examples that deal with listbox will be pretty straight forward when it comes to that. Not really sure how the binding should look like if the list itself is the DataContext.
Then once the ItemsSource is set to a list of agents, if you want to show the Category in the list, the simpler way is to set DisplayMemberPath to "Category".
I suggest looking into MVVM and learning to apply it, it's an invaluable concept in my opinion.
You try to bind your listbox to a string property.
You can try this :
Give a name to your user control for exemle myUC
Add a property to your user control :
public List<Agent> AgentList { get; set; };
Fill your agentlist :
this.AgentList = //fill method
And bind your listbox like this :
<ListBox
Name="agentCategoryListBox"
Grid.Row="2"
Grid.Column="1"
ItemSource="{Binding Path=AgentList, ElementName=myUC"} />
may be this will give you an idea:
http://www.c-sharpcorner.com/forums/wpf-datacontext-binding-with-listbox
The fastest way to get what you want is :
<ListBox
Name="agentCategoryListBox"
Grid.Row="2"
DisplayMemberPath="Category"
Grid.Column="1"
ItemSource="{Binding Path=."} />
ItemsSource is binded directly to your Datacontext (which is your list) And then you tell to your ListBox to display the property Category.
But the proper way would have been :
1 - Create a DataContext
public class AgentsDC
{
public List<Agent> Agents { get; set; }
}
2 - Give this class as DataContext
this.DataContext = new AgentsDC();
3 - Bind all these things
<ListBox
Name="agentCategoryListBox"
Grid.Row="2"
DisplayMemberPath="Category"
Grid.Column="1"
ItemSource="{Binding Path=Agents"} />
I also would suggest you to use MVVM. But if you do not want to then try this.
XAML:
<ListBox Name="AgentCategoryListBox" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Category}" d:DataContext="{d:DesignData}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
CS:
public MainWindow()
{
InitializeComponent();
List<Agent> agents = new List<Agent>
{
new Agent
{
Category = "Category"
}
};
DataContext = agents;
}
public class Agent
{
public string Category
{
get;
set;
}
}
I'm trying to get the databinding I need to work with a ListBox.
I've parsed some data from a text file to a ObservableCollection<ViewModel> but the data isn't updating in the ListBox.
Here's some information:
The data which is written to from the parser:
class MainData
{
private static ObservableCollection<GroupViewModel> groupModelList = new ObservableCollection<GroupViewModel>();
public static ObservableCollection<GroupViewModel> GroupModelList
{
get { return groupModelList; }
}
}
What GroupViewModel holds (not everything but it's all the same):
class GroupViewModel : INotifyPropertyChanged
{
private GroupModel groupModel;
public event PropertyChangedEventHandler PropertyChanged;
public GroupViewModel()
{
groupModel = new GroupModel();
}
public string Name
{
get { return groupModel.name; }
set
{
if (groupModel.name != value)
{
groupModel.name = value;
InvokePropertyChanged("Name");
}
}
}
...
}
And what GroupModel Holds:
class GroupModel
{
public string name { get; set; }
}
This is how the parser adds new items to the GroupModelView:
if (split[0] == "group")
{
currentGroup = new GroupViewModel();
currentGroup.Name = split[1];
MainData.GroupModelList.Add(currentGroup);
}
I created a ListBox in my WPF application with these XAML options:
<Window x:Class="SoundManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:SoundManager.ViewModels"
xmlns:vm2="clr-namespace:SoundManager.Code"
Title="MainWindow" Height="720" Width="1280">
<Window.Resources>
<vm:MainViewModel x:Key="MainViewModel" />
<vm2:MainData x:Key="MainData" />
</Window.Resources>
<ListBox Grid.Row="2" Height="484" HorizontalAlignment="Left" Margin="12,0,0,0" Name="lbFoundItems" VerticalAlignment="Top" Width="201" ItemsSource="{Binding Source={StaticResource MainData}, Path=GroupModelList/Name}" />
but for some reason the data isn't updating in the UI (new items aren't added visibly in the UI).
I've been just getting started with the MVVM pattern and databinding and I can't figure out what I'm doing wrong.
Thanks in advance!
GroupModelList/Name is not a valid property path here. Setting it like that does not make the ListBox show the Name property of the data items in the GroupModelList collection.
You would instead have to set the ListBox's DisplayMemberPath property:
<ListBox ItemsSource="{Binding Source={StaticResource MainData}, Path=GroupModelList}"
DisplayMemberPath="Name"/>
or set the ItemTemplate property:
<ListBox ItemsSource="{Binding Source={StaticResource MainData}, Path=GroupModelList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Moreover, the GroupModelList property should not be static:
class MainData
{
private ObservableCollection<GroupViewModel> groupModelList =
new ObservableCollection<GroupViewModel>();
public ObservableCollection<GroupViewModel> GroupModelList
{
get { return groupModelList; }
}
}
Then you might have MainData as a property in your view model, and bind the ListBox like this:
<ListBox ItemsSource="{Binding Source={StaticResource MainViewModel},
Path=MainData.GroupModelList}" .../>
I am fairly new to working with WPF and have this simple scenario which I am looking to implement:
I have two comboboxes, cmbSite and cmbLogFiles and I have a List<LogFileDirectory> which is defined as follows:
class LogFileDirectory
{
public List<System.IO.FileInfo> Files { get; private set; }
public string Name { get; private set; }
public string Path { get; private set; }
private LogFileDirectory() { }
public LogFileDirectory(string name, string path)
{
this.Name = name;
this.Path = path;
this.Files = new List<System.IO.FileInfo>();
if (System.IO.Directory.Exists(this.Path))
{
foreach (string file in System.IO.Directory.GetFiles(this.Path, "*.log", System.IO.SearchOption.TopDirectoryOnly))
this.Files.Add(new System.IO.FileInfo(file));
}
}
}
I have cmbSite bound to the Name property on the List<LogFileDirectory> in the code behind like this:
cmbSite.ItemsSource = _logFileInfo.WebServerLogFileDirectories;
cmbSite.SelectedValue = "Path";
cmbSite.DisplayMemberPath = "Name";
I would like cmbLogFiles bound to the Files property on the same List<LogFileDirectory> of the currently selected cmbSite and filtered to the entry LogFileDirectory object for the currently selected value of cmbSite, but I am really not quite sure how to do this without writing code in the ClickEvent handler of cmbSite (which seems like the wrong approach based on my WPF research) and rebinding cmbLogFiles to the select cmbSite LogFileDirectory.
Based on the thread that #Chris pointed me to in the comment above, the resolution was simple.
<ComboBox Name="cmbLogFiles" Width="140" ItemsSource="{Binding SelectedItem.Files, ElementName=cmbSite}" />
Where the ItemsSource property of cmbLogFiles specifies that the Binding will be the Files Property off of the SelectedItem object (which is defined as object of LogFileDirectory) and specified via the Element attribute to my other combobox (cmbSites).
I was able to remove all of the code behind by setting a DataContext on my window:
parserView = new Parser();
parserView.DataContext = new LogFileInfo("deathstar");
And then the subsequent XAML of the Parser window:
<Window x:Class="Zapora.UI.Parser"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Log File Parser" Height="350" Width="525">
<StackPanel Orientation="Horizontal" Height="26" VerticalAlignment="Top">
<Label Content="Web Site:"/>
<ComboBox Name="cmbSite" Width="180" ItemsSource="{Binding WebServerLogFileDirectories}" DisplayMemberPath="Name" SelectedValuePath="Path"/>
<Label Content="Files Available:"/>
<ComboBox Name="cmbLogFiles" Width="140" ItemsSource="{Binding SelectedItem.Files, ElementName=cmbSite}" />
</StackPanel>
</Window>
I'm trying to learn WPF Databinding with Entity Framework. I have implemented the tutorial in the link
and it works perfectly fine. I'm trying to insert a combo box myself and I want to bind it to category's name. But I couldn't achieve it.
Here is my attempt :
on XAML file :
<ComboBox HorizontalAlignment="Left" Margin="394,421,0,0" VerticalAlignment="Top" Width="120" Name="ComboCategory" Binding="{Binding Name}" />
and code-behind :
ComboCategory.ItemSource = _context.Categories.Local.ToList();
Can you tell me what I'm missing? Thanks.
Altough the use of the ItemSource is perfectly valid. I suggest you work with Data Binding. Here's a nice definition from MSDN:
Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change. For example, if the user edits the value in a TextBox element, the underlying data value is automatically updated to reflect that change.
I have answered a question where someone also had a problem with binding items to a ListBox. This is not a ComboBox but the principle is the same. Click here to go the question, and here to go straight to the answer.
Basically it comes down to this:
Set up your UI
Bind your data
In following code, I changed the properties a bit according to the properties used in the tutorial.
XAML:
<ListBox Margin="20" ItemsSource="{Binding Products}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=ProductId}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
C#
public class Product
{
public int ProductId { get; set; }
public string Name { get; set; }
public int CategoryId { get; set; }
public virtual Category Category { get; set; }
}
public class ProductViewModel
{
public List<Product> Products
{
get
{
return new List<Product>
{
new Product{ ProductId = 1, Name = "Product_1" },
new Product{ ProductId = 2, Name = "Product_2" }
};
}
}
}
//Following code can be placed in the Loaded event of the page:
DataContext = new ProductViewModel();
You are missing DisplayMemberpath property here
<ComboBox HorizontalAlignment="Left" Margin="394,421,0,0" VerticalAlignment="Top" Width="120" Name="ComboCategory" DisplayMemberPath = "Name" />
It worked when I used this in XAML:
<ComboBox HorizontalAlignment="Left" Margin="394,421,0,0" VerticalAlignment="Top" Width="120" Name="ComboCategory" DisplayMemberPath = "Name" ItemsSource="{Binding}" />
Couldnt believe it, check the link
The issue is ItemsSource(plural) not ItemSource(singular)