Encabezados de columna personalizados de enlace de WPF Datagrid

Question

Estoy tratando de descubrir cómo vincular el encabezado de columna y los datos principales de un WPF DataGrid a una fuente de datos usando un patrón MVVM.El resultado que estoy buscando se vería así:

_{(fuente: vallelunga.com)}

He diseñado correctamente los encabezados aquí, pero no estoy seguro de cómo vincular los valores en los encabezados.Específicamente, la propiedad IsChecked de la casilla de verificación, el índice seleccionado del cuadro combinado y el valor del cuadro de texto.

Anteriormente estaba usando una tabla de datos simple para completar los datos de la cuadrícula principal, pero necesitaré algo más complejo para contener tanto los datos de la cuadrícula como los valores de cada columna.O tal vez pueda almacenarlos como entidades completamente separadas.

Entonces, ¿alguien tiene alguna idea de cómo podría lograr este enlace?Una limitación es que las columnas deben generarse automáticamente ya que no tengo idea de cuáles serán hasta el tiempo de ejecución.La aplicación simplemente carga los datos de una hoja de cálculo de Excel y puede haber cualquier número de columnas presentes.

Gracias Brian

Answer 1

Esto es lo que terminé haciendo para usar esto con el patrón MVVM:

Tengo dos conjuntos de datos para vincular en mi modelo de vista:uno para los datos reales de la cuadrícula y otro para los encabezados de columna.Actualmente estos se exponen como dos propiedades:

// INotifyPropertyChanged support not shown for brevity
public DataTable GridData { get; set; } 
public BindingList<ImportColumnInfo> ColumnData { get; set; }

El truco para trabajar con dos conjuntos de datos diferentes está en la cuadrícula.He subclasificado DataGrid y le he dado a la grilla una fuente de datos adicional llamada ColumnSource, como propiedad de dependencia.Esto es lo que está vinculado a ColumnData en mi modelo de vista.Luego configuro el encabezado de cada columna generada automáticamente con los datos indexados apropiadamente en la fuente de datos ColumnSource.El código es el siguiente:

public class ImporterDataGrid : DataGrid
{
    protected override void OnAutoGeneratingColumn(DataGridAutoGeneratingColumnEventArgs e)
    {
        base.OnAutoGeneratingColumn(e);

        int columnIndex = this.Columns.Count;
        var column = new ImporterDataGridColumn();
        column.Header = ColumnSource[columnIndex];
        column.Binding = new Binding(e.PropertyName) { Mode = BindingMode.OneWay };
        e.Column = column;
    }

    public IList ColumnSource
    {
        get { return (IList)GetValue(ColumnSourceProperty); }
        set { SetValue(ColumnSourceProperty, value); }
    }

    public static readonly DependencyProperty ColumnSourceProperty = DependencyProperty.Register("ColumnSource", typeof(IList), typeof(ImporterDataGrid), new FrameworkPropertyMetadata(null));

}

Ahora puedo realizar la vinculación de datos normal en el encabezado con plantilla de mis columnas, que se vincularán con los datos en la propiedad ColumnData de mi modelo de vista.

ACTUALIZAR:Me pidieron que mostrara el XAML de mi grilla.Es muy básico, pero aquí está:

<Controls:ImporterDataGrid 
    AutoGenerateColumns="True" x:Name="previewDataGrid"
    VerticalScrollBarVisibility="Visible"
    HorizontalScrollBarVisibility="Visible"
    IsReadOnly="True"
    SelectionMode="Extended"
    HeadersVisibility="Column"
    ItemsSource="{Binding PreviewData}"
    ColumnSource="{Binding PreviewColumnData}"
    Style="{StaticResource ImporterDataGridStyle}"
    Background="White" CanUserReorderColumns="False" CanUserResizeRows="False"
    CanUserSortColumns="False" AlternatingRowBackground="#FFFAFAFA" AllowDrop="True" />

Y aquí está el ImporterColumnHeaderStyle:

<Style x:Key="ImporterDataGridColumnHeaderStyle" TargetType="{x:Type toolkit:DataGridColumnHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type toolkit:DataGridColumnHeader}">
                <Grid>
                    <toolkit:DataGridHeaderBorder Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" IsClickable="{TemplateBinding CanUserSort}" IsHovered="False" IsPressed="False" SortDirection="{TemplateBinding SortDirection}">
                        <Grid>
                            <CheckBox Height="16" Margin="6,6,16,0" Name="importCheckBox" IsChecked="{Binding Path=Import}" VerticalAlignment="Top">Import Column</CheckBox>
                            <StackPanel IsEnabled="{Binding Path=Import}">
                                <ComboBox Height="24" Margin="6,29,6,0" Name="columnTypeComboBox" VerticalAlignment="Top" SelectedValue="{Binding ColumnType}" ItemsSource="{Binding Source={local:EnumList {x:Type Models:ImportColumnType}}}">
                                </ComboBox>
                                <TextBox Height="23"  Margin="6,6,6,33" Name="customHeadingTextBox" VerticalAlignment="Bottom" Text="{Binding Path=CustomColumnName}" IsEnabled="{Binding ColumnType, Converter={StaticResource ColumnTypeToBooleanConverter}}" />
                            </StackPanel>
                            <TextBlock Height="20" Margin="6,0,6,7" Name="originalHeadingTextBlock" Text="{Binding Path=OriginalColumnName}" VerticalAlignment="Bottom" Foreground="Gray" />
                        </Grid>
                    </toolkit:DataGridHeaderBorder>

                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left">
                        <Thumb.Style>
                            <Style TargetType="{x:Type Thumb}">
                                <Setter Property="Width" Value="8"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="Cursor" Value="SizeWE"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                            <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                    <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right">
                        <Thumb.Style>
                            <Style TargetType="{x:Type Thumb}">
                                <Setter Property="Width" Value="8"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="Cursor" Value="SizeWE"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                            <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

Definitivamente soy un novato en WPF/MVVM/enlace de datos, pero últimamente he estado trabajando duro en estas cosas.No sé qué has conectado hasta ahora, pero primero querrás configurar el DataContext para tu Vista.Como estás usando MVVM, asumo que tienes un ViewModel, por lo que ese debería ser el DataContext para tu vista.

es decir.Si su Vista crea/posee su ViewModel, podría verse así:

MyViewModel vm = new MyViewModel();
this.DataContext = vm;

Puede vincular fácilmente datos de CheckBox, ComboBox y TextBox a propiedades en su ViewModel.He descubierto que la forma más sencilla es hacer que su ViewModel herede de una clase de modelo de vista base, como uno que escribió Josh Smith.Esto le dará un método para llamar internamente cuando desee que ViewModel notifique a la GUI de cualquier cambio en los valores.

