從DataTemplate中綁定到TabItem頭

我試圖將TabItem中的TextBox的文本綁定到該TabItem的頭,這樣頭和文本框都有相同的內容(例如,當頭是“test”時,文本框也應該顯示“test”)。

TextBoxDataTemplate的一部分,我將其用作ContentTemplateStaticResourceDataTemplate工作正常,所有內容都按預期顯示在選項卡中。只有TextBox是空的。我嘗試了很多方法來定義RelativeSource,但到目前為止沒有一種方法有效。

<DataTemplate x:Key="myTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="..."/>
            <Border BorderBrush="Black" BorderThickness="0 0 0.2 0"/>
            <StackPanel Grid.Column="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <Label Grid.Column="0" Content="Name: "/>

                    <TextBox Grid.Column="1" Text="{Binding DataContext.Header, 
                     RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}"/>

                    <Button Grid.Column="3" Content="Speichern"/>            
                </Grid>
            </StackPanel>
        </Grid>
    </DataTemplate> 

編輯:然后我使用這樣的模板:

<TabControl>
                <TabItem ContentTemplate="{StaticResource myTemplate}" Header="Test"/>
                <TabItem Header="Tab 2"/>
                <TabItem Header="Tab 3"/>
</TabControl>
? 最佳回答:

@埃爾哈斯普Я отредактировал свой вопрос. Я не совсем понимаю, как работать с 數據上下文。Как добавить другое свойство для привязки?

通常為某些特定的數據類型創建數據模板。在ContentControl(包括TabItem)中,數據進入Content屬性(通常來自DataContext屬性),ContentTemplate中的模板指定其呈現。

下面是一個具有一個字符串屬性的數據類型的示例。該示例使用BaseInpc類。

using Simplified;

namespace TabItemHeaderBinding
{
    public class TabItemContent : BaseInpc
    {
        private string _title;

        public string Title { get => _title; set =>Set(ref _title, value); }
    }
}

典型的WPF是MVVM模式的實現。在本例中,您將收到TabControl源代碼中的元素集合<TabControl ItemsSource =" {Binding CollectionProperty} "...>。在本例中,TabControl將為DataContext和Content中它將傳遞相應集合項的每個項自動創建一個TabItem。元素模板、標頭等中的綁定必須相對于此元素指定。

您沒有MVVM,所以我將展示一個簡單的示例,其中對初始代碼的更改最小。

<Window x:Class="TabItemHeaderBinding.ThbWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TabItemHeaderBinding"
        mc:Ignorable="d"
        Title="ThbWindow" Height="450" Width="800">
    <FrameworkElement.Resources>
        <DataTemplate x:Key="myTemplate" DataType="{x:Type local:TabItemContent}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="/Febr20y;component/Image/block.png"/>
                <Border BorderBrush="Black" BorderThickness="0 0 0.2 0"/>
                <StackPanel Grid.Column="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Content="Name: "/>

                        <TextBox Grid.Column="1" Text="{Binding Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

                        <Button Grid.Column="3" Content="Speichern"/>
                    </Grid>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </FrameworkElement.Resources>
    <Grid>
        <TabControl>
            <TabItem ContentTemplate="{StaticResource myTemplate}"
                     Header="{Binding Title}"
                     Content="{Binding}">
                <TabItem.DataContext>
                    <local:TabItemContent Title="TitleTest"/>
                </TabItem.DataContext>
            </TabItem>
            <TabItem Header="Tab 2"/>
            <TabItem Header="Tab 3"/>
        </TabControl>
    </Grid>
</Window>

Работает отлично

MVVM實現示例:

namespace TabItemHeaderBinding
{
    public class TabItemImageContent : TabItemContent
    {
        private object _imageSource;

        public object ImageSource { get => _imageSource; set =>Set(ref _imageSource, value); }
    }
}
using System.Collections.ObjectModel;

namespace TabItemHeaderBinding
{
    public class TabItemContentViewModel
    {
        public ObservableCollection<TabItemImageContent> Tabs { get; }
            = new ObservableCollection<TabItemImageContent>()
            {
                new TabItemImageContent() {Title = "First", ImageSource="/Febr20y;component/Image/block.png"},
                new TabItemImageContent() {Title = "Second", ImageSource="/Febr20y;component/Image/RAnimated1.gif"},
                new TabItemImageContent() {Title = "Third", ImageSource="/Febr20y;component/Image/plus.jpg"},
            };
    }
}
<Window x:Class="TabItemHeaderBinding.ThbMvvmWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TabItemHeaderBinding"
        mc:Ignorable="d"
        Title="ThbMvvmWindow" Height="450" Width="800">
    <FrameworkElement.Resources>
        <DataTemplate x:Key="myTemplate" DataType="{x:Type local:TabItemImageContent}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding ImageSource}"/>
                <Border BorderBrush="Black" BorderThickness="0 0 0.2 0"/>
                <StackPanel Grid.Column="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Content="Name: "/>

                        <TextBox Grid.Column="1" Text="{Binding Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

                        <Button Grid.Column="3" Content="Speichern"/>
                    </Grid>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </FrameworkElement.Resources>
    <FrameworkElement.DataContext>
        <local:TabItemContentViewModel/>
    </FrameworkElement.DataContext>
    <Grid>
        <TabControl ItemsSource="{Binding Tabs}"
                    ContentTemplate="{DynamicResource myTemplate}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Header" Value="{Binding Title}"/>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>
</Window>
主站蜘蛛池模板: 一区二区在线免费观看| 亚洲AV成人精品一区二区三区| 99国产精品一区二区| 一区二区三区四区电影视频在线观看| 国产高清视频一区二区| 日韩高清一区二区三区不卡 | 无码精品不卡一区二区三区| 亚洲日本久久一区二区va| 午夜福利无码一区二区| 免费人人潮人人爽一区二区| 中文字幕日本一区| 性色AV一区二区三区| 久久精品无码一区二区三区不卡| 国产在线观看精品一区二区三区91| 国产精品无码不卡一区二区三区| 无码av免费一区二区三区试看| 久久毛片一区二区| 国产A∨国片精品一区二区| 精品一区二区三区在线成人| 日韩美女在线观看一区| 免费视频精品一区二区三区| 国产精品视频一区国模私拍 | 国精产品一区一区三区MBA下载 | 亚洲AV综合色区无码一区爱AV| 亚洲男女一区二区三区| 一区二区高清在线| 亚洲一区二区三区久久| 精品久久久久一区二区三区| 亚洲国产精品一区二区三区在线观看 | 区三区激情福利综合中文字幕在线一区亚洲视频1 | 麻豆视传媒一区二区三区| 国产内射999视频一区| 在线|一区二区三区| 无码精品人妻一区二区三区中| 国产亚洲福利一区二区免费看| 人妻体体内射精一区二区| 国产乱码精品一区二区三| 日韩一区二区三区射精| 亚洲国产精品自在线一区二区| 无码精品蜜桃一区二区三区WW| 在线精品视频一区二区|