I am trying to nest a WrapPanel inside a DataGrid cell. What am I missing?
This is used to display sports team information.
A Team has a TeamName, a Coach, a Roster of Players where each player has a FullName.
More technically speaking, the Roster property is a ObservableCollection where PlayerViewModel has FullName property.
<DataGrid ItemsSource="{Binding Teams}">
<DataGrid.Columns>
<DataGridTextColumn Header="Team Name" Binding="{Binding TeamName}" />
<DataGridTextColumn Header="Coach" Binding="{Binding Coach}" />
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<WrapPanel DataContext="{Binding Roster}">
<Label Content="{Binding FullName}">
</WrapPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
I figured it out. This worked.
<DataGridTemplateColumn Width="150">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<WrapPanel DataContext="{Binding Roster}">
<Label HorizontalAlignment="Center" Content="{Binding Path=FirstName}" />
</WrapPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Related
Why datepicker is not appearing in my datagrid.
I have textblock, one datepicker and then again textblock in total three columns, Those two textblocks appears properly but the datepicker do not appear. whereas there is no problem in binding because if a have applied same in the listview and there they are appearing, it's something wrong i have done in xaml in datagrid which i am not able to figure it out. I want user to select dates from this datepicker.
Below is my code, what i am missing any idea ?
<DataGrid AutoGenerateColumns="False"
ColumnWidth="*"
AutoGenerateColumns="False"
CanUserSortColumns="False"
ItemsSource="{Binding EquipMaintCollection}"
SelectedIndex="{Binding SelectedIndexOfItem}"
SelectedItem="{Binding SelectedMaintElement}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="{x:Static res:LocalizedString.Name}" />
<DataGridTemplateColumn Header="MainteDue">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker x:Name="MainteDue" SelectedDate="{Binding MainteDue, Mode=TwoWay}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MainteDue,Mode=TwoWay,StringFormat={}{0:dd/MM/yyyy}}" VerticalAlignment="Center" HorizontalAlignment="Left">
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Until Due" Width="*" MinWidth="100" Foreground="{Binding UntilDue, Converter={StaticResource BoolToRedBrushConverter}}" Binding="{Binding Path=UntilDue}" />
</DataGrid.Columns>
</DataGrid>
I have a WPF DataGrid and I am trying to display a TextBlock when not in edit mode and a ComboBox when editing. I would think this would be easy, but it is not. I can only get it to working using a brute force method of placing the controls in a Grid and using a Visibility binding to show the controls in turn; which is a real pain.
Why does the following not work:
I can get one or the other to show, but not both based on cell editing.
<DataGrid Background="DarkGray" ItemsSource="{Binding Items}" CanUserAddRows="false" AutoGenerateColumns="False"
ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionChanged="DataGrid_SelectionChanged" SelectedIndex="{Binding SelectedIndex}"
behaviors:DataGridBehavior.OnSelectAction="{Binding Path=OnSelectionChanged}">
<DataGrid.Columns>
<DataGridTextColumn Header="Button" Binding="{Binding Button}" />
<DataGridTextColumn Header="Button Display" Binding="{Binding ButtonDisplay}" />
<DataGridTextColumn Header="Reason Code" Binding="{Binding ReasonCode}" />
<!--<DataGridTextColumn Header="Count Stamps" Binding="{Binding CountStamps}" />-->
<DataGridTemplateColumn Header="Count Stamps">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox IsEditable="True" SelectedValue="{Binding CountStamps}"
ItemsSource="{Binding Values}" DisplayMemberPath="Name" SelectedValuePath="Value" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding CountStamps}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Description" Binding="{Binding Description}" Width="*" />
</DataGrid.Columns>
I'm writing a UserControl with two DataTemplates in the resources:
DataTemplate 1
<DataTemplate x:Key="Template1">
<DataGrid ItemsSource="{Binding}" SelectionChanged="DataGridSelectionChanged">
<DataGrid.Columns>
<DataGridTemplateColumn Header="FilePath" Width="Auto" SortMemberPath="FilePath">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FilePath}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FileSize" Width="Auto" SortMemberPath="FileSize">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileSize}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
DataTemplate2
<DataTemplate x:Key="Template2">
<DataGrid ItemsSource="{Binding}" SelectionChanged="DataGridSelectionChanged">
<DataGrid.Columns>
<DataGridTemplateColumn Header="FilePath" Width="Auto" SortMemberPath="FilePath">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FilePath}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FileSize" Width="Auto" SortMemberPath="FileSize">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileSize}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FileCreator" Width="Auto" SortMemberPath="FileCreator">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileCreator}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FileCreated" Width="Auto" SortMemberPath="FileCreated">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileCreated}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
With a DataTemplateSelector I decide which DataTemplate should be used. Everything just works fine.
But as you can see DataTemplate2 has the same two cells as DataTemplate1 plus two additional. This is just an small example. In my application DataTemplate1 has around 15 columns. And with DataTemplate2 there are another 10 columns.
My question now is: Is there a possibility that I can inherit(or so) the columns from another DataGrid inside a DataTemplate and add additional columns?
You can add the Columns as Resource and Refer them in the DataGrid as resources. Make sure you should marked them as x:Shared as false to avoid the conflict.
Refer below code.
<DataGridTemplateColumn x:Key="FilePath" x:Shared="False" Header="FilePath" Width="Auto" SortMemberPath="FilePath">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FilePath}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Key="FileSize" x:Shared="False" Header="FileSize" Width="Auto" SortMemberPath="FileSize">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileSize}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataTemplate x:Key="Template1">
<DataGrid ItemsSource="{Binding}" SelectionChanged="DataGridSelectionChanged">
<DataGrid.Columns>
<StaticResource ResourceKey="FilePath"/>
<StaticResource ResourceKey="FileSize"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
<DataTemplate x:Key="Template2">
<DataGrid ItemsSource="{Binding}" SelectionChanged="DataGridSelectionChanged">
<DataGrid.Columns>
<StaticResource ResourceKey="FilePath"/>
<StaticResource ResourceKey="FileSize"/>
<DataGridTemplateColumn Header="FileCreator" Width="Auto" SortMemberPath="FileCreator">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileCreator}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FileCreated" Width="Auto" SortMemberPath="FileCreated">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="4,1" Text="{Binding FileCreated}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
Refer this link as well WPF DataGrid Columns in Style or resource
AFAIK there is no inherit possibility in columns in datagrid, but what I suggest is --
Create a customGrid control and add all the common columns to it.
Use this grid in your template and add the columns that make sense for that template.
So you will have, BaseGrid with columns 1,2,3,4 and then you can use this baseGrid and add columns 5,6 in one template and 7,8 in another template.
You will have 2 resulting grids, one with columns 1,2,3,4,5,6 and another with 1,2,3,4,7,8
DataGrid.Columns is a collection of columns and you can add stuff into it whenever you wish for.
My ObservableCollection has three items, and the rows are consistently shown in the datagrid.
I cannot turn into edit mode a single cell of my DataGrid. I tried click, click-click, double-click, F2,…, but the whole row stay selected. How can I let the user edit the datagrid.
I found similar datagrid edit-questions in other posts but no-one solved my problem. Here is the code (WPF NetFramework 4.5). Pursposely, only the first column is non-editable (readonly).
<DataGrid Name="myDataGrid" Grid.Row="2" AutoGenerateColumns="False" ItemsSource="{Binding}" IsReadOnly="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="name" IsReadOnly="True" Width="200" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Formulation" Width="100" IsReadOnly="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding FormulationStr}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBlock Text="{Binding FormulationStr}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="volume Diff" Width="100" IsReadOnly="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding volumeDiff}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBlock Text="{Binding volumeDiff}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
You have placed TextBlock in cell template as well as in cell editing template. That's why you are not noticing any change on pressing F2 and double-clicking the cell since no matter what it will always be TextBlock which you can't edit.
Either placed TextBox in your CellEditingTemplate like this -
<DataGridTemplateColumn Header="Formulation" Width="100" IsReadOnly="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding FormulationStr}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding FormulationStr}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
Or either simply use the DataGridTextColumn in place of DataGridTemplateColumn which internally provides the support what are you trying to achive by the above code -
<DataGridTextColumn Header="Formulation" Width="100" IsReadOnly="False" Binding="{Binding FormulationStr}" />
New to programming and need a little assistance. I have a WPF usercontrol used for an Outlook Add-in and everything was going swimmingly until I tried a datagrid with a datepicker in the celleditingtemplate column but the celltemplatecolumn simply has a textblock. The idea is to have the textblock bound to the datasource (which is working fine) and when the user edits the column, the datepicker shows and the user can select a date. I simply cannot figure out how to send the value from the selecteddate to the textblock and I'm completely at my wits end. Below is the datagrid with its bindings, simple SQL table with the following fields, [Project],[Deadline],[DaystoDeadline],[Responibility],[ProcessCount],[TasksCompleted],[TasksRemaining]. Any assistance would be greatly appreciated.
<Grid>
<DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="6,0,0,0" Name="ProjectsGrid" ScrollViewer.CanContentScroll="True" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" ItemsSource="{Binding}" CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Commands">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Click="Select_Button" Content="Select" Name="SelectButton" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding Project}" Header="Project" IsReadOnly="True" FontFamily="Verdana" />
<DataGridTemplateColumn Header="Deadline">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Deadline, StringFormat='yyyy/MM/dd'}" FontFamily="Verdana" x:Name="DeadlineTxt" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker SelectedDate="{Binding Deadline, StringFormat='yyyy/MM/dd'}" FontFamily="Verdana" x:Name="DeadlineDatePicker">
<DatePicker.CalendarStyle>
<Style TargetType="Calendar">
<Setter Property="DisplayMode" Value="Month"/>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding DaystoDeadline}" Header="Days to Deadline" IsReadOnly="True" FontFamily="Verdana" />
<DataGridTextColumn Binding="{Binding Responsibility}" Header="Responsibility" IsReadOnly="True" FontFamily="Verdana" />
<DataGridTextColumn Binding="{Binding Processes}" Header="Processes" IsReadOnly="True" FontFamily="Verdana" />
<DataGridTextColumn Binding="{Binding Completed}" Header="Completed" IsReadOnly="True" FontFamily="Verdana" />
<DataGridTextColumn Binding="{Binding Remaining}" Header="Remaining" IsReadOnly="True" FontFamily="Verdana" />
</DataGrid.Columns>
</DataGrid>
I would start by taking off the names of the controls in the DataTemplate (x:Name="DeadlineTxt" x:Name="DeadlineDatePicker") and remove the StringFormat from the SelectedDate: (SelectedDate="{Binding Deadline}")
<DataGridTemplateColumn Header="Deadline">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Deadline, StringFormat='yyyy/MM/dd'}" FontFamily="Verdana" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker SelectedDate="{Binding Deadline}" FontFamily="Verdana" >
<DatePicker.CalendarStyle>
<Style TargetType="Calendar">
<Setter Property="DisplayMode" Value="Month"/>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>