I am making UI as shown in picture below.
It is a DataGrid, Itemsource is bound to a List. I cannot set ColumnSpan for the TextBox. First, I tried it with a UserControl but I couldn't fix DataGridTemplateColumn Header, then I tried DataGridTemplateColumn.CellTemplate but couldn't set the ColumnSpan.
Is there any way/method to make this kind of Datagrid?
Thank you in advance.
There is no ColumnSpan in the DataGrid, like in the normal Grid.
To get this kind of layout you have 3 choices, all with heavy drawbacks unfortunately.
1 merge cells
Use the merge event to merge cells together in code behind. See a
guide to this here This requires a large chunk of code behind
coding to get this right with your layout. So I would really advise
against this.
2 RowDetails
Use the build in RowDetails. This doesn't get the layout exactly like your's but is the easiest and closest build in function to your requirement.
It will look something like this:
It's easy to configure:
Set: RowDetailsVisibilityMode="Visible" in the DataGrid XAML.
And define your template for the row:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<TextBlock Text="{Binding Desc}" Background="LightGray"/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
[+] All DataGrid functions will work: Sorting, Adding Rows, Resizing ...
[-] The Details section span over the whole row.
See this tutorial about what you can do with row details.
3 Hack something together
With templates and code behindz. Some resources that might help you:
Override Row Template
Build a custom cell template
DataGrid in general
I have come with other solution using Grids, List and UserControl. In a simple way, I made it as following:
DataGrid is not suitable for what you want.
You had better use ListView or ListBox and datatemplate. By using them, you can show every kind of data in the way you want without DataGrid.
If you are not familiar with listview and datatemplete, please see the link below.
https://www.wpftutorial.net/ListBoxDataTemplate.html
Related
I'm writing an app in XAML, and I'm using binding for getting values to the UI layer. I'd like to see what my control will look like while making changes to the XAML, but because the data values are bound, many areas show up as blank (which, in turn, messes up the relative layout).
Is there any way to give XAML values to use for rendering the control review without replacing the Binding directives?
You can also use design time data to see how your xaml works. You just need to add new class that will be treated as design time view model. Its more elegant way to test xaml at design time.
Maybe you can set TargetNullValue or FallbackValue property in your binding, example:
<TextBlock Text="{Binding NotExsitOrNullPropertyName, TargetNullValue=SomeDefaultValue, FallbackValue=SomeDefaultValue}" ></TextBlock>
Hope it hepls.
I'm trying to figure out if there is a way to dynamically add controls into another control (I know this is a bit vague...). My program is in C# 4.0, and WPF. Basically, I'm trying to create a datagrid but as opposed to having normal type 'cells' (ie text, hyperlink etc), I need each cell to hold a number of items. I figured that this wasn't possible in the datagrid, so I'm trying to do the following: Using a stack panel, add a variable number of wrap panels. Each wrap panel will contain 7 grids, where each grid will hold the data I want (I'll likely use some user control in place of the grid I think...)
An example of the code I have so far...
<StackPanel Height="559" HorizontalAlignment="Left" Margin="24,11,0,0" Name="tyStackPanel" VerticalAlignment="Top" Width="783">
<WrapPanel Height="100">
<Grid Width="100" Height="100">
</Grid>
</WrapPanel>
<WrapPanel Height="100">
</WrapPanel>
</StackPanel>
Is there a way to create a variable number of Wrap Panels though? (ie like you would have a variable number of rows in a datagrid)
Any help and suggestions is much appreciated!
P.S. Figure I should explain what I'm trying to achieve a bit better. I have a collection of items, each with 5 properties that I want displayed together. These items are grouped by Name (like a row in a data column) and a column header (which is not one of the 5 properties). I want to group the collection by (Name, ColumnHeader) pairs, and then in each "cell" display those 5 properties. In the way I'm trying to set it up above, there would be a WrapPanel per 'Name' and a Cell/Grid contained in it for each ColumnHeader.
WPF supports this very well with the ItemsControl and its various derived controls, one of which is the DataGrid, which actually does support the scenario you're looking for.
Basically, when you use an ItemsControl, DataGrid or one of these item controls, you bind the ItemsSource to whatever property holds your data items, and define the DataTemplates for each item, which can be any arbitrarily-complex block of XAML. For DataGrid, you can swap a normal column for a DataGridTemplateColumn, which can, again, be as complex as you want.
Check out the Data Templating Overview for, well, an overview.
I have a problem using C# and WPF of binding Text to TextBoxes in a Grid. The binding actually works, except that it doesn't show up on the UI until I double click in the TextBox to edit. Then the text fills in. I'm using DataGridTemplateColumn.CellEditingTemplate. I've noticed that if I just use CellTemplate, the data fills in (but obviously I can't change it). Can anyone tell me what must be different? I'll post code if needed.
If you simply want to bind a text column then you can do this.
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
If you have something more complicated in mind with a DataGridTemplateColumn, then you may need a to specify a CellTemplate and a CellEditingTemplate. You'll need to describe what your trying to do, and show the Xaml.
I have a datagrid from wpf Toolkit, with the itemsource binded to a Observable<Item>. In the Item Class, I have another Observable<bool> list containing the values to be displayed.
I want to display these values in a custom template. If possible, I want to show other rows as well (which are normal Properties).
How can I perform this? Thank you for your answers.
Update (just to make clear): the second list should be displayed in normal columns, not as master/detail. Imagine the second list would contain 2 bools, and the Item class contains 1 extra property. In that case, 3 columns should be shown.
You can create second datagrid and bind SelectedItem.Items from first grid to itemssource of second. Or you can include second datagrid in row details of your datagrid like this:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Items}"/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
Take a look at this examples and this
You can write attached property to datagrid which will create additional columns for you on grid. This property implementor will define binding with individual Observable values.
I recall in Silverlight the ability to place an Attribute on a given property in the Model for an alternate display name when auto generating columns on a data grid. Is this possible in WPF? I don't want to use the event handler to change the names.
Found it...here is what I was referencing DisplayAttribute, however that does not appear valid in WPF, only SL. For WPF it can be done like this...keeping everything in XAML...
<dg:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding DatabaseConnections, Mode=Default}">
<dg:DataGrid.Columns>
<dg:DataGridTextColumn Header="Display" Binding="{Binding DisplayName}"></dg:DataGridTextColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
...this allows you to change the DisplayName property to get displayed as "Display" in the header of the DataGrid.
Check out: How to: Customize Auto-Generated Columns in the DataGrid Control.