web-dev-qa-db-ja.com

ドロップダウンリストと矢印が付いたWPFボタン

誰かが、Visual Studioツールバーボタンの新しいアイテムのように、矢印とドロップダウンリストのあるボタンを使用するための最良の方法を提案できますか？ VSでわかるように、マウスホバーはデフォルトボタンと矢印ボタンの両方を強調表示し、リストから項目を選択した後、デフォルトボタンは選択内容に応じて変化します。

enter image description hereenter image description here

以下は、ドロップダウンメニューを表示しているコードの一部ですが、上記の完全な機能ではありません。

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1">
        <Button Name="CreateButton" Click="CreateButton_Click"  Background="Transparent" BorderBrush="{x:Null}">
            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add1.png" />
            <Button.ContextMenu>
                <ContextMenu HorizontalAlignment="Right">
                    <MenuItem Header=" doc" Click="CreateDocButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header=" xls" Click="CreateXlsButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header=" txt" Click="CreateTxtButton_Click">
                        <MenuItem.Icon>
                            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" />
                        </MenuItem.Icon>
                    </MenuItem>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>
    </Border>
    <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1">
        <Button HorizontalAlignment="Left" VerticalAlignment="Stretch"  Background="Transparent" BorderBrush="{x:Null}"
        ContextMenuService.IsEnabled="False" Click="AddButtonContextMenu_Click">
            <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/arrow_down.png" VerticalAlignment="Center" Width="9" />
        </Button>
    </Border>
</StackPanel>
wpfbutton
18
artos

解決策は、メニュー項目を使用して装飾することです。

XAMLコード：

<MenuItem Click="AddPresetButton_Click" x:Name="AddPresetButton">
    <MenuItem.Icon>
        <Image Source="/MyApp.Application;component/Resources/add.png" Height="20"/>
    </MenuItem.Icon>
    <MenuItem.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Add Preset"/>
            <Image Source="/MyApp.Application;component/Resources/arrow_down_simple.png"
                   Height="10" Margin="2,0,0,0"/>
        </StackPanel>
    </MenuItem.Header>
    <MenuItem.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Add 1"/>
            <MenuItem Header="Add 2"/>
            <MenuItem Header="Add 3"/>
        </ContextMenu>
    </MenuItem.ContextMenu>
</MenuItem>

C＃コード：メニューを押すと、コンテキストメニューが開きます。

private void AddPresetButton_Click(object sender, RoutedEventArgs e)
{
    var addButton = sender as FrameworkElement;
    if (addButton != null)
    {
        addButton.ContextMenu.IsOpen = true;
    }
}
7
Joe Sonderegger

WPF Tookit とそのSplitButtonコントロールを使用することをお勧めします。

6
Demarsch

解決すべき問題が3つあるようです。

  1. スタイリング/レイアウト
  2. ドロップダウンおよびボタンを強調表示しますOnMouseOver
  3. デフォルトのボタンをメニューの最後の選択に応じて変更する

スタイリング/レイアウト

次に例をいくつか示します。

他にも多くの方法があると確信しています（たとえば、プレーンなボタンと適切にスタイル設定されたComboBoxを使用します）

ドロップダウンとボタンOnMouseOverの強調表示

トリガーを試します。例えば：

デフォルトのボタンをメニューの最後の選択に応じて変更する

MVVMアプローチを試してください。ボタン要素はViewModelのプロパティにバインドされます。各メニュー項目は、ViewModelでアクション（ICommand）を呼び出します。このViewModelは、呼び出されたメニュー項目を認識し、ViewModelのボタンのプロパティを更新します。ボタンは、データバインディングを使用して自動的に更新されます。

5
JoelBellot