Suponiendo que tiene propiedades como ImportColumn, LastName y LastNameText (todas las propiedades de C#, no campos que llaman a OnPropertyChanged en consecuencia), entonces su XAML se vería así:

<CheckBox IsChecked="{Binding ImportColumn}" />
<ComboBox SelectedItem="{Binding LastName}" />
<TextBox Text="{Binding LastName Text, Mode=TwoWay}" />

Espero que esto te ayude.Si no, por favor comente e intentaré hacer lo mejor que pueda para probar otras cosas.

Answer 3

Hacemos algo similar en nuestra aplicación.

Lo que hice fue derivar mi propio tipo de columna (DataGridSearchableBooleanColumn), luego reemplazo la plantilla DataGridColumnHeader y puse dos presentadores de contenido allí.el primero lo vinculo al contenido (igual que la plantilla predeterminada) el segundo lo vinculo a la columna.Utilizo una plantilla de datos para la columna (tengo algunas para diferentes tipos de búsqueda (texto, combo, booleana).luego agrego las propiedades adicionales a la columna para poder vincularme a ellas.Vea si este código tiene sentido.

   <!--Style for the datagrid column headers, contains a text box for searching-->
   <Style
      x:Key="columnHeaderStyle"
      TargetType="dg:DataGridColumnHeader">
      <Setter
         Property="Foreground"
         Value="#FF000000" />
      <Setter
         Property="HorizontalContentAlignment"
         Value="Left" />
      <Setter
         Property="VerticalContentAlignment"
         Value="Center" />
      <Setter
         Property="IsTabStop"
         Value="False" />
      <Setter
         Property="Padding"
         Value="1,2,1,2" />
      <Setter
         Property="Template">
         <Setter.Value>
            <ControlTemplate
               TargetType="dg:DataGridColumnHeader">
               <Grid
                  x:Name="Root">
                  <dg:DataGridHeaderBorder
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Padding="{TemplateBinding Padding}"
                     IsClickable="{TemplateBinding CanUserSort}"
                     IsHovered="{TemplateBinding IsMouseOver}"
                     IsPressed="{TemplateBinding IsPressed}"
                     SeparatorBrush="{TemplateBinding SeparatorBrush}"
                     SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
                     SortDirection="{TemplateBinding SortDirection}">

                     <Grid
                        HorizontalAlignment="Stretch"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid.Resources>
                           <DataTemplate
                              DataType="{x:Type local:DataGridSearchableBooleanColumn}">
                              <CheckBox
                                 Margin="0,5,0,0"
                                 IsThreeState="True"
                                 IsChecked="{Binding Path=IsChecked}" />
                           </DataTemplate>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition />
                           <ColumnDefinition
                              Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                           <RowDefinition
                              Height="19" />
                           <RowDefinition
                              Height="Auto" />
                        </Grid.RowDefinitions>

                        <ContentPresenter
                           Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Path=Content}" />

                        <Path
                           x:Name="SortIcon"
                           Fill="#FF444444"
                           Stretch="Uniform"
                           HorizontalAlignment="Left"
                           Margin="4,0,0,0"
                           VerticalAlignment="Center"
                           Width="8"
                           Opacity="0"
                           RenderTransformOrigin=".5,.5"
                           Grid.Column="1"
                           Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                           <Path.RenderTransform>
                              <ScaleTransform
                                 ScaleX=".9"
                                 ScaleY=".9" />
                           </Path.RenderTransform>
                        </Path>
                        <ContentPresenter
                           x:Name="columnHeaderContentPresenter"
                           Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Column}"
                           Grid.Row="1"
                           Grid.ColumnSpan="2"
                           Margin="0,0,0,0" />
                     </Grid>
                  </dg:DataGridHeaderBorder>

                  <Thumb
                     x:Name="PART_LeftHeaderGripper"
                     HorizontalAlignment="Left">
                     <Thumb.Style>
                        <Style
                           TargetType="{x:Type Thumb}">
                           <Setter
                              Property="Width"
                              Value="8" />
                           <Setter
                              Property="Background"
                              Value="Transparent" />
                           <Setter
                              Property="Cursor"
                              Value="SizeWE" />
                           <Setter
                              Property="Template">
                              <Setter.Value>
                                 <ControlTemplate
                                    TargetType="{x:Type Thumb}">
                                    <Border
                                       Background="{TemplateBinding Background}"
                                       Padding="{TemplateBinding Padding}" />
                                 </ControlTemplate>
                              </Setter.Value>
                           </Setter>
                        </Style>
                     </Thumb.Style>
                  </Thumb>
                  <Thumb
                     x:Name="PART_RightHeaderGripper"
                     HorizontalAlignment="Right">
                     <Thumb.Style>
                        <Style
                           TargetType="{x:Type Thumb}">
                           <Setter
                              Property="Width"
                              Value="8" />
                           <Setter
                              Property="Background"
                              Value="Transparent" />
                           <Setter
                              Property="Cursor"
                              Value="SizeWE" />
                           <Setter
                              Property="Template">
                              <Setter.Value>
                                 <ControlTemplate
                                    TargetType="{x:Type Thumb}">
                                    <Border
                                       Background="{TemplateBinding Background}"
                                       Padding="{TemplateBinding Padding}" />
                                 </ControlTemplate>
                              </Setter.Value>
                           </Setter>
                        </Style>
                     </Thumb.Style>
                  </Thumb>
               </Grid>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>