首页新闻找找看学习计划

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>

 

请问:该如何达成我的目的?

 

谢谢!

519740105的主页 519740105 | 大侠五级 | 园豆:5810
提问于:2017-03-24 17:28
< >
分享
最佳答案
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
天方 | 大侠五级 |园豆:5264 | 2017-03-25 00:29

非常感谢!

 

已经用这个策略解决了问题。

519740105 | 园豆:5810 (大侠五级) | 2017-03-27 15:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册