创建选项卡式WPF菜单，"ESET Antivirus“风格

Question

我正在寻找一种方法来创建一个小工具的应用程序布局，看起来像ESET Antivirus UI：

​

​

我想，我应该拿一个TabControl，对整个东西做一个彻底的重新设计。我创建了一个基本的选项卡布局：

<Grid Background="White" Grid.Row="1" >
        <TabControl TabStripPlacement="Left">
            <TabItem Header="Dashboard">
                <Grid>

                </Grid>
            </TabItem>
            <TabItem Header="Projects">
                <Grid>

                </Grid>
            </TabItem>
            <TabItem Header="Settings">
                <Grid>

                </Grid>                
            </TabItem>
            <TabItem Header="Help &amp; Info">
                <Grid>

                </Grid>
            </TabItem>
        </TabControl>
    </Grid>

然而，我一点也不知道如何得到我想要的标签。我尝试了很多Blend来让Tabs看起来像上面的图片，但是我不明白。三角形将是一个很好的选择，但高亮显示应该进行调整。

有什么建议吗？

Answer 1

每当您在尝试使WPF元素看起来完全符合您的期望时遇到问题，您应该从微软找到默认的<style> XAML，并尝试直接在您的项目中修改它，直到您获得所需的结果。

如果这一点不清楚，您需要做的就是按照下面的链接，从页面复制样式，并将它们放入窗口的参考资料部分(或者App.xaml，这完全取决于您)。然后摆弄它们，直到你把它弄成你想要的样子。

您需要使用的两种样式是TabControl和TabItem

Answer 2

相反，我会考虑使用MVVM方法。

首先，塑造数据的模型，以及业务层(命令、函数等)。然后，您可以使用一个ListBox来“穿戴”您的模型(通过利用ViewModel)，用于左侧选择器，并为主要部分提供一个简单的ContentControl。ListBox的选定项应该输入到正文的内容中，DataTemplateSelector (例如)将选择适当的可视片段。

这只是一个建议。就我个人而言，我发现TabControl有点棘手，而且我很少使用它。

干杯

Answer 3

一个老把戏是有两组不同的图像-一组用于点击，另一组用于被动(也许一组用于鼠标悬停)，但点击的图像中会有三角形。它对按钮使用静态图像，这非常容易使用，但很难动态修改。