[Silverlight入门系列]Prism的TabControl如何绑定Header

来源:互联网 时间:1970-01-01

用Silverlight和Prism的时候常用TabControl控件作为Prism Region,这个时候对TabControl这个Region来说动态注入的视图会显示在内容页中,但TabItem的Header如何用MVVM的方式显示和绑定呢?Prism的StockTradeRI里面是这样处理的:

首先加一个IHeaderInfoProvider接口

    public interface IHeaderInfoProvider<T>    {
        T HeaderInfo { get; }
    }

然后让ViewModel实现这个接口

[Export(typeof(IOrderCompositeViewModel))]
[PartCreationPolicy(CreationPolicy.NonShared)]
public partial class OrderCompositeViewModel : DependencyObject, IOrderCompositeViewModel,
 IHeaderInfoProvider<string>
{
  //....
  public string HeaderInfo { get { return StringResources.MyTabHeader1; } }

}

在Xaml中设置TabItem的Control Template, 绑定Header

<UserControl.Resources>
 <Style x:Key="ShellTabItemStyle" TargetType="{x:Type TabItem}">
        <Setter Property="FontFamily" Value="Trebuchet MS"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="#FFFFFFFF"/>
        <Setter Property="Header" Value="{Binding Content.DataContext.HeaderInfo, RelativeSource={RelativeSource Self}}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Width="Auto" Height="Auto" x:Name="TabItemRoot" Margin="10,0,10,0">
                        <ContentPresenter Margin="13,5,13,5" x:Name="Content" ContentSource="Header" 
RecognizesAccessKey="True"/>
                        <Border x:Name="border" Height="Auto" Padding="0,0,0,0" Opacity="0">
                            <Border.Background>
                                <RadialGradientBrush>
                                    <GradientStop Color="#A3FFFFFF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </RadialGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="border" Property="Opacity" Value="1"/>
                            <Setter TargetName="Content" Property="Opacity" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="false">
                            <Setter TargetName="Content" Property="Opacity" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<TabControl
     x:Name="PositionBuySellTab"
     ItemContainerStyle="{StaticResource ShellTabItemStyle}" 
     cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"
               />

注意以上的Template用到了ContentPresenter,如果我们的项目中TabItem的Template没有用ContentPresenter,而是一个Image加一个TextBlock怎么办?很简单,无需安装上面的做法:

<Setter Property="Header" Value="{Binding Content.DataContext.HeaderInfo, RelativeSource={RelativeSource Self}}" />

这样做运行通不过。其实不要像StockTraceRI这样搞得这么复杂,只要删除上面那个Header的属性Setter,然后只要把TextBlock绑定到HeaderInfo,在注入的视图的ViewModel中有HeaderInfo这个属性即可。

<TextBlock Text="{Binding HeaderInfo}" />

下回讲如何用MVVM的方式动态更新TabItem的Header。

本文来自Mainz的博客,原文地址:http://www.cnblogs.com/Mainz/archive/2011/06/27/2091445.html


相关阅读:
Top