UserControls and List of Objects in Grid WPF [closed] - wpf

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to show in WPF a grid (no matter if grid, datagrid etc.). Every cell should be filled by a usercontrol. The usercontrol gets their content by an object.
So in the beginning I there's an object list List. The number of columns of the grid is given. The number of rows results from the number of objects in the list (this is not my problem). Every object can be shown in a usercontrol.
MyObject1 + MyUserControl -> Cell1
MyObject2 + MyUserControl -> Cell2
...
Here's a picture from Excel, to show, what it should look like.
Thank you!

You don't need grid, you should use ItemsControl with WrapPanel as ItemsPanel.
<ItemsControl ItemsSource="{Binding YourList}" ItemTemplate="{StaticResource YourItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<DataTemplate x:Key="YourItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Email}"/>
<Button Content="Remove item" Command="{Binding RemoveCommand}"/>
</StackPanel>
</DataTemplate>

Related

WPF itemscontrol child alignment

I have a WPF MVVM application with an itemscontrol. The number of horizontal child items is influenced by the itemscontrol width. There is only 1 thing i haven't solved. I'm trying to align the child elements in a way that there are always centered. I have made quick pictures in paint to demonstrate what i mean.
How it's now:
If the width further inceares then a forth item will be added horizontally. This function needs to stay.
How I would like to see it:
If there is enough room for a forth item then it needs to be added. I'm thinking that the answer could be a simple XAML property. Anybody an idea?
Put the ItemsControl in a Grid and set its HorizontalAlignment to Center:
<Grid>
<ItemsControl ItemsSource="{Binding Images}" HorizontalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" .../>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

Displaying details when clicking a DataGrid row

I have a DataGrid that displays a list of classes for a professor. What I want to do is to allow the professor to click on a row on the DataGrid and then display the students that are in that class.
Is that possible with WPF?
In the datagrid, add the following sections:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding students}">
</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
If you want to display the details inline inside the table, #AnsonWoody wrote the answer. If you want to display the details outside in a separate control, use SelectedItem of the DateGrid or CurrentItem of the CollectionViewSource.
Assuming your datacontext contains the items in ClassesWithStudents and each item has a property Students, you could do the following:
<StackPanel x:Name="panel1">
<StackPanel.Resources>
<CollectionViewSource x:Key="classesCollection" Source="{Binding ClassesWithStudents}"/>
</StackPanel.Resources>
<DataGrid x:Name="dg1" ItemsSource="{Binding Source={StaticResource classesCollection}}">
</DataGrid>
<!-- Bind current item with path=/ -->
<ContentControl Content="{Binding Source={StaticResource classesCollection},Path=/Students}"/>
<!-- Bind selected item -->
<ContentControl Content="{Binding ElementName=dg1,Path=SelectedItem.Students}"/>
</StackPanel>
Ofcourse the ContentControl is only a placeholder. If Students is a collection, use something like <ItemsControl ItemsSource="{Binding Source={StaticResource classesCollection},Path=/Students}"/> or whatever suits your needs in order to get a nice looking student representation.

How do I edit a WPF DataTemplate in VS 2010 Design view?

How do I edit a WPF DataTemplate (or similar) in VS 2010 Design view?
Is that even possible? I would love it if I could drag and drop template items (such as TextBlocks) around like I can with normal (non-template) items. Doing so makes repositioning large numbers of elements much faster and easier than going line by line with cut/copy/paste methods.
For example, I would like to edit the following code in the Design view. However, the only control I can select is the ListView. In order to make any changes to the child-objects of ListView, I have to move the cursor to it or type it out. It's very limiting.
Example XAML:
<ListView ItemsSource="{Binding}"
DataContext="{Binding}"
d:DataContext="{d:DesignData Source=SampleData/PeopleSampleData.xaml}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<WrapPanel Orientation="Vertical">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text="{Binding LastName}" />
<TextBlock Text="{Binding Age}"/>
</WrapPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Note: You might say editing 3x TextBlocks isn't too bad, and I agree, but I've shortened the code substantially for example purposes.
I think Microsoft want to sell Blend too, so they will not incorporate this functionality into the VS designer.

