Do a ContentPresenter animation in ControlTemplate of TabControl? Failure!How?

Question

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="cp" Storyboard.TargetProperty="(ContentPresenter.ContentSource)">
         <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Null}" />
         <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="SelectedContent" />
</ObjectAnimationUsingKeyFrames> 


  <ContentPresenter Name="cp" ContentSource="SelectedContent"></ContentPresenter>

The code above doesn't work.

Why?How?

Answer 1

My understanding is that the reason this doesn't work is because ContentSource is not the same as a solid property like Content. It is used to alias other properties. I assume that because this is used by the FrameworkElementFactory when initially building the control, it would not re-run every time you changed it on the fly, as that would break the other dependencies.

 

It sounds as if you are trying to add a delay before the content is shown?
In which case, a better solution may be to work the visibility properties.

I used Expression Blend to copy the TabControl template, which it sounds like you are working on? I then added an animation, triggered when the control is loaded. Here is a MainPage cut-paste example:

<Window x:Class="WpfApplication64.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
		<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
		<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="Padding" Value="4,4,4,4"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
			<Setter Property="Background" Value="#F9F9F9"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type TabControl}">
						<ControlTemplate.Resources>
							<Storyboard x:Key="OnLoaded1">
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PART_SelectedContentHost">
									<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</ControlTemplate.Resources>
						<Grid 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" 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.Triggers>
							<EventTrigger RoutedEvent="FrameworkElement.Loaded">
								<BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
							</EventTrigger>
							<Trigger Property="TabStripPlacement" Value="Bottom">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
							</Trigger>
							<Trigger Property="TabStripPlacement" Value="Left">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
								<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
								<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
							</Trigger>
							<Trigger Property="TabStripPlacement" Value="Right">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
								<Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
								<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

    <Grid>
        <TabControl Style="{DynamicResource TabControlStyle1}">
            <TabItem Header="one">
                <TextBlock Text="hello"/>
            </TabItem>
            <TabItem Header="two"/>
		</TabControl>
    </Grid>

</Window>

Hope that helps.
 

Regards,
Pete

---

#PEJL

Answer 2

My understanding is that the reason this doesn't work is because ContentSource is not the same as a solid property like Content. It is used to alias other properties. I assume that because this is used by the FrameworkElementFactory when initially building the control, it would not re-run every time you changed it on the fly, as that would break the other dependencies.

 

It sounds as if you are trying to add a delay before the content is shown?
In which case, a better solution may be to work the visibility properties.

I used Expression Blend to copy the TabControl template, which it sounds like you are working on? I then added an animation, triggered when the control is loaded. Here is a MainPage cut-paste example:

<Window x:Class="WpfApplication64.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
		<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
		<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="Padding" Value="4,4,4,4"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
			<Setter Property="Background" Value="#F9F9F9"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type TabControl}">
						<ControlTemplate.Resources>
							<Storyboard x:Key="OnLoaded1">
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PART_SelectedContentHost">
									<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</ControlTemplate.Resources>
						<Grid 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" 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.Triggers>
							<EventTrigger RoutedEvent="FrameworkElement.Loaded">
								<BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
							</EventTrigger>
							<Trigger Property="TabStripPlacement" Value="Bottom">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
							</Trigger>
							<Trigger Property="TabStripPlacement" Value="Left">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
								<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
								<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
							</Trigger>
							<Trigger Property="TabStripPlacement" Value="Right">
								<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
								<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
								<Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
								<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
								<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
								<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
								<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
								<Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

    <Grid>
        <TabControl Style="{DynamicResource TabControlStyle1}">
            <TabItem Header="one">
                <TextBlock Text="hello"/>
            </TabItem>
            <TabItem Header="two"/>
		</TabControl>
    </Grid>

</Window>

Hope that helps.
 

Regards,
Pete

---

#PEJL

But I don't want to control the visibility.

I want to control the ContentSource.

Answer 3

Hi yqhszn20j,

We can't animation the ContentSource property in WPF, Animations are TimeLines, to change a property from one value to another during some time. And it is obvious that ContentSource doesn't meet this kind of gradually change requirement. And this is overview of Animation in WPF for your reference:http://msdn.microsoft.com/en-us/library/ms752312.aspx#applyanimationstoproperty

In additional, if you want to control the contentsource of Contentpresenter, you can try to using binding or to reset it directly to achieve your goal.

Best regards.