WPF Datagrid binden benutzerdefinierte Spaltenüberschriften

Ich versuche herauszufinden, wie zu binden eine WPF-DataGrid-Spalte-header und die wichtigsten Daten in einer Datenquelle mit einer MVVM-Muster. Das Ergebnis ich bin auf der Suche nach würde so Aussehen:

WPF Datagrid binden benutzerdefinierte Spaltenüberschriften

_{(Quelle: vallelunga.com)}

Habe ich erfolgreich gestalteten die überschriften hier, aber ich bin mir nicht sicher, wie das binden der Werte in den Headern. Insbesondere die IsChecked-Eigenschaft der check-box, den ausgewählten index der combo-box und den Wert der text-box.

Ich war vorher über eine einfache DataTable zu bevölkern, die Haupt-raster-Daten, aber ich bin gehen zu müssen, etwas komplexeres zu halten, um sowohl die raster-Daten und die Werte für jede Spalte. Oder vielleicht kann ich speichern Sie Sie als separate Einheiten vollständig.

So, hat jemand eine Idee, wie ich vielleicht ziehen Sie diese verbindlich? Eine Einschränkung ist, dass müssen die Spalten werden automatisch generiert, weil ich keine Ahnung habe, was werden Sie erst zur Laufzeit. Die Anwendung lädt einfach das Formular eine Excel-Tabelle, und es kann eine beliebige Anzahl von Spalten vorhanden.

Dank,
Brian

InformationsquelleAutor Brian Vallelunga | 2010-02-03

Hier ist, was ich am Ende tun, um mit dem MVVM-Muster:

Ich habe zwei Sätze von Daten für die Bindung auf meine anzeigen Modell: eine für die eigentlichen raster-Daten und eine für die Spalte Header. Gegenwärtig werden diese ausgesetzt sind, als zwei Eigenschaften:

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

Der trick arbeitet mit zwei unterschiedliche Sätze von Daten ist im raster. Ich habe Unterklassen der DataGrid-und angesichts der grid ist eine zusätzliche Datenquelle genannt ColumnSource, als Abhängigkeitseigenschaft. Dies ist, was gebunden ist an die ColumnData auf meinem view-Modell. Ich habe dann den header von jedem automatisch generierte Spalte an der entsprechend indizierten Daten in der ColumnSource Datenquelle. Der code ist wie folgt:

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));

}

Kann ich jetzt normal Datenbindung in die Vorlagen-Kopfzeile meiner Spalten, die alle binden, gegen die Daten in der ColumnData Eigenschaft meiner Ansicht Modell.

UPDATE: ich wurde gebeten, zu zeigen, die XAML-Code für mein raster. Es ist wirklich grundlegende, aber hier ist es:

<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" />

Und hier ist die 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>

Wäre interessant zu sehen, die ganze Lösung. Zum Beispiel, was ist ImporterDataGridColumn ?
Sie können Sie ignorieren, ImporterDataGridColumn und verwenden nur DataGridTextColumn. Es ist nur eine standard-Spalte, die Unterklassen-ich dachte, ich würde zusätzliche Funktionalität mit, aber nicht. Die gesamte grid-code ist oben. Das view-Modell legt die GridData und ColumnData Eigenschaften, die oben verzeichnet sind, mit Daten gefüllt, wo immer Sie wollen. Die XAML-dann Haken die beiden bis: <Kontrollen:ImporterDataGrid AutoGenerateColumns="True" ... " ItemsSource="{Binding GridData}", ColumnSource="{Binding ColumnData}" />
Könnten Sie (pretty please) fügen Sie die Ansicht xaml-Code für diese?

InformationsquelleAutor Brian Vallelunga

0

Ich bin definitiv ein WPF /MVVM /databinding-noob, aber haben hart gearbeitet, über diese Dinge in letzter Zeit. Ich weiß nicht, was Sie haben verdrahtet, so weit, aber erste Sie wollen DataContext für Ihre Ansicht. Da bist du mit MVVM, ich nehme an, Sie haben ein ViewModel, so sollte der DataContext für Ihre Ansicht.

