wpf 在C#中向TabControl添加选项卡项(带有UserControl):绑定标头始终为空

soat7uwm  于 2023-02-16  发布在  C#
关注(0)|答案(2)|浏览(310)

我正在尝试创建一个TabControl,它可以有多个具有相同输入字段的页面。
我已经将输入字段合并到一个名为TabContent的用户控件中。我已经在主窗口中创建了一个TabControl,并且我希望通过ItemTemplate和DataTemplate集成主窗口中的TabItem标题。在主窗口中,我创建了一个TabContents列表,其中的文本被分配给标题。**运行的程序不会显示此文本,如屏幕截图所示。**你知道为什么和如何解决这个问题吗?
Screenshot with empty TabItem Headers
下面是重现该错误的最小代码示例。

// UserControl1.xaml.cs
namespace Nur_Test
{
    public partial class TabContent : UserControl
    {
        public TabContent()
        {
            InitializeComponent();
        }

        public string Header { get; set; }
    }
}
// UserControl1.xaml
<UserControl x:Class="Nur_Test.TabContent"
             // xmlns= [omitted...]
             xmlns:local="clr-namespace:Nur_Test"
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="400">
    <Grid>
        <TextBox>Test</TextBox>   
    </Grid>
</UserControl>
// MainWindow.xaml
<Window x:Class="Nur_Test.MainWindow"
        // xmlns= [omitted...]
        xmlns:local="clr-namespace:Nur_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TabControl x:Name="tabControl1">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>

    </Grid>
</Window>
// MainWindow.xaml.cs
namespace Nur_Test
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<TabContent> items = new List<TabContent>()
        {
            new TabContent() { Header = "Item 1" },
            new TabContent() { Header = "Item 2" },
            new TabContent() { Header = "Item 3" },
        };

            tabControl1.ItemsSource = items;
        }

        public class TabItemData
        {
            public string Header { get; set; }            
        }
    }
}

绑定似乎不起作用。在TextBlock中放入一个固定的字符串而不是MainWindow. xaml中的{Binding Header}可以正常工作(但不能解决我的问题):

<TextBlock Text="12345" />

抱歉,如果这是一个愚蠢的问题,我仍然是一个初学者,当谈到C#:-)

sc4hvdpw

sc4hvdpw1#

ItemsSource设置为List<TabItemData>

List<TabItemData> items = new List<TabItemData>()
{
    new TabItemData() { Header = "Item 1" },
    new TabItemData() { Header = "Item 2" },
    new TabItemData() { Header = "Item 3" },
};

tabControl1.ItemsSource = items;

...然后在ContentTemplate中使用UserControl

<TabControl x:Name="tabControl1">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <local:TabContent />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

不应将ItemsSource设置或绑定到UI元素的集合,如UserControls

d4so4syb

d4so4syb2#

你的建议帮了我很大的忙,* mm 8 *。为了让代码最终按照我想要的方式工作,我还必须创建TabItemData类。而且我还需要绑定内容,以便在单击选项卡时它会发生变化。现在看来它起作用了。非常感谢!
以下是对我有效的最终代码修改:

// MainWindow.xaml.cs
public class TabItemData
 {
     public string Header { get; set; }
     public TabContent Content { get; set; }
 }

以及

// MainWindow.xaml.cs    
List<TabItemData> items = new List<TabItemData>()
{
    new TabItemData() { Header = "Item 1", Content = new TabContent() },
    new TabItemData() { Header = "Item 2", Content = new TabContent() },
    new TabItemData() { Header = "Item 3", Content = new TabContent() }
};
tabControl1.ItemsSource = items;

// MainWindow.xaml   
        <TabControl x:Name="tabControl1" Grid.Row="2" Grid.Column="0" Margin="10,0">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding Content}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

相关问题