如何动态地将UserControl添加到ItemsControl? [英] How to dynamically add UserControl to ItemsControl?

问题描述

我有一个WPF UserControl，它在运行时动态创建.根据用户的交互，将创建1-5个控件，并将其添加到UI中.

I have a WPF UserControl which is dynamically created at runtime. Depending on user interaction, from 1-5 of these controls is created and should be added to the UI.

xaml.cs的代码后面有一个ObservableCollection<PlayerSpec> PlayerSpecViews.

I have an ObservableCollection<PlayerSpec> PlayerSpecViews in the xaml.cs code-behind.

最初，我尝试使用Grid并动态添加RowDefinitions，但这没有用.该控件将按比例缩小.

Initially I tried using a Grid and dynamically adding RowDefinitions but that wasn't working. The control would be scaled down in size.

然后我尝试使用ItemsControl，但是绑定不是添加Control，而是添加类型名称.

Then I tried using an ItemsControl but the binding was not adding the Control but instead the type name.

如何使用数据绑定以垂直方式添加和放置控件?如果需要，奖金信息可能包括垂直滚动条.

How can I use databinding to have the control added and placed in a vertical manner? Bonus info might include vertical scroll bar if needed.

我当前的XAML和绑定如下:

My current XAML and binding are as follows:

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

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，这看起来不正常，我希望它来自datacontext
• 堆栈面板在数据模板中没有任何作用

所以您的修改后的代码是

so your revised code is

<ScrollViewer>
    <ItemsControl Name="PlayerSpecItems" 
                  HorizontalContentAlignment="Stretch" 
                  ItemsSource="{Binding PlayerSpecViews}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:PlayerSpec Margin="1"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

因此，此代码应为您在PlayerSpecViews集合中具有正确绑定的每个项目呈现local:PlayerSpec

So this code should be rendering local:PlayerSpec for every item you have in your PlayerSpecViews collection subjected to correct binding

这篇关于如何动态地将UserControl添加到ItemsControl?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！