如何对齐工具栏控件正下方的 WPF 工具包颜色选择器位置 [英] How to align WPF Toolkit Color Picker position just below Toolbar control

问题描述

问题:我们如何对齐著名的

XAML:

<DockPanel Margin="0,0,660,0"><ToolBarTray DockPanel.Dock="Top"><工具栏高度="26"><Button Command="New" Content="New"/><Button Command="Open" Content="Open"/><Button Command="Save" Content="Color"/></工具栏></ToolBarTray><xctk:ColorPicker Name="ColorPicker1" AdvancedButtonHeader="TestColor" Height="15" DisplayColorAndName="True" Margin="0,5,0,358"/></DockPanel></窗口>

解决方案

或者，我们可以在工具栏中包含颜色选择器吗?

当然:

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

你也可以使用一个ToggleButton来打开一个Popup:

<工具栏><Button Command="New" Content="New"/><Button Command="Open" Content="Open"/><ToggleButton x:Name="tb" Content="Save"/><Popup IsOpen="{Binding IsChecked, ElementName=tb}"PlacementTarget="{绑定元素名称=tb}"放置=底部"StaysOpen="假"><xctk:ColorPicker Name="ColorPicker1"AdvancedButtonHeader="TestColor"DisplayColorAndName="True"/></弹出窗口></工具栏></ToolBarTray>

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>

解决方案

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>

这篇关于如何对齐工具栏控件正下方的 WPF 工具包颜色选择器位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！