我正在设计一个包含同一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>
答案 0 :(得分: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列”等)