如何获取 TabControl WPF 的 TabItem 的宽度 header
How to get Width of header of a TabItem of TabControl WPF
我需要做的是在超出范围并隐藏 TabControl 之前停止 GridSplitter。因此,我想到的想法是将 TabItems 的所有 Header 的 ActualWidths 的总和绑定到 TabControl 的 MinWidth 或保留 TabControl 的 Crid Cell。但问题是到目前为止我无法访问 TabItem 的 Header 的宽度。我发现的一种解决方案是在 Tabitem.Header 中放置一个 TextBlock,声明其宽度并用 x:Name 命名。但是以这种方式使用宽度并不能给出 Header 的总宽度,包括边距和填充等,因此它甚至无法接近准确度。
更新
好的,这是代码。请注意,我已经实施了其中一种解决方案,但如果动态加载选项卡,它不会控制 MinWidth。
<Grid Background="#FFD6DBE9" Height="614" Width="1109">
<Grid.RowDefinitions>
<RowDefinition Height="89"/>
<RowDefinition Height="Auto" MinHeight="{Binding ActualHeight, ElementName=gridNotificationsHeader}"/>
<RowDefinition Height="494*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*" MinWidth="{Binding MinWidth, ElementName=tabDataEntities}"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="144*">
<ColumnDefinition.MinWidth>
<MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
<Binding ElementName="cdLblNotificationsHeader" Path="MinWidth"/>
<Binding ElementName="cdBtnNotificationsClose" Path="ActualWidth"/>
</MultiBinding>
</ColumnDefinition.MinWidth>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="1" Width="2" Grid.RowSpan="2"/>
<Grid x:Name="gridNotificationsHeader" Grid.Column="2" Background="#FF657695"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cdLblNotificationsHeader" MinWidth="{Binding Width, ElementName=lblNotificationsHeader}"/>
<ColumnDefinition x:Name="cdBtnNotificationsClose" Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblNotificationsHeader" Content="Notifications" VerticalAlignment="Top"
FontSize="14.667" Height="30" Foreground="#FFEBF0EE" HorizontalAlignment="Left" Width="92"/>
<Button x:Name="btnNotificationsClose" Content="X"
Margin="0,5,8,0" VerticalAlignment="Top" Width="20" FontFamily="Verdana" HorizontalAlignment="Right" Background="Transparent" FontSize="13.333" Foreground="Black" Grid.Column="1"/>
</Grid>
<TabControl x:Name="tabDataEntities" Margin="0,0,5,10" Grid.Row="1" Grid.RowSpan="2" FontSize="12" Grid.ColumnSpan="1" MinWidth="{Binding ElementName=TabItemOne, Path=ActualWidth}">
<TabItem x:Name="TabItemOne">
<TabItem.Header>Tab Item</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
就这么简单
<StackPanel>
<TabControl>
<TabItem Header="Hello world" Name="Tab1"/>
<TabItem Header="Hello" Name="Tab2"/>
<TabItem Header="world" Name="Tab3"/>
</TabControl>
<TextBlock Text="{Binding ElementName=Tab1, Path=ActualWidth}"/>
<TextBlock Text="{Binding ElementName=Tab2, Path=ActualWidth}"/>
<TextBlock Text="{Binding ElementName=Tab3, Path=ActualWidth}"/>
</StackPanel>
刚刚在做以下事情时玩得很开心 AttachedProperty
:
XAML 用法
<TabControl question32926699:TabControlHeaderWidthWatcher.WatchHeadersWidth="true"
question32926699:TabControlHeaderWidthWatcher.TotalHeadersWidth="{Binding TotalWidth, Mode=OneWayToSource}">
<TabItem Header="Tab Item 1" />
<TabItem Header="Tab Item 2" />
</TabControl>
附上属性
public class TabControlHeaderWidthWatcher
{
private static TabControl m_tabControl;
public static readonly DependencyProperty WatchHeadersWidthProperty = DependencyProperty.RegisterAttached(
"WatchHeadersWidth", typeof (bool), typeof (TabControlHeaderWidthWatcher), new PropertyMetadata(default(bool), PropertyChangedCallback));
public static void SetWatchHeadersWidth(DependencyObject element, bool value)
{
element.SetValue(WatchHeadersWidthProperty, value);
}
public static bool GetWatchHeadersWidth(DependencyObject element)
{
return (bool)element.GetValue(WatchHeadersWidthProperty);
}
public static readonly DependencyProperty TotalHeadersWidthProperty = DependencyProperty.RegisterAttached(
"TotalHeadersWidth", typeof (double), typeof (TabControlHeaderWidthWatcher), new PropertyMetadata(default(double)));
public static void SetTotalHeadersWidth(DependencyObject element, double value)
{
element.SetValue(TotalHeadersWidthProperty, value);
}
public static double GetTotalHeadersWidth(DependencyObject element)
{
return (double) element.GetValue(TotalHeadersWidthProperty);
}
private static void PropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
m_tabControl = dependencyObject as TabControl;
if (m_tabControl == null) return;
((INotifyCollectionChanged)m_tabControl.Items).CollectionChanged += CollectionChanged;
}
private static void CollectionChanged(object sender, EventArgs eventArgs)
{
foreach (var item in m_tabControl.Items)
{
var tabItem = item as TabItem;
if (tabItem == null) continue;
// Unsubscribe first in case it was there previously
tabItem.SizeChanged -= TabItemOnSizeChanged;
tabItem.SizeChanged += TabItemOnSizeChanged;
}
}
private static void TabItemOnSizeChanged(object sender, SizeChangedEventArgs sizeChangedEventArgs)
{
var totalWidth = 0.0;
foreach (var item in m_tabControl.Items)
{
var tabItem = item as TabItem;
if (tabItem == null) continue;
totalWidth += tabItem.ActualWidth;
}
// When more than one row of tabs, the width of the TabControl is used
var actualWidth = totalWidth > m_tabControl.ActualWidth ? m_tabControl.ActualWidth : totalWidth;
SetTotalHeadersWidth(m_tabControl, actualWidth);
}
}
即使您使用 TabControl
的 ItemsSource
动态加载选项卡,此解决方案也能正常工作。 TotalHeadersWidth
将始终接收总 headers 宽度,除非选项卡被包裹在多行中。在这种情况下,它将使用 TabControl
本身的 ActualWidth
,在您的情况下,它给出了我们想要的。
我需要做的是在超出范围并隐藏 TabControl 之前停止 GridSplitter。因此,我想到的想法是将 TabItems 的所有 Header 的 ActualWidths 的总和绑定到 TabControl 的 MinWidth 或保留 TabControl 的 Crid Cell。但问题是到目前为止我无法访问 TabItem 的 Header 的宽度。我发现的一种解决方案是在 Tabitem.Header 中放置一个 TextBlock,声明其宽度并用 x:Name 命名。但是以这种方式使用宽度并不能给出 Header 的总宽度,包括边距和填充等,因此它甚至无法接近准确度。
更新
好的,这是代码。请注意,我已经实施了其中一种解决方案,但如果动态加载选项卡,它不会控制 MinWidth。
<Grid Background="#FFD6DBE9" Height="614" Width="1109">
<Grid.RowDefinitions>
<RowDefinition Height="89"/>
<RowDefinition Height="Auto" MinHeight="{Binding ActualHeight, ElementName=gridNotificationsHeader}"/>
<RowDefinition Height="494*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*" MinWidth="{Binding MinWidth, ElementName=tabDataEntities}"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="144*">
<ColumnDefinition.MinWidth>
<MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
<Binding ElementName="cdLblNotificationsHeader" Path="MinWidth"/>
<Binding ElementName="cdBtnNotificationsClose" Path="ActualWidth"/>
</MultiBinding>
</ColumnDefinition.MinWidth>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="1" Width="2" Grid.RowSpan="2"/>
<Grid x:Name="gridNotificationsHeader" Grid.Column="2" Background="#FF657695"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cdLblNotificationsHeader" MinWidth="{Binding Width, ElementName=lblNotificationsHeader}"/>
<ColumnDefinition x:Name="cdBtnNotificationsClose" Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblNotificationsHeader" Content="Notifications" VerticalAlignment="Top"
FontSize="14.667" Height="30" Foreground="#FFEBF0EE" HorizontalAlignment="Left" Width="92"/>
<Button x:Name="btnNotificationsClose" Content="X"
Margin="0,5,8,0" VerticalAlignment="Top" Width="20" FontFamily="Verdana" HorizontalAlignment="Right" Background="Transparent" FontSize="13.333" Foreground="Black" Grid.Column="1"/>
</Grid>
<TabControl x:Name="tabDataEntities" Margin="0,0,5,10" Grid.Row="1" Grid.RowSpan="2" FontSize="12" Grid.ColumnSpan="1" MinWidth="{Binding ElementName=TabItemOne, Path=ActualWidth}">
<TabItem x:Name="TabItemOne">
<TabItem.Header>Tab Item</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
就这么简单
<StackPanel>
<TabControl>
<TabItem Header="Hello world" Name="Tab1"/>
<TabItem Header="Hello" Name="Tab2"/>
<TabItem Header="world" Name="Tab3"/>
</TabControl>
<TextBlock Text="{Binding ElementName=Tab1, Path=ActualWidth}"/>
<TextBlock Text="{Binding ElementName=Tab2, Path=ActualWidth}"/>
<TextBlock Text="{Binding ElementName=Tab3, Path=ActualWidth}"/>
</StackPanel>
刚刚在做以下事情时玩得很开心 AttachedProperty
:
XAML 用法
<TabControl question32926699:TabControlHeaderWidthWatcher.WatchHeadersWidth="true"
question32926699:TabControlHeaderWidthWatcher.TotalHeadersWidth="{Binding TotalWidth, Mode=OneWayToSource}">
<TabItem Header="Tab Item 1" />
<TabItem Header="Tab Item 2" />
</TabControl>
附上属性
public class TabControlHeaderWidthWatcher
{
private static TabControl m_tabControl;
public static readonly DependencyProperty WatchHeadersWidthProperty = DependencyProperty.RegisterAttached(
"WatchHeadersWidth", typeof (bool), typeof (TabControlHeaderWidthWatcher), new PropertyMetadata(default(bool), PropertyChangedCallback));
public static void SetWatchHeadersWidth(DependencyObject element, bool value)
{
element.SetValue(WatchHeadersWidthProperty, value);
}
public static bool GetWatchHeadersWidth(DependencyObject element)
{
return (bool)element.GetValue(WatchHeadersWidthProperty);
}
public static readonly DependencyProperty TotalHeadersWidthProperty = DependencyProperty.RegisterAttached(
"TotalHeadersWidth", typeof (double), typeof (TabControlHeaderWidthWatcher), new PropertyMetadata(default(double)));
public static void SetTotalHeadersWidth(DependencyObject element, double value)
{
element.SetValue(TotalHeadersWidthProperty, value);
}
public static double GetTotalHeadersWidth(DependencyObject element)
{
return (double) element.GetValue(TotalHeadersWidthProperty);
}
private static void PropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
m_tabControl = dependencyObject as TabControl;
if (m_tabControl == null) return;
((INotifyCollectionChanged)m_tabControl.Items).CollectionChanged += CollectionChanged;
}
private static void CollectionChanged(object sender, EventArgs eventArgs)
{
foreach (var item in m_tabControl.Items)
{
var tabItem = item as TabItem;
if (tabItem == null) continue;
// Unsubscribe first in case it was there previously
tabItem.SizeChanged -= TabItemOnSizeChanged;
tabItem.SizeChanged += TabItemOnSizeChanged;
}
}
private static void TabItemOnSizeChanged(object sender, SizeChangedEventArgs sizeChangedEventArgs)
{
var totalWidth = 0.0;
foreach (var item in m_tabControl.Items)
{
var tabItem = item as TabItem;
if (tabItem == null) continue;
totalWidth += tabItem.ActualWidth;
}
// When more than one row of tabs, the width of the TabControl is used
var actualWidth = totalWidth > m_tabControl.ActualWidth ? m_tabControl.ActualWidth : totalWidth;
SetTotalHeadersWidth(m_tabControl, actualWidth);
}
}
即使您使用 TabControl
的 ItemsSource
动态加载选项卡,此解决方案也能正常工作。 TotalHeadersWidth
将始终接收总 headers 宽度,除非选项卡被包裹在多行中。在这种情况下,它将使用 TabControl
本身的 ActualWidth
,在您的情况下,它给出了我们想要的。