在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

下面是如何在你的用戶控件添加到工具欄一個簡單的例子。基本上，您需要將一個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文件：

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