While working in WPF i have the need for a Dynamic Grid. By this i mean a grid that contains only one kind of object, has a template for that object etc. But unlike a similar ItemsControl like a Listbox, i want the grid to be given a Maximum Columns property. This should act as a delimiter which will then calculate the number of rows needed based on the number of objects within the grid. To do this, i thought of inherriting a Grid to make use of its Row and Column properties, but i have a problem... I dont know how to implement an ItemsSource property outside of inherriting the ItemsSource from an ItemsControl...
so my question comes in two parts...
Am i pursuing this the right way? should i be inherriting ItemsControl and trying to re-implement the Grid behavior
if this is the right way to do it, how do i implement an ItemsSource property with its corresponding ItemTemplate
Perhaps a better way would be to use a ListView? Here is an example how to achieve 3-column output: http://kristofmattei.be/2010/03/16/multi-column-listview/
Do you want something like UniformGrid? If you set the Columns property (and don't set the Rows property), it will automatically figure out how many rows to create to hold its items.
Related
I want to display multiple columns (2) and multiple rows. Data consists of Image and label.
Can anyone suggest a way todo it or provide a sample code. I find it challenging as to know, how to bind the data with multiple rows.
I do not have any code to show as I am not able to come up with anything close to what I want to acheive.
You could consider the RepeaterView control (https://github.com/XLabs/Xamarin-Forms-Labs/wiki/RepeaterView) that allows you to bind a control template (e.g. consisting of an Image and Label) to a set of objects as bound or set to the ItemsSource property - it will then create an instance of the control template for every item in the collection, and any binding references within the control template will relate to the individual items in the collection. This is easy to include in your project in isolation.
Alternatively if your requirements are more involved I would recommend the free DevExpress grid component (https://components.xamarin.com/view/devexpress-grid).
I have a very complex databinding I want to accomplish here using the below:
2 SQL CE tables named mainTable and secondaryTable
1 Fluidkit ElementFlow control named myElmntFlow
2 UserControls named myUsrCtrl and otherUsrCtrl
All of the above are already created and implemented but the UserControls are populated into the myElmntFlow control's items list programmatically through lenghty backgroundworker code that does take a good bit of time to run when the number of items to enter is > 20.
This is how they get created as of now:
The backgroundworker loops through each row of mainTable and adds the myUsrCtrl control to the list of items in myElmntFlow if the value of the row in column "Selected" = "'Yes'".
Then, it modifies the content of the newly added myUsrCtrl as such: it adds a otherUsrCtrl into the myUsrCtrl's stackpanel (named stckPanel) for each row in secondaryTable where the value of the column "FullName " = the value of the same column of the mainTable row we used to created the myUsrCtrl control.
And then populates the otherUsrCtrl's sevaral labels with the value of the secondaryTable row looked at at the moment.
Very confusing but it is a complex scenario. Let's use an example:
In mainTable, the row #4 has the FullName value of "Chad Jones" and
also has the Selected value of "Yes".
A new instance of the myUsrCtrl control is added to the
myElmntFlow's list of items as such:
myElmntFlow.Items.Add(myUsrCtrl);
The newly added myUsrCtrl control has a stackpanel (stckPanel)
We filter the secondaryTable where the FullName = "Chad Jones"
For each row in the now filtered secondaryTable, we add a new
instance of otherUsrCtrl to the previously created myUsrCtrl's
stckPanel control
The different labels in the otherUsrCtrl are populated with the values of the
row in secondaryTable
Can this possibly be converted into a DataBinding within the XAML of the controls as I want to implement several features later on (such as a nice SearchBox with autocomplete) that would be quite poor if they were to be coded behind by writing hundreds of line to tell which data to filter, sort , take , compare etc...
I wrote this as clearly as I could, just hope it's understandable.
PS: I would like to keep my SQL structure as the data is going to become quite consequent over time and I believe that the SQL is the way to go when manipulating thousands of lines.
It's not a very confusing scenario, it's just made confusing by the complex handling that goes on there. It can indeed be made much easier using bindings and MVVM (Model-View-ViewModel) so please take some time to read about the basics of that. There are a ton of tutorials and introductory materials on the web, a simple search will give you more than enough to go on.
When you're comfortable with the concepts, all you need is to transform the data into a sequence of objects (no matter how you go about it), then use an ItemsControl to represent the UI for a list of items. Use DataTemplates to specify how each item should be displayed, binding elements in the DataTemplate to the properties of each item. These things can be nested so you can have ItemsControls in your DataTemplates which use other DataTemplates etc.
In order to represent a collection of items bound to an ItemsControl look at using an ICollectionView which will help tremendously with filtering/sorting/etc.
Sorry about the very broad strokes but it is a pretty broad question. If you need more specific help I'll gladly add more.
So it seems like what I want to do should be straightforward, but I haven't been able to find a way to do it...
I need to display a list of objects that represent custom elements for entering data. Exactly how each object is displayed depends on the parameters of the object - so it could be a grid containing a name, description, and text box. It could be a grid with a couple labels and a dropdown. It could be an expander that contains multiple sub-objects. It could be something new that hasn't been built yet (so it needs to be extensible). Right now, I am populating this list by creating the FrameworkElement for each object and then adding it to a Grid by hand.
I would like to switch to keeping my objects in an ObservableCollection, and then binding that collection to a ListBox (or similar). That way, when new objects are added or removed from the list, the UI would automatically update itself accordingly. What I can't figure out is, is there a way to point it to my C# method for creating the custom-configured FrameworkElement for each object, so that when new objects are added the appropriate elements will be added to the UI?
Well, you're on the right track as far as wanting to use an ObservableCollection<T> and a ListBox control. Though, I'd venture to say you might want to simply use an ItemsControl since you probably don't care about selecting a particular item, but merely displaying an enumeration of items, and the ListBox would allow you to actually select one of those items.
Your problem is that you want each item in the list to display differently depending on certain criteria. For this you'll want to look at the DataTemplate and DataTemplateSelector classes.
Basically, a DataTemplate is a way of saying "I want my item to look like this.", and a DataTemplateSelector is a way of saying "I want to select this specific DataTemplate based on this criteria."
Here are a few examples on how to use the DataTemplate/DataTemplateSelector classes:
http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector
http://mikestedman.blogspot.com/2009/04/datatemplateselector.html
http://wpftutorial.net/DataTemplates.html
Seperating the presentation from the model is always a good idea. It seems like you are on the right track.
Foreach object type, you should create a DataTemplate and then use ItemTemplateSelector to select the correct template for each object type.
Good luck
I'm writing an application using WPF, and I need to make something that looks like this (see image):
What control should I use for this?
If you don’t need the groupings (the “Hire as chef” and “Seek dinner invitation” headings), then DataGrid should get you close. You can bind its ItemsSource to your collection of items, and define custom columns bound to your items’ properties.
For example, you can use a DataGridTextColumn for “Occupation”, DataGridCheckBoxColumn for “Tells Jokes?”, and DataGridTemplateColumn for more complex properties which require a custom DataTemplate to visualize, such as the main “Person” column or “Cooking skill”.
Edi: It appears that the DataGrid does support grouping as well.
You should go for ListView
http://msdn.microsoft.com/en-us/library/ms754027(v=vs.90).aspx
I'm not really sure how to go about my problem. Not looking for complete code just help with in which direction i should go. Since its MVVM I don't want any codebehind... if possible...
From the db i get the size of the "grid" i should create, for example 2x3.
Now i wish to place an "item" in this grid that takes up one or more spots.
I'm currently trying to do this with a ItemsControl that contains a grid (i want a grid because i want to use ShowGridLines="True")
But how do I create a dynamic grid? Thought about using uniformgrid but that one doesn't have ShowGridLines...
Second problem (since i'm a mvvm noob) is selecting the a spot in the grid. The one you click will not be a problem. The problem is if the item you're trying to place takes up two spots. How do I know which spot is the one next to the one i'm clicking?
Any help is appreciated
Since you cant easily Bind the Row/Column definitions of a Grid, i suggest you to build a simple custom control, which inherits directly from Grid.
Here is my approach with 3 additional dependency properties:
int MyColumnCount
int MyRowCount
ObservableCollection MyChilds
the MyColumnCount/MyRowCount will be bound to Properties in the ViewModel, which you update, when you get the new values from the database. Also the ViewModel will provide a collection of FrameworkElements, which will be the items in the Grid and is bound to MyChilds.
You can create new Controls in the ViewModel and use the attached property of the Grid, to set the Position. For example:
TextBlock b = new TextBlock() { Text = "Hello World!" };
Grid.SetRow(b, <your position>);
Grid.SetColumn(b, <your position>);
Grid.SetColumnSpan(b, <your column span>);
MyChilds.Add(b);
In the PropertyChangedCallbacks of the new int properties, you modify the Row/Column definitions, according to the new values. The callback of the collection property registers a collection changed event on the new ObservableCollection and adds the new items to the Grid's children, on changing events.
Thats all you need for the dynamic grid changes.
To your second question:
This is quite easy. In the event you catch you will get the sender of the clicked item in the grid. The sender is mostly the direct clicked control. You can use the static Grid functions again, to calculate the position:
Grid.GetRow(item);
Grid.GetColumn(item);
Grid.GetColumnSpan(item);
With the total number of rows/columns of the grid (My...Count) you can calculate neighbor positions.
Jan