WPF模拟Office2010文件菜单的TabControl模板

原创
2012/12/04 14:50
阅读数 1.3W


这是Office2010中的文件菜单点开后的效果。本文我将以强大的WPF(www.itstrike.cn)来实现类似的效果。希望你能有所收获。而不是只拷贝/粘贴代码而已。

开始之前。先把TabControl找个地方放着。

<Window x:Class="TestClient.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <TabControl Name="tabSteps">

        <TabItem Header="Info" IsSelected="True">

            <TextBlock>Info content</TextBlock>

        </TabItem>

        <TabItem Header="Recent">

            <TextBlock>Recent content tab</TextBlock>

        </TabItem>

        <TabItem Header="New">

            <TextBlock>New content tab</TextBlock>

        </TabItem>

        <TabItem Header="Print">

            <TextBlock>Print content tab</TextBlock>

        </TabItem>

        <TabItem Header="Save &amp; Send">

            <TextBlock>Save &amp; send content tab</TextBlock>

        </TabItem>

        <TabItem Header="Help">

            <TextBlock>Help tab</TextBlock>

        </TabItem>

    </TabControl>

</Window>


然后会大概是这个效果

为了改变TabControl的显示效果。我们使用模板机制,我们把模板写进一个资源字典里。这样就可以重用了。添加一个资源字典的步骤如下

右键点击工程-添加-资源字典

然后在资源字典里添加一些代码。

  <ControlTemplate x:Key="OfficeTabControl" TargetType="{x:Type TabControl}">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="160" />

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Border Background="#FFE9ECEF"

                    Grid.Column="0"

                    BorderBrush="LightGray"

                    BorderThickness="1"

                    SnapsToDevicePixels="True" />

            <StackPanel IsItemsHost="True"

                        Grid.Column="0"

                        Margin="0,0,-1,0"

                        SnapsToDevicePixels="True" />

            <ContentPresenter

                Content="{TemplateBinding SelectedContent}"

                Grid.Column="1"

                Margin="15,0,0,0" />

        </Grid>

    </ControlTemplate>


这样就添加了一个有一个grid元素的名为OfficeTabControl的控件模板 . Grid 被分成两列,一列是标签页,一列是页内容。左边的列包含一个灰色背景和亮灰色的边缘线,然后一个StackPanel,IsItemsHost属性被设置为true,

这样标签项被会放在这个栈面板里。第二列是ContentPresenter 这会放置标签页内容。然后让我们前面的TabControl使用新模板。设置Template 属性。

 <Window.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="OfficeTab.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Window.Resources>

    <TabControl Name="tabSteps" Template="{StaticResource OfficeTabControl}">

在这之前,先把资源字典加到窗体的Reesouce里。然后再设置。然后运行软件。效果会有一些不一样。

然后要修改左侧单个标签的显示效果。通过改变模板来实现。给模板添加如下的代码

<ControlTemplate x:Key="OfficeTabControl" TargetType="{x:Type TabControl}">

    <ControlTemplate.Resources>

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

            <Setter Property="Template">

                <Setter.Value>

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

                        <Grid SnapsToDevicePixels="True">

                            <ContentPresenter

                                Name="buttonText"

                                Margin="15,0,5,0"

                                TextBlock.FontFamily="Calibri"

                                TextBlock.FontSize="12pt"

                                TextBlock.Foreground="Black"

                                Content="{TemplateBinding Header}"

                                VerticalAlignment="Center"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </ControlTemplate.Resources>

然后再运行

VisualState很有意思。我们可以放在Grid里。然后设置正常状态和鼠标悬停的状态。

为了添加鼠标悬停效果,我们添加两个Borders元素。一个右边缘是灰线,另一个用在背景上。亮蓝色放在上下边缘

<Border Name="hoverShape"

        Height="40"

        Margin="0,0,1,0"

        SnapsToDevicePixels="True"

        BorderThickness="0,0,1,0"

        BorderBrush="LightGray">

    <Border BorderBrush="#FFA1B7EA"

            BorderThickness="0,1"

            Background="#FFE5EEF9"

            Height="40"

            SnapsToDevicePixels="True" />

</Border>

之后,我们为VisualState创建故事板,一个是正常状态。会使得hoverShape的透明度为0.另一个是鼠标悬停的状态。透明度会变成1

<Grid SnapsToDevicePixels="True">

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup Name="CommonStates">

            <VisualState Name="MouseOver">

                <Storyboard>

                    <DoubleAnimation

                        Storyboard.TargetName="hoverShape"

                        Storyboard.TargetProperty="Opacity"

                        To="1"

                        Duration="0:0:.1"/>

                </Storyboard>

            </VisualState>

            <VisualState Name="Normal">

                <Storyboard>

                    <DoubleAnimation

                        Storyboard.TargetName="hoverShape"

                        Storyboard.TargetProperty="Opacity"

                        To="0"

                        Duration="0:0:.1"/>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

之后效果如下

