适用于 Win7 和 Win8 主题的 WPF 拆分按钮

Question

有人知道在 Win7 主题和 Win8 主题中看起来像常规按钮的 WPF 拆分按钮吗？我正在使用一个在 Win7 上看起来不错，但在 Win8 上却像大拇指一样突出的一个：

我试过WPF Splitbutton project on codeplex、Banana Splitbutton 和splitbutton in the Extended WPF Toolkit。

有没有什么东西可以在 Win7 中提供 Win7 主题按钮，在 Win8 中提供 Win8 主题按钮？

我需要控件具有可绑定的 Command 属性并在按下向下箭头时显示上下文菜单。

Answer 1

我采用了 Sten 的方法：将一个按钮嵌套在另一个按钮中。我使用了一个用户控件来使其可重用，将所有元素放在控件模板中，这样它就可以在按钮中放置任意内容。

<UserControl 
  x:Class="VidCoder.Controls.SplitButton"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  mc:Ignorable="d"
  Loaded="SplitButton_OnLoaded">
  <UserControl.Template>
    <ControlTemplate TargetType="{x:Type UserControl}">
      <Button 
        HorizontalAlignment="Left" VerticalAlignment="Top" Name="mainButton" ContextMenuService.Placement="Bottom" 
        Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
        <Button.Content>
          <StackPanel Orientation="Horizontal" UseLayoutRounding="True">
            <ContentPresenter Margin="{TemplateBinding Padding}" />
            <Rectangle Width="1" Fill="#111111" Margin="0,2" />
            <Button Click="OnArrowClick">
              <Button.Template>
                <ControlTemplate TargetType="Button">
                  <Grid Background="Transparent" Name="buttonGrid">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                  </Grid>
                </ControlTemplate>
              </Button.Template>
              <Button.Content>
                <Path Data="M 0,0 L 8,0 L 4,4 Z" Fill="{TemplateBinding Foreground}" Margin="4 0 3 0" VerticalAlignment="Center"/>
              </Button.Content>
            </Button>
          </StackPanel>
        </Button.Content>
        <Button.ContextMenu>
          <ContextMenu Name="buttonMenu" ItemsSource="{Binding Path=MenuItemsSource, RelativeSource={RelativeSource TemplatedParent}}" />
        </Button.ContextMenu>
      </Button>
    </ControlTemplate>
  </UserControl.Template>
</UserControl>

代码隐藏公开了菜单项集合和 Command 属性：

public partial class SplitButton : UserControl
{
    private Button button;

    private ObservableCollection<object> menuItemsSource = new ObservableCollection<object>();

    public Collection<object> MenuItemsSource { get { return this.menuItemsSource; } }

    public SplitButton()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty CommandProperty = DependencyProperty.Register(
        "Command",
        typeof (ICommand),
        typeof (SplitButton),
        new UIPropertyMetadata(null, OnCommandChanged));

    public ICommand Command
    {
        get
        {
            return (ICommand) GetValue(CommandProperty);
        }

        set
        {
            SetValue(CommandProperty, value);
        }
    }

    private static void OnCommandChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs eventArgs)
    {
        if (eventArgs.NewValue != eventArgs.OldValue)
        {
            var splitButton = dependencyObject as SplitButton;

            if (splitButton.button != null)
            {
                splitButton.button.Command = eventArgs.NewValue as ICommand;
            }
        }
    }

    private void OnArrowClick(object sender, RoutedEventArgs e)
    {
        var buttonMenu = ContextMenuService.GetContextMenu(this.button);

        if (this.menuItemsSource.Count > 0 && buttonMenu != null)
        {
            buttonMenu.IsOpen = !buttonMenu.IsOpen;
            buttonMenu.PlacementTarget = this.button;
            buttonMenu.Placement = PlacementMode.Bottom;
        }
    }

    private void SplitButton_OnLoaded(object sender, RoutedEventArgs e)
    {
        this.button = this.Template.FindName("mainButton", this) as Button;
        if (this.Command != null)
        {
            this.button.Command = this.Command;
        }
    }
}

使用中：

<controls:SplitButton HorizontalAlignment="Left" VerticalAlignment="Top" Command="{Binding TestCommand}">
    <controls:SplitButton.MenuItemsSource>
        <MenuItem Header="ham" Command="{Binding TestCommand2}" />
        <MenuItem Header="sandwiches" />
        <MenuItem Header="yum" />
    </controls:SplitButton.MenuItemsSource>
    <TextBlock Padding="4" Text="Testing" />
</controls:SplitButton>

Answer 2

您总是可以用两个标准按钮制作自己的按钮，这并不难 - 只需按钮内的一个按钮，自定义内部按钮的样式以缺少边框，具有下拉三角形并具有“透明”背景（与导致点击的 {x:null} 背景不同）

大概是这样的：

<Button Style="outerStyle">
  <Button.Content>
     <StackPanel Orientation="Horizontal">
        <Label>Click Me</Label>
        <Button Style="{innerStyleWithTransparentBackground}"> ▼ </Button>
     </StackPanel>
  </Button.Content>
</Button>

如果您使用大量拆分按钮（无论如何都要这样做），您可以将此构造放在带有几个路由事件的用户控件中，否则您可以将其嵌套在其他代码中。

这不是最优雅的解决方案，但它可能是您能找到的最简单的解决方案之一。

Answer 3

“像大拇指一样突出”是 wpf 控件如何解决其样式的结果。默认情况下（意味着如果您没有通过 Style 属性提供 Style），splitbutton 将在资源树中向上查找，直到找到 TargetType 为 splitButton 且隐式样式 x:Key 为 "{x:Type SplitButton} ”。如果它无法为您的拆分按钮找到样式，它将在主题文件中查找您当前使用的任何 Windows 主题。在 win7 中，这通常是 Aero.NormalColor.xaml。我不确定win8，但我想Metro.NormalColor.xaml（如果我错了，请纠正我）。如果在主题字典中找不到样式，它将在 Generic.xaml 中查找。无论如何，您要做的是在资源树中有意义的级别为您的控件定义一个隐式样式（如果它是独立的，则可能在 Window 或 Page 如果 xaml 托管在浏览器中/>。这将是始终使用的样式（未明确定义样式时）。

示例： http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics