WPF Datagrid reliure personnalisée en-têtes de colonne

Je suis à essayer de comprendre comment lier un WPF grille de données de l'en-tête de colonne et les principales données à une source de données à l'aide d'un modèle MVVM. Le résultat, je suis à la recherche d'ressemblerait à ceci:

le texte d'alt http://brian.vallelunga.com/files/datagrid-custom-headers.PNG

J'ai réussi à parer les en-têtes ici, mais je n'en suis pas sûr comment faire pour lier les valeurs dans les en-têtes. Plus précisément, la propriété IsChecked de la case, l'index sélectionné de la boîte combo et la valeur de la zone de texte.

J'étais auparavant à l'aide d'un simple DataTable pour remplir la grille principale de données, mais je vais avoir besoin de quelque chose de plus complexe pour tenir à la fois la grille de données et les valeurs de chaque colonne. Ou peut-être que je peux les conserver comme des entités séparées entièrement.

Donc, quelqu'un a une idée de comment je pourrais tirer de cette liaison? Une limitation est que les colonnes doivent être auto-généré depuis je n'ai aucune idée de ce à quoi ils vont jusqu'à l'exécution. L'application, il suffit de charges, le formulaire de données d'une feuille de calcul Excel, et il peut être n'importe quel nombre de colonnes présentes.

Grâce,
Brian

OriginalL'auteur Brian Vallelunga | 2010-02-03

Voici ce que j'ai fait pour l'utiliser avec le modèle MVVM:

J'ai deux ensembles de données pour la liaison sur mon modèle de vue: l'un pour la grille de données et une pour les en-têtes de colonne. Actuellement, celles-ci sont exposées comme deux propriétés:

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

Le truc à travailler avec les deux différents ensembles de données dans la grille. J'ai sous-classé la grille de données et compte tenu de la grille d'une source de données supplémentaire appelé ColumnSource, comme une propriété de dépendance. C'est ce qui est lié à la ColumnData sur mon modèle de vue. J'ai ensuite définir l'en-tête de chaque auto-généré colonne pour les données indexées dans la ColumnSource de la source de données. Le code est comme suit:

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

}

Je peux maintenant effectuer normal de liaison de données dans le basé sur un modèle d'en-tête de mes colonnes, qui tous se lier contre les données dans le ColumnData propriété de mon point de vue modèle.

Mise à JOUR: j'ai été invité à montrer le code XAML pour ma grille. C'est vraiment de base, mais ici il 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" />

Et voici le 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>

Serait intéressant de voir l'ensemble de la solution. Par exemple, ce qui est ImporterDataGridColumn ?
Vous pouvez ignorer ImporterDataGridColumn et il suffit d'utiliser DataGridTextColumn. C'est juste une colonne standard que je sous-classé en pensant que j'aurais besoin de fonctionnalités supplémentaires, mais n'a pas. L'ensemble de la grille de code est ci-dessus. Le modèle de vue expose le GridData et ColumnData propriétés énumérées ci-dessus, les données peuplée à partir de là où vous voulez. Le code XAML puis crochets les deux: <Contrôles:ImporterDataGrid AutoGenerateColumns="True" ... ItemsSource="{Binding GridData}", ColumnSource="{Binding ColumnData}" />
Pourriez-vous (jolie s'il vous plaît) ajouter la vue xaml pour cela?

OriginalL'auteur Brian Vallelunga

0

Je suis certainement un WPF /MVVM /liaison de données noob, mais qui ont travaillé dur sur ce genre de choses dernièrement. Je ne sais pas ce que vous avez câblé jusqu'à présent, mais d'abord, vous devrez définir le DataContext de la Vue. Puisque vous êtes en utilisant MVVM, je suppose que vous avez un ViewModel, de sorte que devrait être le DataContext de la Vue.

c'est à dire si vous avez votre Vue de créer et /ou propriétaire de votre ViewModel, il pourrait ressembler à quelque chose comme ceci:
```
MyViewModel vm = new MyViewModel();
this.DataContext = vm;
```
Vous pouvez facilement databind votre CheckBox, ComboBox et TextBox de propriétés dans votre ViewModel. J'ai trouvé le plus simple est de faire votre ViewModel hériter d'une base de classe viewmodel, comme le un que Josh Smith a écrit. Cela vous donnera une méthode pour appeler en interne lorsque vous souhaitez que le ViewModel de notifier à l'interface graphique de tout changement dans les valeurs.

En supposant que vous avez des propriétés comme ImportColumn, LastName et LastNameText (tous les C# propriétés, pas champs cet appel OnPropertyChanged en conséquence), puis votre code XAML ressemblerait à quelque chose comme ceci:
```
<CheckBox IsChecked="{Binding ImportColumn}" />
<ComboBox SelectedItem="{Binding LastName}" />
<TextBox Text="{Binding LastName Text, Mode=TwoWay}" />
```
J'espère que cela vous aide. Si non, s'il vous plaît commentaire et je vais essayer de faire du mieux que je peux pour essayer d'autres choses.

Je suis à l'aide de Caliburn et d'avoir mon ViewModel déjà créé et de travail. Le problème est comment suis-je censé utiliser la liaison de données à lier à la fois les en-têtes et de la grille de données en même temps. C'est là que j'ai du mal.

OriginalL'auteur Dave

Nous faire quelque chose de semblable dans notre application.

Ce que j'ai fait est dérivé de mon propre type de colonne (DataGridSearchableBooleanColumn), puis-je remplacer la DataGridColumnHeader modèle, j'ai mis deux présentateurs. la première fois que je lier le contenu (le même que le modèle par défaut) la deuxième je la lie de la colonne. J'utilise un modèle de données pour la colonne (j'ai un peu d'entre eux pour les différents types de recherche (texte, liste déroulante, boolean). puis-je ajouter les propriétés supplémentaires de la colonne, de sorte que je peux lier à eux. Voir si ce code a du sens.

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

Ce qui est intéressant, mais je ne suis pas sûr que ça règle mon problème. Moi aussi, j'ai créé une nouvelle colonne personnalisée et suis primordial OnAutoGeneratingColumn et le remplacement de la colonne existante avec ma version personnalisée. Votre système semble fonctionner, mais je pense que vous avez besoin d'une boucle sur les colonnes pour obtenir les données, alors que je suis en train d'essayer de se lier à une source de données externe en utilisant le pattern MVVM. Si je pouvais obtenir l'index de la colonne actuelle, je pense que j'aurais une solution à l'aide d'une deuxième source de données.
c'est là que la grille tombe, ce n'est pas tout à fait faisable en un pattern mvvm, car les colonnes de la collection est en lecture seule (vous pouvez ajouter supprimer mais pas ensemble) je sous-classe de la grille, donner un supplément de propriété qui est une interface, puis lier cela à mon modèle de vue. ensuite, laissez gère les colonnes dans le code. Une autre solution consiste à sous-classe de la grille de lui donner une autre collection de colonnes que vous pouvez lier et de surveiller les modifications apportées sur ce à ajouter/supprimer des colonnes. (alors votre modèle de vue pourrait se lier directement)

OriginalL'auteur Aran Mulholland

Vous devez vous connecter pour publier un commentaire.