带有标题行和行（列）的用户控件的网格答案

【问题标题】：Grid with header row and usercontrol for rows (columns)带有标题行和行（列）的用户控件的网格
【发布时间】：2017-07-07 23:56:21
【问题描述】：

我有以下控件，第一行是标题行。总会有至少一额外的行。（至少 2 行）。

我曾考虑将内容行设置为 UserControl，但不确定如何将 UserControl 的内容设置为两列。（第 0 列中的堆栈和第 1 列中的 TriggerForWord）

实现动态添加行和设置内容的最佳方法是什么？ UserControl 加载到每一行？还有什么？

        <Grid Grid.Row="3" Margin="10,10,10,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Source={x:Static localization:Resources.WordToTriggerAction}}" Margin="2 8 2 8"  FontWeight="SemiBold" />
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Source={x:Static localization:Resources.Trigger}}" Margin="12 8 2 8"  FontWeight="SemiBold" />
        <!-- dynamic part --> 
        <StackPanel x:Name="Stack" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Margin="0,0,10,20" VerticalAlignment="Top">
            <telerik:RadAutoCompleteBox x:Name="WordForAction" Width="300" WatermarkContent="{Binding Source={x:Static localization:Resources.EnterWordForAction}}" Margin="0" ItemsSource="{Binding Path=Words}"
            DisplayMemberPath="word" SelectionMode="Single" AutoCompleteMode="Append" SearchTextChanged="WordForAction_SearchTextChanged" />
            <Button IsEnabled="{Binding Path=SearchText.Length, ElementName=WordForAction}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphPlus}" ToolTip="{Binding Source={x:Static localization:Resources.AddWord}}" VerticalAlignment="Bottom" />
            <Button IsEnabled="{Binding Path=SearchText.Length, ElementName=WordForAction}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphMinus}" ToolTip="{Binding Source={x:Static localization:Resources.RemoveWord}}" VerticalAlignment="Bottom" />
        </StackPanel>
        <telerik:RadComboBox x:Name="TriggerForWord" Grid.Row="1" Grid.Column="1" Width="150" EmptyText="{Binding Source={x:Static localization:Resources.Trigger}}" IsEditable="False" IsEnabled="False" SelectedValuePath="uuid" SelectionChanged="TriggerForWord_SelectionChanged"
            Height="{Binding ElementName=WordForAction, Path=ActualHeight}" Margin="10 0 0 0" ItemsSource="{Binding Path=Triggers}" DisplayMemberPath="description" VerticalAlignment="Top" />
    </Grid>

【问题讨论】：

如果您仍打算替换其内容，那么创建 UserControl 的意义何在？
就像我说的我正在努力理解如何做到这一点 - 我想在代码中添加行，然后将用户控件的实例添加到每一行。用户控件只能用于内容行。
希望修改后的问题更清晰。
您可能需要考虑使用 ItemsControl 并将其 ItemsSource 属性绑定到 IEnumerable。然后将在视图中自动呈现每个 YourType 对象的一行。
@mm8 将 ItemsControl 作为网格中的一行 - 谢谢

标签： c# wpf

【解决方案1】：

对于其他来这里的人......

        <Grid Grid.Row="3" Margin="0,10,0,0" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="310"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Source={x:Static localization:Resources.WordToTriggerAction}}" Margin="2 8 2 8"  FontWeight="SemiBold" />
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Source={x:Static localization:Resources.Trigger}}" Margin="2 8 2 8"  FontWeight="SemiBold" />
        <ItemsControl Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=WordsForAction}" x:Name="WordsForActionItems" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0, 0, 0, 5">
                        <StackPanel Orientation="Horizontal" Margin="0" VerticalAlignment="Top" Width="310">
                            <telerik:RadAutoCompleteBox x:Name="WordForAction" Width="250" WatermarkContent="{Binding Source={x:Static localization:Resources.EnterWordForAction}}" Margin="0" 
                                ItemsSource="{Binding Path=Words, ElementName=_this}" DisplayMemberPath="Word" SearchText="{Binding Word}"
                                SelectionMode="Single" AutoCompleteMode="Append" SearchTextChanged="WordForAction_SearchTextChanged" />
                            <Button Name="AddWord" IsEnabled="True" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphPlus}" Click="AddWord_Click" ToolTip="{Binding Source={x:Static localization:Resources.AddWord}}" VerticalAlignment="Bottom" />
                            <Button Name="RemoveWord" IsEnabled="{Binding Items.Count, ElementName=WordsForActionItems, Converter={StaticResource CountToBoolConverter}}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphMinus}" Click="RemoveWord_Click" ToolTip="{Binding Source={x:Static localization:Resources.RemoveWord}}" VerticalAlignment="Bottom" />
                        </StackPanel>
                        <telerik:RadComboBox Grid.Column="1" x:Name="TriggerForWord" Width="150" EmptyText="Trigger" IsEditable="False" IsEnabled="True" SelectionChanged="TriggerForWord_SelectionChanged"
                            Margin="0" ItemsSource="{Binding Path=Triggers, ElementName=_this}" SelectedValuePath="uuid" DisplayMemberPath="description" SelectedValue="{Binding Trigger_uuid}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

【讨论】：