d.h. wenn Sie Ihre Anzeigen erstellen Sie /Ihre eigenen ViewModel, könnte es wie folgt Aussehen:
```
MyViewModel vm = new MyViewModel();
this.DataContext = vm;
```
Können Sie ganz einfach databind Ihre CheckBox, ComboBox und TextBox-Eigenschaften in der ViewModel. Die ich gefunden habe, ist der einfachste Weg, um Ihre ViewModel Erben von einem Basis-viewmodel-Klasse, wie die eine, Josh Smith schrieb. Dies wird Ihnen eine Methode, um intern anzurufen, wenn Sie wollen, dass die ViewModel zu Benachrichtigen, die GUI-änderungen in den Werten.

Vorausgesetzt, Sie haben Eigenschaften wie ImportColumn, LastName, und LastNameText (alle C# - Eigenschaften, nicht Felder, dass call OnPropertyChanged entsprechend), dann ist dein XAML-Code würde wie folgt Aussehen:
```
<CheckBox IsChecked="{Binding ImportColumn}" />
<ComboBox SelectedItem="{Binding LastName}" />
<TextBox Text="{Binding LastName Text, Mode=TwoWay}" />
```
Ich hoffe, das hilft Ihnen heraus. Wenn nicht, bitte Kommentar, und ich werde versuchen so gut wie ich kann, um zu versuchen, andere Dinge aus.
- Ich bin mit Caliburn und habe in meinem ViewModel bereits erstellt und funktioniert. Das problem ist wie soll ich die Datenbindung zum binden sowohl die Kopf-und raster-Daten zur gleichen Zeit. Dies ist, wo ich zu kämpfen.
InformationsquelleAutor Dave

Tun wir etwas ähnliches in unserer app.

Was ich gemacht habe, ist abgeleitet meine eigenen Spalte Typ (DataGridSearchableBooleanColumn), dann Ersetze ich die DataGridColumnHeader Vorlage habe ich zwei content Moderatoren in es. der erste, den ich binden, um den Inhalt (der gleiche wie der Standard-Vorlage) die zweite, die ich binden an die Säule. Ich benutze eine Daten-Vorlage für die Spalte (ich habe ein paar von Ihnen für unterschiedliche such-Arten (text, combo, boolean). dann füge ich die zusätzlichen Eigenschaften der Spalte, so kann ich an Sie gebunden. Sehen Sie, ob dieser code macht Sinn.

   <!--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>

Dies ist interessant, aber ich bin nicht sicher, es löst mein problem. Auch ich habe erstellt eine neue benutzerdefinierte Spalte und bin übergeordnete OnAutoGeneratingColumn und Austausch der vorhandenen Spalte mit meiner custom-version. Ihr system scheint zu funktionieren, aber ich glaube, Sie brauchen, um eine Schleife durch die Spalten, um die Daten zu erhalten, während ich versuche, eine Bindung mit einer externen Datenquelle über das MVVM-pattern. Wenn ich könnte, um den index der aktuellen Spalte, ich glaube, ich habe eine Lösung mit einer zweiten Datenquelle.
dies ist, wo das raster fällt, ist es nicht völlig tun-in der Lage, in einer mvvm-Muster, da die columns-Auflistung ist nur Lesen (Sie können hinzufügen, entfernen, aber nicht eingestellt) habe ich eine Unterklasse der raster, geben Sie es eine zusätzliche Eigenschaft, die eine Schnittstelle, dann binden Sie diese, meine Ansicht-Modell. dann lassen Sie es verwaltet die Spalten im code. Eine andere Lösung ist die Unterklasse der Startaufstellung geben Sie ihm einen anderen Spalten-Auflistung, die Sie binden können und beobachten Sie die änderungen auf dieser zum hinzufügen/entfernen von Spalten. (dann ist dein view-model konnte eine direkte Bindung)

InformationsquelleAutor Aran Mulholland

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.