Question

我有以下控件，第一行是标题行。总会有至少一个额外的行。（总共至少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>

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

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

1 个答案: