CODEWITHSUNDEEP
c#wpfwpftoolkit
nam
nam

Reputation: 23819

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>

Upvotes: 0

Views: 1268

Answers (1)

mm8
mm8

Reputation: 169280

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>

Upvotes: 1

Related Questions