创建一个选项卡式WPF菜单，“ESET Antivirus” - 样式

Question

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

我想，我拿了一个TabControl并在整个事情上做了一个完整的Restyling。我创建了一个基本的标签布局：

<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 UI元素看起来完全按照您想要的方式出现问题时，您应该从microsoft中找到默认的<style> XAML并尝试直接在项目中修改它，直到获得所需的结果

如果不清楚，你需要做的就是按照下面的链接，从页面复制样式并将它们放到窗口的Resources部分（或App.xaml，它真的取决于你） 。然后摆弄它们直到你看起来像你想要的那样。

您需要使用的两种风格是TabControl和TabItem

Answer 2

我认为采用MVVM方法。

首先，塑造数据模型以及业务层（命令，函数等）。 然后，您可以使用ListBox（对于左侧选择器）“磨损”您的模型（通过利用ViewModel），并为主要部分“磨损”简单的ContentControl。 ListBox的选定项应该被输入到正文的内容中，并且DataTemplateSelector（例如）将选择正确的可视片段。

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

干杯

Answer 3

一个老技巧是拥有两组不同的图像 - 一个用于点击，一个用于被动（可能一个用于鼠标悬停），但点击的图像将包含三角形。 这使用静态图像作为按钮，这非常容易使用，但很难动态修改。