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

时间:2016-04-05 17:59:52

标签: c# wpf wpf-controls

我正在设计一个包含同一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>

1 个答案:

答案 0 :(得分:1)

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

我会从这样的事情开始:

<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列”等)