然后添加选中项的样式,在hoverShape 下面再添加一个Border,名字是buttonShape。通过这个我们给被选中项的上下边缘添加2个像素的黑蓝色边缘,

在 Expression Blend中打开, 使用钢笔工具绘制个你想要的路径形状即可。然后把生成的xaml代码拷些过来。

也可以直接用我的代码。。不顾我说过要怎么做了。

最终看起来应该是这样的。

<Border

    Name="buttonShape"

    Opacity="0"

    BorderBrush="#FF0343A6"

    BorderThickness="0,2"

    Height="40"

    SnapsToDevicePixels="True">

    <Path

        Data="M214,108 L346,108 346.125,118.125 337.75,126.125

                   346.375,134 346.375,143.875 214.25,144.25 z"

        SnapsToDevicePixels="True"

        Stretch="Fill"

        Height="40">

        <Path.Fill>

            <RadialGradientBrush GradientOrigin="0.2,0.5" RadiusX="0.8" RadiusY="0.8">

                <GradientStop Color="#FF5FA3F6" Offset="0" />

                <GradientStop Color="#FF0C55B9" Offset="1" />

            </RadialGradientBrush>

        </Path.Fill>

    </Path>

</Border>

当你运行的时候你会发现没什么变化。我们还要定义被选中标签的VisualState

当添加如下代码的时候 添加一个VisualState组。也就是 SelectionStates ,然后给选中/为选中的状态添加行为/故事板。.这里通过修改透明度来实现一些效果

<VisualStateGroup Name="SelectionStates">

    <VisualState Name="Selected">

        <Storyboard>

            <DoubleAnimation

                Storyboard.TargetName="buttonShape" Storyboard.TargetProperty="Opacity"

                To="1" Duration="0:0:.3"/>

            <DoubleAnimation

                Storyboard.TargetName="hoverShape" Storyboard.TargetProperty="Opacity"

                To="0" Duration="0:0:.1"/>

            <ColorAnimation

                Storyboard.TargetName="buttonText"

                Storyboard.TargetProperty=

                            "(TextBlock.Foreground).(SolidColorBrush.Color)"

                To="White" Duration="0:0:.1" />

        </Storyboard>

    </VisualState>

    <VisualState Name="Unselected">

        <Storyboard>

            <DoubleAnimation

                Storyboard.TargetName="buttonShape"

                Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.1"/>

            <DoubleAnimation

                Storyboard.TargetName="hoverShape"

                Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.1"/>

        </Storyboard>

    </VisualState>

</VisualStateGroup>

现在再运行会发现效果更好了

还有个小问题,就是那个陷进入的小三角形的背景颜色依然还在。通过在下面添加一个白色的形状。,并且对故事板的选中和为选中状态改变一下透明度就可以了。

<VisualStateGroup Name="SelectionStates">

    <VisualState Name="Selected">

        <Storyboard>

            <DoubleAnimation

                Storyboard.TargetName="buttonBackgroundShape"

                Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>

        </Storyboard>

    </VisualState>

    <VisualState Name="Unselected">

        <Storyboard>

            <DoubleAnimation

                Storyboard.TargetName="buttonBackgroundShape"

                Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>

        </Storyboard>

    </VisualState>

</VisualStateGroup>

最终效果如下:


展开阅读全文
WPF
打赏
3
8 收藏
分享
加载中
InvalidOperationException: 无法在“System.Windows.Controls.Grid”的名称领域内找到“hoverShape”名称。
2017/01/22 10:53
回复
举报
这个。。有些地方没有讲清楚代码插在那里。新手看不懂唉
2016/04/12 13:03
回复
举报
貌似这样可以:
<Border
Name="buttonBackgroundShape"
Opacity="0"
BorderBrush="#FF0343A6"
BorderThickness="0,2"
Height="40"
SnapsToDevicePixels="True">
<Path Data="M624,254 L584,262.5 623.75,272" HorizontalAlignment="Right" Stretch="Fill" Width="13.5" Margin="0,11.25,0,6">
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.5" RadiusX="0.8" RadiusY="0.8">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Path.Fill> </Path> </Border>
2015/05/28 09:44
回复
举报
貌似这样可以:
<Border
Name="buttonBackgroundShape"
Opacity="0"
BorderBrush="#FF0343A6"
BorderThickness="0,2"
Height="40"
SnapsToDevicePixels="True">
<Path Data="M624,254 L584,262.5 623.75,272" HorizontalAlignment="Right" Stretch="Fill" Width="13.5" Margin="0,11.25,0,6">
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.5" RadiusX="0.8" RadiusY="0.8">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Path.Fill> </Path> </Border>
2015/05/28 09:44
回复
举报
buttonBackgroundShape 这个东东在哪里定义的。可否告知
2015/05/27 16:05
回复
举报
kps
可否发一份demo啊
2015/04/20 13:38
回复
举报
对于一个新手来说,楼主讲的不是很清楚啊
2013/11/08 10:27
回复
举报
其实我想问源码有没有。
2013/10/21 14:28
回复
举报
更多评论
打赏
8 评论
8 收藏
3
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部