Question

单击选项卡时，我想在选项卡项上实现内容网格的滑动效果。

这是我的xaml

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Left" >

        <TabControl Name="_menuTabControl" TabStripPlacement="Left" >
            <TabItem Name="MainTab" Header="Main" >


            <Grid>

                <TextBlock     FontFamily="pack://application:,,,/Resources/#Sansation"   FontSize="36"  Text="testing right now" />




            </Grid>
        </TabItem>

        <TabItem Name="_tabItems1" Header="Autologin" >


        </TabItem>
        <TabItem Name="_tabItedms1" Header="Autologin" >


        </TabItem>
    </TabControl>




    </StackPanel>

添加了一些风格效果

        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="Width" Value="160"/>

        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="border1"  
                        Background="Transparent"
                        CornerRadius="3,3,3,3"
                       Cursor="Hand"
                        BorderThickness="0,0,0,1"
                        Panel.ZIndex="50"

                        Margin="-7,2,0,0"
                            >

                            <ContentPresenter x:Name="ContentSite"             
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            ContentSource="Header"
                            Margin="10,10,10,10"/>
                        </Border>
                    </Grid>


                    <ControlTemplate.Triggers>


                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter Property="FontSize" Value="17"/>
                            <Setter Property="Margin" Value="0,0,-2,0" />
                            <Setter Property="Foreground" Value="#cfba6b"/>

                            <Setter TargetName="border1"  
                            Property="BorderBrush" 
                            Value="{StaticResource  glass}" />

                            <Setter TargetName="border1"  
                            Property="Background" 
                            Value="{StaticResource glassef }" />

                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border1" 
                            Property="Background" 
                            Value="{StaticResource glassef}" />

                            <Setter TargetName="border1"  
                            Property="BorderBrush" 
                            Value="{StaticResource  glass}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

` 我想滑动标签项内容。它只能在纯xaml中完成吗？或者我也应该使用c＃？任何帮助将不胜感激。

Answer 1

您应该将IsSelected上的保证金更改为

<Trigger Property="IsSelected" Value="True">
...
   <Setter Property="Margin" Value="10,0,0,0" />

如果您想要幻灯片效果，可以使用故事板应用动画

<EventTrigger  RoutedEvent="Grid.Loaded"> 
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
                                            <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,0,0,0" />
                                            <SplineThicknessKeyFrame KeyTime="00:00:02" Value="10,0,0,0" />
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>

WPF幻灯片内容TabItem

1 个答案: