表项旋转WPF

本文关键字:WPF 旋转 | 更新日期: 2023-09-27 18:09:22

我是WPF的新手,我试图通过使用样式在选项卡控件中创建选择和取消选择选项卡项的动画。

不幸的是它不工作,我不知道为什么。这种风格有什么问题:

<Style TargetType="{x:Type TabItem}" x:Key="MainTabControlItems">
        <Style.Setters>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            <Setter Property="Margin" Value="2"></Setter>
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="BorderThickness" Value="2"></Setter>
        </Style.Setters>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="FontWeight" Value="Bold" />
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(TabItem.RenderTransform).(RotateTransform.Angle)" 
                                             To="30" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="IsSelected" Value="false">
                <Setter Property="FontWeight" Value="Normal" />
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(TabItem.RenderTransform).(RotateTransform.Angle)" To="-30" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>           
        </Style.Triggers>
    </Style>
<TabControl Name="tcAplabet"
                    SizeChanged="tcAplabet_SizeChanged" SelectionChanged="tcAplabet_SelectionChanged"
                    Grid.Column="0"
                    Grid.Row="0"
                    TabStripPlacement="Left"
                    ItemContainerStyle="{DynamicResource ResourceKey=MainTabControlItems}">
            <TabItem Header="A"  IsSelected="True" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="B" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="C" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="D" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="E" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="F" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="G" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="H" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="CH" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="I" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="J" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="K" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="L" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="M" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="N" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="O" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="P" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="Q" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="R" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="S" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="T" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="U" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="V" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="W" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="X" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="Y" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabItem Header="Z" Style="{DynamicResource ResourceKey=MainTabControlItems}" />
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <controls:MainTabContent Name="cMainTabContent" Margin="2"></controls:MainTabContent>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

表项旋转WPF

没有为TabItem创建RenderTransform实例的问题。它在一个空对象上应用动画,并吞下由此产生的任何异常。

添加到你的style:

 <Setter Property="RenderTransform">
     <Setter.Value>
         <TransformGroup>
             <RotateTransform />
             <TranslateTransform />
             <SkewTransform />
             <ScaleTransform />                                
         </TransformGroup>
      </Setter.Value>
  </Setter>
  <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

*你也可以将RenderTransformOrigin设置为Tabtem的中心,这样就不会在Tabtem的左上角旋转。(除非你不想这样做)