wpf treeview binding [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is there any simple tutorial for beginners about treeview binding in WPF?
What should we write in ItemsSource, DataType, ItemTemplate attributes if there's
one List of items?
IList<string> items = new List<string>();
items.Add("item1");
items.Add("item2");
items.Add("item3");
XAML code:
<TreeView Name="treeView1">
<TreeView.Resources> <!-- what does it mean? -->
<HierarchicalDataTemplate DataType="???" ItemsSource="{Binding ???}"></HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
To Fully understand how to use the wpf treeview with data binding, I went through the following tutorials in order -
A very simple example of treeview binding using recursion
http://testdrivendevelopment.wordpress.com/2008/07/15/databinding-wpf-treeview-using-recursion/
Claus Konrads simple example of data binding with the treeview. It's the most straightforward example I have come across and should get any newcomers to wpf up to speed.
http://blog.clauskonrad.net/2011/04/how-to-make-hierarchical-treeview.html
Mike Hillbergs tutorial shows, in detail, the ins and outs of the treeview, how it compares to other wpf controls, and how to bind data.
http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-by-step.aspx
The trick is that ItemsSource points to the next collection down.
e.g Imagine you have a collection of type A, and each A contains a description and a collection of type B; and each B contains a description and a collection of type C. The binding would look like this:
<TreeView Width="400" ItemsSource="{Binding CollectionOfA}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type TypeA}" ItemsSource="{Binding CollectionOfB}">
<TreeViewItem Header="{Binding TypeADescription}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type TypeB}" ItemsSource="{Binding CollectionOfC}">
<TreeViewItem Header="{Binding TypeBDescription" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type TypeC}">
<TreeViewItem Header="{Binding TypeC}" />
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
Have a look at Josh Smiths excellent tutorial
Treeview is one control in wpf that you have to appoach in a little diffrent manner.It is simple and efficient and at the same time a pain to understand and get in track for a beginer,especially those coming from the windows appliaction backgroud.Please go through the MVVM pattern first and then try to approach the treeview.
The Josh Smith article below is a good place to start.
http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx

WPF Datagrid Template column edit event and alternating column color

I have been using WPF for quiet sometime. I know DataGrid in WPF does not have a Column collection as dependency property so columns cannot be added dynamically.
The application I am developing is highly dynamic so the number of columns are not known. So I am creating DataGridTemplate columns from code behind.
Problem 1 : I want alternating columns to have different background color. How do I do it programatically?? (DataGridTemplateColumn doesnot have a Background property so I am not able to figure out a solution)
Problem 2 : My DataGridTemplateColumn has a DataTemplate in which I have a StackPanel with 2 TextBoxes in it. There is an event in DataGrid called CellEditing Event which fires when we edit a cell. It works for default column, but for my column if I edit those TextBoxes, the event is snot getting fired!!! So how do I achieve it??
(I sometimes get amazed by WPF !!!)
Problem Zero You can have the columns in a datagrid generated for you if you use AutoGenerateColumns="true" when you set up your datagrid. It won't add columns dynamically later, but it might if you reset the itemssource? (not positive on that one)
Problem One DataGrid has properties AlternatingRowBackground and AlternationCount to set up alternating row backgrounds. But i don't see anything for alternating column backgrounds in the grid itself. You could do it inside your datatemplate, though:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Background="Red" Foreground="White">I'm Red</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
But i still see a margin inside that even with margin=0, so the cells look funny if you use any really obvious colors.
Problem Two do you mean the CellEndEditing event? Because i don't see any other cell editing events. I tried the following:
<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" CellEditEnding="DataGrid_CellEditEnding">
<DataGrid.Columns>
<DataGridTextColumn Header="A" Binding="{Binding Field0}" />
<DataGridTemplateColumn Header="BC">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Field1}"/>
<TextBlock Text="{Binding Field2}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Field1}"/>
<TextBox Text="{Binding Field2}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
And my DataGrid_CellEditEnding event handler gets called whenever either of the textboxes in the CellEditingTemplate lose focus, whether data changed or not, so things appear to be working for me.
Are you using some other DataGrid than the "built in" WPF one?

Resources