Mehrfaches Verwenden des gleichen Arbeitsbereichs in einem Raster

Question

Ich entwerfe ein Raster, das mehrere Spalten desselben Arbeitsbereichs enthält. Ich habe Canvas so entworfen, dass es ein Textfeld, ein Kombinationsfeld und einige Optionsfelder enthält.

Ich bin ein bisschen auf ein paar Dinge zu verwechseln)

neue Spalten

Hinzufügen Leinwand zu dieser neuen Spalte Hinzufügen

Abstand einstellen, so dass das Gitter ein Maximum von 5 Spalten halten kann (Canvases), und dann wird die horizontale Bildlaufleiste angezeigt.

Hier ist, was ich bisher habe:

<Grid Height="379" Margin="35,0,35,65" VerticalAlignment="Bottom"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="200"/> 
      <ColumnDefinition Width="200"/> 
     </Grid.ColumnDefinitions> 
     <Canvas Name="userCanvas" Grid.Column="0" Margin="0,0,707,0" RenderTransformOrigin="0.606,0.499" > 
      <TextBox Height="23" Name="btn_Test" Canvas.Top ="10" Canvas.Left="10" Width="125" HorizontalAlignment="Center">Enter Input:</TextBox> 
      <ComboBox Canvas.Top="50" Canvas.Left="10" Width="125">Combo Box</ComboBox> 
      <RadioButton Canvas.Top="100" Canvas.Left="10">Radio Button1</RadioButton> 
      <RadioButton Canvas.Top="120" Canvas.Left="10">Radio Button2</RadioButton> 
      <RadioButton Canvas.Top="140" Canvas.Left="10">Radio Button3</RadioButton> 
      <RadioButton Canvas.Top="160" Canvas.Left="10">Radio Button4</RadioButton> 
     </Canvas> 
    </Grid> 

Answer 1

Angenommen, Sie Spalten versuchen, zur Laufzeit dynamisch hinzufügen, haben Sie wahrscheinlich eine ItemsControl wollen kein Grid. Mit ItemsControl können Sie wiederkehrende Elemente erstellen, die alle dieselbe Vorlage verwenden.

Ich würde mit so etwas wie dies beginnen:

<ItemsControl Margin="10" 
       ItemsSource="{Binding Columns}"> 
    <ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
     <StackPanel Orientation="Horizontal" /> 
    </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Canvas> 
     <TextBox Height="23" Name="btn_Test" Canvas.Top="10" Canvas.Left="10" Width="125" HorizontalAlignment="Center">Enter Input:</TextBox> 
     <ComboBox Canvas.Top="50" Canvas.Left="10" Width="125">Combo Box</ComboBox> 
     <RadioButton Canvas.Top="100" Canvas.Left="10">Radio Button1</RadioButton> 
     <RadioButton Canvas.Top="120" Canvas.Left="10">Radio Button2</RadioButton> 
     <RadioButton Canvas.Top="140" Canvas.Left="10">Radio Button3</RadioButton> 
     <RadioButton Canvas.Top="160" Canvas.Left="10">Radio Button4</RadioButton> 
     </Canvas> 
    </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Ihre DataContext müssen eine Eigenschaft enthält Columns, die eine Art von IEnumerable<Column> sein müssen, wobei jede Column Daten enthält und Befehle, die Sie für die Kontrollen müssen in Ihrem Canvas.

aktualisiert

Was, wie dies zu tun, würde ich zunächst empfehlen, dass Sie auf den MVVM design pattern nachlesen, was im Code führt, die weit besser verwaltbar, prüfbar und wiederverwendbar ist.

In der Zwischenzeit, obwohl Sie die einfachste Sache etwas auf dem Bildschirm zu sehen, tun können, ist folgendes zu tun:

Erstens stellen dies in der Code-behind (zB MainWindow.xaml.cs):

public IEnumerable<Column> Columns { get; set; } 

public MainWindow() 
{ 
    Columns = GetColumns(); 
    InitializeComponent(); 
} 

private IEnumerable<Column> GetColumns() 
{ 
    return Enumerable.Range(0, 5) 
     .Select(x => new Column { Title = "Column " + x }); 
} 

Zweitens eine neue Column Klasse erstellen:

public class Column 
{ 
    public string Title { get; set; } 
} 

Drittens Ihre TextBox wie folgt ändern:

<TextBox Height="23" 
     Name="btn_Test" 
     Canvas.Top="10" 
     Canvas.Left="10" 
     Width="125" 
     HorizontalAlignment="Center" 
     Text="{Binding Title}" /> 

ich habe keine Chance, dies zu testen, aber wenn es funktioniert, wie ich geplant, sollten Sie fünf Spalten sehen horizontal ausgerichtet, jedes mit seinem eigenen Titel („Spalte 1“, „Spalte 2“ , etc.).