Comment créer par programmation de la Grille à l'intérieur de la ligne d'une Grille en Wpf

Ok. Supprimer tout votre code et tout recommencer.

Si vous travaillez avec WPF, vous avez vraiment besoin d'avoir WPF Mentalité

En règle générale, vous avez presque jamais créer ou manipuler des éléments d'INTERFACE utilisateur dans le code de procédure en WPF.
C'est ce que XAML est pour.

Ce la bonne manière de faire ce que vous demandez en WPF (dans un exemple de travail):

<Window x:Class="MiscSamples.ItemsControlSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
Title="ItemsControlSample" Height="300" Width="300">
<DockPanel>
<Button Content="Add New Row" Command="{Binding AddNewRowCommand}"
DockPanel.Dock="Bottom"/>
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border  BorderBrush="Black" Background="Gainsboro" BorderThickness="1" Margin="2">
<!-- This is the Inner Grid for each element, which is represented in Brown color in your picture -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width=".2*"/>
<ColumnDefinition Width=".2*"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding Label1Text}"
Margin="2"/>
<Button Content="Button1" 
Command="{Binding DataContext.Command1, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
Grid.Column="1" Margin="2"/>
<Button Content="Button2" 
Command="{Binding DataContext.Command2, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
Grid.Column="2" Margin="2"/>
<dxe:TextEdit Text="{Binding Text}"
Grid.Row="1" Grid.ColumnSpan="3"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer CanContentScroll="True">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
</Window>

Code Derrière:

public partial class ItemsControlSample : Window
{
public ItemsControlSample()
{
InitializeComponent();
DataContext = new ItemsControlSampleViewModel();
}
}

ViewModel:

public class ItemsControlSampleViewModel
{
public ObservableCollection<ItemsControlSampleData> Data { get; set; }
public Command AddNewRowCommand { get; set; }
public Command<ItemsControlSampleData> Command1 { get; set; }
public Command<ItemsControlSampleData> Command2 { get; set; }
public ItemsControlSampleViewModel()
{
var sampledata = Enumerable.Range(0, 10)
.Select(x => new ItemsControlSampleData()
{
Label1Text = "Label1 " + x.ToString(),
Text = "Text" + x.ToString()
});
Data = new ObservableCollection<ItemsControlSampleData>(sampledata);
AddNewRowCommand = new Command(AddNewRow);
Command1 = new Command<ItemsControlSampleData>(ExecuteCommand1);
Command2 = new Command<ItemsControlSampleData>(ExecuteCommand2);
}
private void AddNewRow()
{
Data.Add(new ItemsControlSampleData() {Label1Text = "Label 1 - New Row", Text = "New Row Text"});
}
private void ExecuteCommand1(ItemsControlSampleData data)
{
MessageBox.Show("Command1 - " + data.Label1Text);
}
private void ExecuteCommand2(ItemsControlSampleData data)
{
MessageBox.Show("Command2 - " + data.Label1Text);
}
}

Élément De Données:

public class ItemsControlSampleData
{
public string Label1Text { get; set; }
public string Text { get; set; }
}

Helper classes:

public class Command : ICommand
{
public Action Action { get; set; }
public string DisplayName { get; set; }
public void Execute(object parameter)
{
if (Action != null)
Action();
}
public bool CanExecute(object parameter)
{
return IsEnabled;
}
private bool _isEnabled = true;
public bool IsEnabled
{
get { return _isEnabled; }
set
{
_isEnabled = value;
if (CanExecuteChanged != null)
CanExecuteChanged(this, EventArgs.Empty);
}
}
public event EventHandler CanExecuteChanged;
public Command(Action action)
{
Action = action;
}
}
public class Command<T>: ICommand
{
public Action<T> Action { get; set; }
public void Execute(object parameter)
{
if (Action != null && parameter is T)
Action((T)parameter);
}
public bool CanExecute(object parameter)
{
return IsEnabled;
}
private bool _isEnabled = true;
public bool IsEnabled
{
get { return _isEnabled; }
set
{
_isEnabled = value;
if (CanExecuteChanged != null)
CanExecuteChanged(this, EventArgs.Empty);
}
}
public event EventHandler CanExecuteChanged;
public Command(Action<T> action)
{
Action = action;
}
}

Résultat:

• Remarquez comment je ne suis pas traiter avec une INTERFACE utilisateur dans le code de procédure, mais au lieu de cela, je suis en utilisant La liaison de données et simple, simple propriétés. C'est la façon dont vous programme dans WPF. C'est ce que WPF mentalité.
• Je suis en utilisant un ItemsControl et un DataTemplate définis dans le code XAML de laisser WPF créer l'INTERFACE utilisateur pour chacun de mes éléments de données.
• Notez également comment mon code ne fait rien, sauf à exposer les données et de définir réutilisables Les commandes qui servent comme des abstractions pour les actions de l'utilisateur tels que les clics de Bouton. De cette façon vous pouvez vous concentrer dans le codage de votre logique métier au lieu de lutter avec la façon de rendre l'INTERFACE de travail.
• Les boutons à l'intérieur de chaque élément sont liés à des Commandes à l'aide d'un RelativeSource de Liaison pour naviguer vers le haut dans l'Arborescence Visuelle et de trouver le DataContext de la ItemsControl, où les Commandes sont en fait définis.
• Quand vous en avez besoin pour ajouter un nouvel élément, il suffit d'ajouter un nouvel élément à la ObservableCollection qui contient vos données et WPF crée automatiquement les nouveaux éléments de l'INTERFACE utilisateur lié à que.
• Même si cela peut sembler "trop de code, le code que j'ai posté ici est hautement réutilisables et peuvent être mis en œuvre dans un Générique ViewModel<T> qui est ensuite réutilisable pour n'importe quel type d'éléments de données. Command et Command<T> sont également écrire une fois des classes réutilisables qui peuvent être trouvés dans tous les MVVM cadre comme Prism, MVVM Light ou Caliburn.Micro.
• Cette approche est vraiment beaucoup préféré dans WPF, car il permet à une grande quantité de l'évolutivité et de l'indépendance entre l'INTERFACE utilisateur et la logique métier, et il permet également la testabilité du ViewModel.
• Je vous suggère de lire toutes les matières liées à la poste, le plus important de Rachel WPF Mentalité et liés à des billets de blog. Laissez-moi savoir si vous avez besoin de plus d'aide.
• WPF Roches. Il suffit de copier et de coller mon code dans une File -> New Project -> WPF Application et de voir les résultats pour vous-même.

OriginalL'auteur Federico Berasategui