如何动态地将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>

如何动态地将UserControl添加到ItemsControl

代码问题

  • 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集合受到正确的绑定