WPF 幻灯片内容 TabItem
WPF Slide Content TabItem
我想在点击选项卡时实现内容网格在选项卡项上的滑动效果。
例如我的 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#?
任何帮助将不胜感激。
您应该将 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>
我想在点击选项卡时实现内容网格在选项卡项上的滑动效果。
例如我的 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#? 任何帮助将不胜感激。
您应该将 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>