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

Question

我正在设计一个包含多列相同 Canvas 的网格。我将 Canvas 设计为具有文本框、组合框和一些单选按钮。

我对一些事情有点困惑）

添加新列

正在将 canvas 添加到此新列

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

这是我目前得到的：

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

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}" />

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

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

Using the same Canvas multiple times in a Grid

c#

wpf

wpf-controls