WPF——可以上下滑动的TabControl

因工作需要，需要写一个可以上下滑动的TabControl，并且将TabItem向上滑动时展示TabItem,像下滑动时隐藏TabItem

这就涉及到了控件的重新绘制和简单动画

下面记录一下写的TabControl样式，以免以后忘记了

<Canvas x:Name="canvas">
    <TabControl TabStripPlacement="Right" Height="170"  Width="{Binding ActualWidth, ElementName=ActualHeightGrid}" Grid.ColumnSpan="2" Canvas.Left="80"  
                Canvas.Top="{Binding ActualHeight,ElementName=MiddleGrid}" Margin="0 0 0 100" x:Name="TabControl" >
        <TabItem Height="30" Width="150" HorizontalAlignment="Right"  >
            <TabItem.Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Border  Background="#2E354F" BorderThickness="1" CornerRadius="5 5 0 0">
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                        <TextBlock VerticalAlignment="Center" Foreground="White"  Text="recheck list"></TextBlock>
                                        <ui:Image  HorizontalAlignment="Center" Source="/Assets/CTPage/隐藏.png" Width="20" Height="20" Margin="10 0 0 0"/>
                                    </StackPanel>
                                    <i:Interaction.Triggers>
                                        <i:DataTrigger Binding="{Binding IsHidden}" Value="true">
                                            <i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource ShowSide}" />
                                        </i:DataTrigger>
                                        <i:DataTrigger Binding="{Binding IsHidden}" Value="false">
                                            <i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource HiddenSide}" />
                                        </i:DataTrigger>
                                        <i:EventTrigger EventName="MouseLeftButtonDown">
                                            <i:InvokeCommandAction Command="{Binding HiddenTabCommand}"/>
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabItem.Style>
            <Grid Background="#2E354F"  Height="140" x:Name="ShowGrid"  Visibility="Hidden">
                <ListBox x:Name="recheckListBox" ItemsSource="{Binding WindowsShowData.BagList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  
                          SelectedItem="{Binding SelectItemBag,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDoubleClick">
                            <i:InvokeCommandAction Command="{Binding OpenImageCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{Binding BagState}" Height="109" Width="109">
                                <StackPanel>
                                    <Border Background="White" Height="76" Width="97" Margin="0 10 0 0">
                                        <ui:Image  HorizontalAlignment="Center" Source="{Binding BagImagePath}"/>
                                    </Border>

                                    <TextBlock Text="{Binding Name}" Foreground="{Binding TextColor}" Margin="2 3 2 0" HorizontalAlignment="Center"></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </TabItem>
    </TabControl>
</Canvas>

关于TabItem上下移动的后端代码，与HiddenTabCommand相绑定

 private async Task OnHiddenTab()
 {
     if (m_MainWindowCT.ShowGrid.Visibility == Visibility.Visible)
     {
         //m_MainWindowCT.ShowGrid.Visibility = Visibility.Hidden;
     }
     else
     {
         m_MainWindowCT.ShowGrid.Visibility = Visibility.Visible;
     }

     // 获取控件的当前位置
     double currentLeft = Canvas.GetTop(m_MainWindowCT.TabControl);
     double targetLeft;
     //if (!WindowsShowData.TabIsHidden)
     //{
     //    // 计算控件目标位置
     //    targetLeft = currentLeft - 143;
     //    WindowsShowData.TabIsHidden = !WindowsShowData.TabIsHidden;
     //}
     //else
     //{
     //    targetLeft = currentLeft + 143;
     //    WindowsShowData.TabIsHidden = !WindowsShowData.TabIsHidden;
     //}
     if (!IsHidden)
     {
         // 计算控件目标位置
         targetLeft = currentLeft - 143;
         IsHidden = !IsHidden;
     }
     else
     {
         targetLeft = currentLeft + 143;
         IsHidden = !IsHidden;
     }

     // 创建动画对象
     DoubleAnimation animation = new DoubleAnimation();
     animation.From = currentLeft;
     animation.To = targetLeft;
     animation.Duration = TimeSpan.FromSeconds(0.25); // 动画持续0.25秒

     // 设置动画的目标属性
     Storyboard.SetTarget(animation, m_MainWindowCT.TabControl);
     Storyboard.SetTargetProperty(animation, new PropertyPath(Canvas.TopProperty));

     // 创建并启动故事板
     Storyboard storyboard = new Storyboard();
     storyboard.Children.Add(animation);
     storyboard.Begin(m_MainWindowCT.canvas);
 }

关于TabItem下方的Grid的显示隐藏动画

效果图

展示

隐藏