[英]Binding to a TabItem Header from within DataTemplate
I'm trying to bind the Text of a TextBox
inside a TabItem
to the header of that TabItem
, so that both the header and the TextBox have the same content (fe when the header is "test" the TextBox should also show "test" )。
TextBox
是DataTemplate
的一部分,我将其用作ContentTemplate
的StaticResource
。 DataTemplate
工作正常,选项卡内的所有内容都按预期显示。 只有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>
@EldHasp Яотредактировал свой вопрос。 Я не совсем понимаю, как работать с DataContext。 Как добавить другое свойство для привязки?
通常为某些特定的数据类型创建数据模板。
在 ContentControl(包括 TabItem)中,数据进入 Content 属性(通常来自 DataContext 属性),而 ContentTemplate 中的模板指定其呈现方式。
这是具有一个字符串属性的数据类型的示例。
该示例使用BaseInpc class 。
using Simplified;
namespace TabItemHeaderBinding
{
public class TabItemContent : BaseInpc
{
private string _title;
public string Title { get => _title; set =>Set(ref _title, value); }
}
}
WPF 的典型实现是MVVM 模式。
在这种情况下,您将收到一组元素<TabControl ItemsSource =" {Binding CollectionProperty} "...>
到 TabControl 源中。
在这种情况下,TabControl 将自动为 DataContext 中的每个项目创建一个 TabItem,并且在 Content 中它将传递相应的集合项目。
元素模板、header 等中的绑定必须相对于该元素指定。
你没有 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.