none
TabControl中每个TabItem的Content如何在controlTemplate中和模型绑定? RRS feed

  • 问题

  • 我在XAML文件中定义了样式如下

     <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0"/>
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                    <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                </Grid.RowDefinitions>
                                <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                                <Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                            </Grid>
    
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid x:Name="Root">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="SelectionStates">
                  <VisualState x:Name="Unselected" />
                  <VisualState x:Name="Selected">
                    <Storyboard>
                      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                        <EasingColorKeyFrame KeyTime="0"
                                             Value="{StaticResource ControlPressedColor}" />
                      </ColorAnimationUsingKeyFrames>
                      <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                        Storyboard.TargetName="Border">
                        <EasingThicknessKeyFrame KeyTime="0"
                                                 Value="1,1,1,0" />
                      </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="MouseOver" />
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                        <EasingColorKeyFrame KeyTime="0"
                                             Value="{StaticResource DisabledControlDarkColor}" />
                      </ColorAnimationUsingKeyFrames>
                      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.BorderBrush).
                        (SolidColorBrush.Color)">
                        <EasingColorKeyFrame KeyTime="0"
                                             Value="{StaticResource DisabledBorderLightColor}"/>
                      </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="Border"
                      Margin="0,0,-4,0"
                      BorderThickness="1,1,1,1"
                      CornerRadius="2,12,0,0">
                <Border.BorderBrush>
                  <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                </Border.BorderBrush>
                <Border.Background>
    
                  <LinearGradientBrush StartPoint="0,0"
                                       EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="{DynamicResource ControlLightColor}"
                                      Offset="0.0" />
                        <GradientStop Color="{DynamicResource ControlMediumColor}"
                                      Offset="1.0" />
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
    
                </Border.Background>
                <ContentPresenter x:Name="ContentSite"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  ContentSource="Header"
                                  Margin="12,2,12,2"
                                  RecognizesAccessKey="True" />
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected"
                       Value="True">
                <Setter Property="Panel.ZIndex"
                        Value="100" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    也定义了几个DataTemplate给ItemTemplateSelector

    <TabControl ItemSource="{Binding Path=MyItems}" Style="{StaticResource TabControlStyle1}">
    <TabControl.ItemTemplateSelector
    ATemplate="{StaticResource ATemplate}"
    bTemplate="{StaticResource bTemplate}"/>
    </TabControl>
    
    
    

    现在我的问题是,我希望源集合MyItems的每个item对象类定义一个属性,类型是object,可以是一个stackpanle或者wrappanel之类,比如叫ItemConent,然后每个ItemContent对应一个TabItem里的content. 但我不知道该在什么位置插入Content="{Binding Path=ItemContent}"来完成绑定。

    上面代码中,TabItem模板中的ContentPresenter应该是指向header的,而TabControl模板中的ContentPresenter绑定了又没看到效果。

    2018年9月28日 1:49

全部回复

  • Hi sliverbullet,

    根据你的描述, 我做了一个类似的sample, 你可以参考一下:

     <Window.Resources>
            <Style x:Key="tabcontrolstyle1" TargetType="TabControl">
                <Setter Property="ItemContainerStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type TabItem}">
                            <Setter Property="Header" Value="{Binding Name}" />
                            <Setter Property="Content" Value="{Binding content}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type TabItem}">
                                        <Grid x:Name="Root">
                                            <Border
                                                x:Name="Border"
                                                Margin="0,0,-4,0"
                                                BorderThickness="1,1,1,1"
                                                CornerRadius="2,12,0,0">
                                                <Border.BorderBrush>
                                                    <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                                                </Border.BorderBrush>
                                                <Border.Background>
    
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                        <LinearGradientBrush.GradientStops>
                                                            <GradientStopCollection>
                                                                <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColor}" />
                                                                <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColor}" />
                                                            </GradientStopCollection>
                                                        </LinearGradientBrush.GradientStops>
                                                    </LinearGradientBrush>
    
                                                </Border.Background>
                                                <ContentPresenter
                                                    x:Name="ContentSite"
                                                    Margin="12,2,12,2"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    ContentSource="Header"
                                                    RecognizesAccessKey="True" />
                                            </Border>
                                            <!--<VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="SelectionStates">
                                                <VisualState x:Name="Unselected" />
                                                <VisualState x:Name="Selected">
                                                    <Storyboard>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).                     (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            -->
                                            <!--<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />-->
                                            <!--
                                                        </ColorAnimationUsingKeyFrames>
                                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderThickness)">
                                                            <EasingThicknessKeyFrame KeyTime="0" Value="1,1,1,0" />
                                                        </ThicknessAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="MouseOver" />
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).                     (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            -->
                                            <!--<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColor}" />-->
                                            <!--
                                                        </ColorAnimationUsingKeyFrames>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).                     (SolidColorBrush.Color)">
                                            -->
                                            <!--<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColor}" />-->
                                            <!--
                                                        </ColorAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>-->
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsSelected" Value="True">
                                                <Setter Property="Panel.ZIndex" Value="100" />
                                                <Setter TargetName="Border" Property="Background" Value="Red" />
                                                <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid
                                x:Name="templateRoot"
                                ClipToBounds="true"
                                KeyboardNavigation.TabNavigation="Local"
                                SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0" />
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                                    <RowDefinition x:Name="RowDefinition1" Height="*" />
                                </Grid.RowDefinitions>
                                <TabPanel
                                    x:Name="headerPanel"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Margin="2,2,2,0"
                                    Panel.ZIndex="1"
                                    Background="Transparent"
                                    IsItemsHost="true"
                                    KeyboardNavigation.TabIndex="1" />
                                <Border
                                    x:Name="contentPanel"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="2"
                                    KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter
                                        x:Name="PART_SelectedContentHost"
                                        Margin="{TemplateBinding Padding}"
                                        ContentSource="SelectedContent"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Border>
                            </Grid>
    
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <TabControl ItemsSource="{Binding students}" Style="{StaticResource tabcontrolstyle1}">
            </TabControl>
        </Grid>
    public ObservableCollection<teststudent> students { get; set; }
            public Window3()
            {
                InitializeComponent();
                students = new ObservableCollection<teststudent>()
                {
                    new teststudent(){Name="cherry",content="this is a gril"},
                    new teststudent(){Name="cherry1",content="this is a gril"},
                    new teststudent(){Name="cherry2",content="this is a gril"},
                    new teststudent(){Name="cherry3",content="this is a gril"},
                    new teststudent(){Name="cherry3",content="this is a gril"},
                };
                this.DataContext = this;
            }
        }
    
        public class teststudent
        {
            public string Name { get; set; }
            public string content { get; set; }
        }

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2018年9月28日 8:35
    版主