如何动态地将UserControl添加到ItemsControl
本文关键字:UserControl 添加 ItemsControl 何动态 动态 | 更新日期: 2023-09-27 18:06:26
我有一个在运行时动态创建的WPF UserControl。根据用户交互,从1-5个这样的控件被创建,并应该添加到UI。
我在xaml.cs代码后面有一个ObservableCollection<PlayerSpec> PlayerSpecViews
。
最初我尝试使用Grid
并动态添加RowDefinitions
,但这不起作用。控件的大小将按比例缩小。
然后我尝试使用ItemsControl,但绑定没有添加控件,而是添加类型名称。
如何使用数据绑定以垂直方式添加和放置控件?如果需要,附加信息可能包括垂直滚动条。
我当前的XAML和绑定如下:
<ItemsControl Name="PlayerSpecItems"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Source=PlayerSpecViews}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="95"
Width="175"
Margin="1">
<local:PlayerSpec/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Classes XAML:
<!-- PlayerSpec -->
<Border Style="{StaticResource InnerBorder}"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="98"/>
<ColumnDefinition Width="21"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Style="{StaticResource DefaultFont}"
Grid.Column="0"
Grid.Row="0"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Right"
Margin="1"
Content="Name"/>
<TextBox Style="{StaticResource DefaultFont}"
Name="PlayerName"
Background="Transparent"
Grid.Column="1"
Grid.Row="0"
Margin="1"/>
<Grid Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Label Style="{StaticResource DefaultFont}"
Grid.Column="2"
Grid.Row="0"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="Automaton"/>
<RadioButton GroupName="PlayerTypeGroup"
Name="PlayerAutomaton"
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="0"
Grid.IsSharedSizeScope="True"
VerticalAlignment="Center">
</RadioButton>
<Label Style="{StaticResource DefaultFont}"
Grid.Column="2"
Grid.Row="1"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="Human"/>
<RadioButton GroupName="PlayerType"
Name="PlayerHuman"
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="1"
Grid.IsSharedSizeScope="True"
VerticalAlignment="Center">
</RadioButton>
</Grid>
</Grid>
</Border>
代码问题
- ItemsControl没有滚动条,所以需要添加一个ScrollViewer
- ItemsControl的ItemsSource绑定源设置为PlayerSpecViews,这看起来不正常,我希望它来自数据上下文
- 堆栈面板在数据模板中没有任何作用
所以修改后的代码是
<ScrollViewer>
<ItemsControl Name="PlayerSpecItems"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding PlayerSpecViews}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:PlayerSpec Margin="1"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
所以这段代码应该渲染local:PlayerSpec
你有在你的PlayerSpecViews集合受到正确的绑定