Search code examples
c#wpfwpftoolkit

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:

enter image description here

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>
Solution

  • 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>