Question

我想在其中创建一个带有一个ListBox和一个WebBrowser类型内容的TabItem，我想动态创建它。我可以正确添加标题部分，但我不知道如何在DataTemplate中添加多个内容。

       private TabItem AddTabItem()
        {
            int count = _tabItems.Count;

        TabItem tab = new TabItem();

        tab.Header = string.Format("Tab {0}", count);
        tab.Name = string.Format("tab{0}", count);

        WebBrowser wbr = new WebBrowser();
        wbr.MaxHeight = 1550;
        wbr.MaxWidth = 1550;
        wbr.Navigate("https://google.com");
        tab.Content = wbr;

        //Header Part is working Fine
        tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate;

        //I Want to add below commented line in my code for Content
        // tab.ContentTemplate = tabDynamic.FindResource("TabCont") as DataTemplate;

        return tab;
}



        <TabControl x:Name="tabDynamic" ItemsSource="{Binding}"  >
            <!--SelectionChanged="tabDynamic_SelectionChanged"-->
            <TabControl.Resources>
                <DataTemplate x:Key="TabHeader" DataType="TabItem">
                    <DockPanel>
                        <Button x:Name="btnDelete" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding Name, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}">
                            <Image Source="/delete.gif" Height="11" Width="11"/>
                        </Button>
                        <TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />

                    </DockPanel>
                </DataTemplate>

                <DataTemplate x:Key="TabCont" DataType="TabItem">

                <!-- ========================== -->
                      <!-- Bind Dynamically -->
                <!-- one list box-->
                <!-- Webbrowser-->
                <!-- ========================== -->

                </DataTemplate>
            </TabControl.Resources>

        </TabControl>

Answer 1

您应该将TabItem的Content属性设置为单个Panel。然后，您可以向此Panel添加多个元素。您应该使用哪个面板取决于您的布局要求。这些小组具有不同的特征：https://msdn.microsoft.com/en-us/library/ms754152(v=vs.110).aspx。

例如，您可以使用DockPanel：

    private TabItem AddTabItem()
    {
        int count = _tabItems.Count;

        TabItem tab = new TabItem();

        tab.Header = string.Format("Tab {0}", count);
        tab.Name = string.Format("tab{0}", count);

        WebBrowser wbr = new WebBrowser();
        wbr.MaxHeight = 1550;
        wbr.MaxWidth = 1550;
        wbr.Navigate("https://google.com");
        DockPanel.SetDock(wbr, Dock.Bottom);

        ListBox listBox = new ListBox();

        DockPanel dockPanel = new DockPanel();
        dockPanel.Children.Add(wbr);
        dockPanel.Children.Add(listBox);
        tab.Content = dockPanel;

        tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate;

        return tab;
    }

  <TabControl x:Name="tabDynamic">
        <TabControl.Resources>
            <DataTemplate x:Key="TabHeader" DataType="TabItem">
                <DockPanel>
                    <Button x:Name="btnDelete" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0"
                            CommandParameter="{Binding Name, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}">
                        <Image Source="/delete.gif" Height="11" Width="11"/>
                    </Button>
                    <TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
                </DockPanel>
            </DataTemplate>
        </TabControl.Resources>
    </TabControl>

由于您想要动态创建元素，因此使用DataTemplate是没有意义的。

如何在WPF中动态地将多个内容与DataTemplate绑定？

1 个答案: