Click here to Skip to main content
15,607,524 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a total of four tab items and the underlined rectangles have different widths depending on which of the four tab items is selected. But my data trigger binding doesn't work.


Suppose I select the second tab item, and after I select the fourth tab item, the underline rectangle should move from the second tab item to the fourth tab item with the correct entry and exit animation as well as the correct width.

I have the following code but I don't know how to do it.

            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>

        <TabControl Grid.Row="0"     x:Name="TestTabs">
            <TabItem Header="News"/>
            <TabItem Header="Files"/>
            <TabItem Header="Settings"/>
            <TabItem Header="Help"/>

        <DockPanel x:Name="rp" Grid.Row="0" LastChildFill="False" HorizontalAlignment="Stretch">
            <Canvas DockPanel.Dock="Left">
                <Rectangle x:Name="MySeparator3" Fill="Orange"  VerticalAlignment="Top" Width="40" Height="4" Margin="3,25,0,0"   SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="HighQuality" >
                        <Style TargetType="{x:Type Rectangle}">
                            <Setter Property="SnapsToDevicePixels" Value="True"/>
                            <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
                            <Setter Property="Visibility" Value="Visible"/>
                            <Setter Property="IsEnabled" Value="True"/>
                                <DataTrigger Binding="{Binding ElementName=TestTabs, Path=SelectedIndex}" Value="1">
                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                    <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
                                    <Setter Property="Visibility" Value="Visible" />
                                    <Setter Property="IsEnabled" Value="True" />
                                        <BeginStoryboard Name="MyBeginStoryboard11">
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="40" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="40" To="35" Duration="0:0:0.2"></DoubleAnimation>
                                        <BeginStoryboard Name="MyBeginStoryboard1">
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="40" To="0" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="35" To="40" Duration="0:0:0.2"></DoubleAnimation>
                                        <Condition  Binding="{Binding ElementName=TestTabs, Path=SelectedIndex}" Value="2"/>
                                        <BeginStoryboard Name="MyBeginStoryboard19">
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="73" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="40" To="50" Duration="0:0:0.2"></DoubleAnimation>
                                        <BeginStoryboard Name="MyBeginStoryboard5">
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="73" To="0" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="50" To="40" Duration="0:0:0.2"></DoubleAnimation>

What I have tried:

My goal is to declare four separate rectangle for each tab item and give enter animation and exit animation to each of them but my storyboard animation is conflicting because sometimes one tab item has multiple storyboard animation so as soon as I select a tab item more than one animation is executing. How I execute one by one?
Gerry Schmitz 24-Mar-22 14:51pm    
"SelectedIndex" is probably not as predictable as you're expecting. Also, tabs "load and unload" as you select / deselect; adding to the mix.

Whatever you have in mind is probably easier to control with code behind (in this case); focusing on a navigation event instead of content.
Member 15061773 24-Mar-22 15:13pm    
Thank you very much sir. I understand that I should do this from Code behind. Can you please give me the solution with proper code. If you do then I shall be grateful to you. You also give me any example, links etc.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900