wpf tabcontrol的问题
1
悬赏园豆：100
[已解决问题]
解决于 2017-03-27 15:31
我想使用wpf写一个简单的浏览器外壳，其中使用了tabcontrol来实现多标签的效果，但结果不是我想要的。
1、tabcontrol的本性就是：
多个tab一个content。
当tab切换时，content并不变化，只是绑定不同的数据而已
2、我要的是：
tab的切换后再切换回来，content能保持在原有的效果。
类似现在的多标签浏览器一样，不同的标签切换，标签的内容保持不便，不需要刷新
3、xaml代码如下：
<TabControl ItemsSource="{Binding Items}"> <TabControl.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Red" CornerRadius="5,5,0,0" DataContext="{Binding Header}"> <StackPanel Orientation="Horizontal"> <StackPanel.Resources> <Style TargetType="{x:Type Image}"> <Setter Property="Width" Value="16" /> <Setter Property="Height" Value="16" /> </Style> </StackPanel.Resources> <Image Source="{Binding Icon}" /> <TextBlock Text="{Binding Title}" Name="title" /> <Image Source="{Binding StatusIcon}" Visibility="{Binding StatusIconVisibile}" /> <Image Source="{Binding CloseIcon}" IsEnabled="{Binding Cloasable}" /> </StackPanel> </Border> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Red" CornerRadius="5,5,0,0"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="32" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> <Label Content="地址："/> <TextBox Text="{Binding EntryUrl}" IsReadOnly="True" /> </StackPanel> <WebBrowser Grid.Row="1" local:WebBrowserUtility.BindableSource="{Binding EntryUrl}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Grid> </Border> </DataTemplate> </TabControl.ContentTemplate> </TabControl>
请问：该如何达成我的目的？
谢谢！
最佳答案
1
简单一点的弄的话，TabControl里面直接塞TabItem,TabItem里面塞标签内容不久可以了吗？
从你的例子里面看，是要用MVVM的方式吗？可以参考一下我写的这个例子：
class TabPageModel { public string Header { get; set; } public string Url { get; set; } public WebBrowser Browser { get; set; }
public TabPageModel(string header, string url) { this.Header = header; this.Url = url; Browser = new WebBrowser(); Browser.Navigate(url); } public override string ToString() { return Header; } } var page1 = new TabPageModel("博客园", "https://home.cnblogs.com/"); var page2 = new TabPageModel("博问", "https://q.cnblogs.com/"); this.DataContext = new[] {page1, page2};
<TabControl ItemsSource="{Binding}" SelectedIndex="0" > <TabControl.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Header}" /> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate> <DockPanel> <TextBox Text="{Binding Url}" Margin="4" DockPanel.Dock="Top" /> <Border BorderBrush="Gray" BorderThickness="1" Margin="4"> <ContentControl Content="{Binding Browser}" /> </Border> </DockPanel> </DataTemplate> </TabControl.ContentTemplate> </TabControl>
需要注意的地方就是要写两个Template，ItemTemplate对应的是Header，ContentTemplate对应的是内容。
一个TabControl是由一个TabPanel和一个ContentPresenter组成，TabPanel显示的是Items（由ItemTemplate控制），，ContentPresenter显示的是TabControl的SelectedContent（由ContentTemplate控制），实际上也是Items里面的一个。类似于ListBox下另外挂了一个显示当前选中选项详情的容器。
收获园豆：100
非常感谢！
已经用这个策略解决了问题。
