在 WPF 的工具栏上显示用户控件

Question

我创建了一些简单的形状，例如矩形，圆形，并能够将它们放在工具栏上，因此可以拖放到 Canvas 上。但是，我在显示由 4 个矩形和线条组成的 WPF 对象时遇到问题。为了更容易，我使用 blend 4 创建用户控件，现在有以下 XAML 标记作为用户控件。

问题：如何在现有工具栏上显示此形状（矩形和线条的组合）？

<UserControl
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"
mc:Ignorable="d"
x:Class="test1.UserControl2"
x:Name="connector1"
d:DesignWidth="100" d:DesignHeight="90">

<Grid x:Name="LayoutRoot">
    <Rectangle Fill="#FF1B1BCE" Margin="41.334,9.833,42.666,14.167" Stroke="Black"/>
    <Rectangle Fill="#FF1B1BCE" HorizontalAlignment="Left" Margin="33.334,29,0,30.5" Stroke="Black" Width="8"/>
    <Rectangle Fill="#FF1B1BCE" HorizontalAlignment="Right" Height="8.833" Margin="0,9.833,36.499,0" Stroke="Black" VerticalAlignment="Top" Width="6.167"/>
    <Rectangle Fill="#FF1B1BCE" HorizontalAlignment="Right" Height="8.833" Margin="0,0,36.499,14.167" Stroke="Black" VerticalAlignment="Bottom" Width="6.167"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,29,24.749,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,34,24.749,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,39,24.749,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,44,24.749,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,0,24.749,40" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,0,24.749,35" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,0,24.749,30.5" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,0,24.749,25.5" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom" Width="17.917"/>
    <Path Data="M62.083333,37 L70.416667,37" Fill="#FFEFEFF8" HorizontalAlignment="Right" Height="1" Margin="0,24,24.749,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.917"/>
</Grid>

Answer 1

这里有一个简单的示例，说明如何将 UserControl 添加到工具栏。基本上，您需要在声明控件的命名空间中添加 xmlns 声明，然后可以将其作为嵌套元素添加到 ToolBar 中以使其成为子项。

<Window x:Class="test1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:test1"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <local:UserControl2 />
        </ToolBar>
        <Grid>
            ...
        </Grid>
    </DockPanel>
</Window>

为了使某些东西有意义，您很可能希望添加边框或添加鼠标悬停触发器以提供一些视觉反馈。

另外请记住，您必须自己在代码隐藏中编写拖放功能。

编辑：

以下是在 UserControl2 XAML 文件中制作 MouseOver 边框的方法：

<UserControl ...>
    <UserControl.Resources>
        <Style x:Key="mouseOverBorder" TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Background" Value="Transparent" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="BorderBrush" Value="Transparent" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Border Style="{StaticResource mouseOverBorder}">
        <Grid>
            ...
        </Grid>
    </Border>
</UserControl>