Question

我正在设计一个包含同一Canvas的多列的Grid。我设计了Canvas，有一个文本框，组合框和一些单选按钮。

我对一些事情感到有些困惑）

添加新列

将画布添加到此新列

调整间距，使网格最多可容纳5列（画布），然后显示水平滚动条。

这是我到目前为止所得到的：

    <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

假设您尝试在运行时动态添加列，您可能需要ItemsControl而不是Grid。 ItemsControl允许您布置所有共享相同模板的重复元素。

我会从这样的事情开始：

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

您的DataContext需要包含属性Columns，该属性必须是某种IEnumerable<Column>，其中每个Column包含控件所需的数据和命令你的Canvas。

<强>更新

至于如何执行此操作，我首先建议您阅读MVVM design pattern，这会导致代码更易于维护，可测试且可重复使用。

与此同时，你可以做的最简单的事情是在屏幕上看到一些东西：

首先，将其放在后面的代码中（例如，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 });
}

其次，创建一个新的Column类：

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

第三，将您的TextBox更改为以下内容：

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

我没有机会对此进行测试，但如果它按照我的计划运行，你应该会看到五个水平排列的列，每个列都有自己的标题（“第1列”，“第2列”等）

在网格中多次使用相同的Canvas

1 个答案: