Bir Grid

Question

'da aynı Tuvali birden çok kez kullanarak Aynı Tuval'in birden çok sütununu içerecek bir Kılavuz tasarlıyorum. Tuvali bir metin kutusu, birleşik kutu ve bazı radyo düğmelerine sahip olacak şekilde tasarladım.

Birkaç şeylere karıştı biraz)

yeni sütunlar ızgara (5 sütun bir max tutabilir, böylece boşluğu ayarlama bu yeni sütunda

için tuval ekleme

ekleme değilim Tuvaller) ve ardından yatay kaydırma çubuğu sunulur.

İşte ben bugüne kadar bu var:

<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

çalışma zamanında dinamik olarak sütunları eklemek için çalışıyoruz varsayarsak, muhtemelen bir ItemsControl değil Grid istiyorum. Bir ItemsControl, hepsi aynı şablonu paylaşan yinelenen öğeleri yerleştirmenizi sağlar.

böyle bir şey ile başlar olacaktır:

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

Sizin DataContext her Column verileri içerir ve kontroller için ihtiyaç komutları IEnumerable<Column>, bir tür olması gereken bir özellik Columns içerir gerekecektir senin Canvas içinde.

Güncelleme

Bunun nasıl gelince, ben öncelikle çok daha sürdürülebilir, test edilebilir ve tekrar kullanılabilir kod hangi sonuçları MVVM design pattern üzerinde okumak tavsiye ederim.

Birincisi, geride (örneğin MainWindow.xaml.cs) kodunda bu koyun: Bu arada

olsa da, ekranda bir şey görmek için yapabileceğiniz en basit şey şu yapmaktır:

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

Üçüncüsü, sizin TextBox şu şekilde değişir:

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

İkincisi, yeni Column sınıf oluşturmak

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

Bunu test etmek için bir şansı yoktu, ama ben planlandığı gibi çalışıyorsa, sen beş sütun yatay dizilmiş görmelisiniz kendi başlığı ile her ("Sütun 1", "Sütun 2" , vb.).