不知道还有没兄弟在线，帮兄弟解个惑，有关控件模板。

sjdev 2010-02-13 09:56:10

我在使用xaml，想使用模板来自定义Tab控件的风格。
我想做出的效果是，当鼠标悬停在一个TabItem上时，改变其背景。
通过代码<Trigger Property="Selector.IsSelected" Value="True">可以定义TabItem选中的效果，
查了一下msdn，好像没有鼠标悬停状态的，请问如何做出悬停效果?

<Style x:Key="OutlookTabItemStyle" TargetType="{x:Type TabItem}">

            <Setter Property="Padding" Value="12,2,12,2"/>

            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>

            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

            <Setter Property="VerticalContentAlignment" Value="Stretch"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type TabItem}">

                        <Border 

                            SnapsToDevicePixels="true" 

                            x:Name="Bd" 

                            Background="{TemplateBinding Background}"

                            BorderThickness="1" 

                            BorderBrush="#FF6593CF">

                            <ContentPresenter 

                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

                                Margin="{TemplateBinding Padding}"

                                VerticalAlignment=

                                    "{Binding 

                                        Path=VerticalContentAlignment,

                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"

                                ContentSource="Header" 

                                RecognizesAccessKey="True"

                                HorizontalAlignment="Left"/>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="Selector.IsSelected" Value="True">

                                <Setter 

                                    Property="Background" 

                                    TargetName="Bd"

                                    Value="{DynamicResource OutlookButtonHighlight}"/>

                            </Trigger>                           

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

...全文

73 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

sjdev 2010-02-14

打赏
举报

我使用下面的代码实现了TabItem鼠标Enter和Leave的动画效果，在动画中对TabItem的高度属性进行了动画。现在有一个问题：
1.这段代码目前只是对tabitem1处理，能不能对TabControl的所有TabItem统一处理？
2.我使用了template定义了tabcontrol的Visual Style，能不能把这个动画也定义在template中，如何定义?
3.想改变TabItem的BackGround，或者Foreground，应该使用什么动画?

                <TabItem.Triggers>

                    <EventTrigger RoutedEvent="TabItem.MouseEnter">

                        <BeginStoryboard>

                            <Storyboard RepeatBehavior="Forever"  AutoReverse="True">

                                <DoubleAnimation Storyboard.TargetName="tabitem1"

                                                 Storyboard.TargetProperty="Height"

                                                 From="30" To="40" Duration="0:0:0">

                                    

                                </DoubleAnimation>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger>

                    <EventTrigger RoutedEvent="TabItem.MouseLeave">

                        <BeginStoryboard>

                            <Storyboard RepeatBehavior="Forever" AutoReverse="True">

                                <DoubleAnimation Storyboard.TargetName="tabitem1"

                                                 Storyboard.TargetProperty="Height"

                                                 From="40" To="30" Duration="0:0:0">

                                    

                                </DoubleAnimation>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger>

                </TabItem.Triggers>