如何使tabcontrol的tabitem可以滚动显示?
如何在xaml中修改tabcontrol的样式添加箭头?
如何使tabcontrol的tabitem可以滚动显示?
如何在xaml中修改tabcontrol的样式添加箭头?
对于WPF中的TabControl控件,如果Tab的数量超过TabControl控件的宽度,当然可以使用滚动条来实现水平滚动。不过,TabControl也提供了默认的滚动方式:如果Tab的数量超过TabControl控件的宽度,TabControl中会自动显示一个箭头按钮,当你点击这个按钮时,TabControl会自动滚动到较远的Tab。
以下是实现自动滚动的方法:
在TabControl控件中附加ScrollViewer.VerticalScrollBarVisibility="Disabled"和ScrollViewer.HorizontalScrollBarVisibility="Auto"属性。
<TabControl Name="tabControl1"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
在TabItem头部添加可选的Button控件。
<TabControl Name="tabControl1"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Tab 1" Margin="0 0 10 0"/>
<Button Content="Scroll Right"/>
</StackPanel>
</TabItem.Header>
</TabItem>
...
</TabControl>
在Button的Click事件中使用ScrollToHorizontalOffset方法,来自动滚动到TabItem头部的位置。
private void Button_Click(object sender, RoutedEventArgs e)
{
double i = 0;
foreach(var item in tabControl1.Items)
{
if(tabControl1.ItemContainerGenerator.ContainerFromItem(item) is TabItem tabItem)
{
if(tabItem == tabControl1.SelectedItem)
{
tabControl1.ScrollToHorizontalOffset(i);
break;
}
else
{
i += tabItem.ActualWidth;
}
}
}
}
上面代码中,我们首先遍历TabControl的所有TabItem,并判断是否选中了当前的Tab。如果找到当前选中的Tab,就计算选中Tab到TabControl的左侧边缘的距离并使用ScrollToHorizontalOffset方法自动滚动到相应的位置。
这是一种比较简单的实现方法,当然,如果你需要更加复杂的效果,可以使用VS Blend等GUI编辑工具来进行细节调整。