How to align WPF Toolkit Color Picker position just below Toolbar control

问题

Question: How can we align famous WPF Toolkit Color Picker position just below to WPF's Toolbar control?

Or, could we include Color picker in the toolbar itself? The idea is to let the Color Picker appear when user clicks on the "Color" button shown in the toolbar below, but that I can accomplish using C# code.

So far, I've gotten this close by using the XAML shown below:

XAML:

<Window x:Class="WpfApp_ExceedToolkit_test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        xmlns:local="clr-namespace:WpfApp_ExceedToolkit_test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel Margin="0,0,660,0">
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar Height="26">
                <Button Command="New" Content="New" />
                <Button Command="Open" Content="Open" />
                <Button Command="Save" Content="Color" />
            </ToolBar>
        </ToolBarTray>
        <xctk:ColorPicker Name="ColorPicker1" AdvancedButtonHeader="TestColor" Height="15" DisplayColorAndName="True" Margin="0,5,0,358" />
    </DockPanel>
</Window>

回答1:

Or, could we include Color picker in the toolbar itself?

Sure:

<ToolBarTray>
    <ToolBar>
        <Button Command="New" Content="New" />
        <Button Command="Open" Content="Open" />
        <xctk:ColorPicker Name="ColorPicker1" 
                          AdvancedButtonHeader="TestColor"
                          DisplayColorAndName="True"/>
    </ToolBar>
</ToolBarTray>

You may also use a ToggleButton that opens a Popup:

<ToolBarTray>
    <ToolBar>
        <Button Command="New" Content="New" />
        <Button Command="Open" Content="Open" />
        <ToggleButton x:Name="tb" Content="Save" />
        <Popup IsOpen="{Binding IsChecked, ElementName=tb}"
                       PlacementTarget="{Binding ElementName=tb}"
                       Placement="Bottom"
                       StaysOpen="False">
            <xctk:ColorPicker Name="ColorPicker1" 
                              AdvancedButtonHeader="TestColor"
                              DisplayColorAndName="True" />
        </Popup>
    </ToolBar>
</ToolBarTray>

来源：https://stackoverflow.com/questions/55737818/how-to-align-wpf-toolkit-color-picker-position-just-below-toolbar-control

标签

wpf

wpftoolkit