WPF - Windows Azure 风格的 TabControl(选项卡控件)

Question

我正在寻找一种类似于Azure上图片中的控件，但适用于WPF的控件。

我想知道这是否是预制控件（来自微软或其他人）可用于WPF，或者是否有可以开始该项目的代码。我已经尝试了TabControl，但它没有滑动效果。

- VisualBean

---

据我所知，恐怕没有预制控件，您可以从HTML源代码中调用它作为“导航扩展器”，我认为自己实现并不难 :) - chao wang

我也是这么想的，使用StackPanels和ToggleButtons实现起来非常容易 :) - 也许我会创建一个控件供大家使用 :) - 时间会证明一切。 - VisualBean

嗨，在没有任何可用的解决方案的情况下，我使用WPF中的ListBoxes实现了上述Azure管理门户导航样式。 您可以在此处查看样式的最终结果 - >http://arbitrarybytes.blogspot.in/2014/05/azure-portal-navigation-style-in-wpf.html由于问题已关闭，因此我无法直接将样式粘贴在此处。 但xaml文件在此处->http://goo.gl/LB5IT8希望这可以帮助，并随时在博客文章中发表评论以获取任何改进和建议。 - Vaibhav

Answer 1

显然，你的图像中的控件只是一个具有自定义ControlTemplate的Menu控件。我们可以为Menu控件提供新的ItemsPanelTemplate以使其垂直工作，而不是通常的水平外观。不幸的是，我没有时间完成这个任务，但我已经为你开始了：

<Menu FontFamily="Segoe UI" Background="#FF3C454F" TextElement.Foreground="White">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <Menu.Resources>
        <Style TargetType="MenuItem">
            <Setter Property="Padding" Value="40, 20" />
        </Style>
    </Menu.Resources>
    <MenuItem Header="COMPUTER">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
    <MenuItem Header="DATA SERVICES">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
    <MenuItem Header="NETWORK SERVICES">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
</Menu>

虽然还有很多工作要做......最重要的部分将是定义一个新的ControlTemplate，包括Menu和MenuItem。您需要将当前Popup控件中的下一级MenuItem移动到Grid中的下一列。

开始这项工作的最佳方法是使用默认的ControlTemplate，然后在正常工作后进行微调。您可以在MSDN上的菜单样式和模板页面中找到默认的ControlTemplate。另一个资源可以在MenuItem ControlTemplate Example页面中找到，尽管它可能具有相同的代码，但我不太确定。

我想最后要说的一点是，如果这个项目对您来说太难了，您可以使用多个ListBox控件使UI看起来像您的图像，其中项目代表菜单项。根据用户单击的前一个菜单项，更改项目将非常容易。

- Sheridan