CODEWITHSUNDEEP
c#wpfxaml
amit kohan
amit kohan

Reputation: 1618

Displaying a user control on toolbar in WPF

I have created few simple shapes e.g. rectangle, circle shapes and able to place them on a toolbar so can be dragged/dropped onto Canvas. However, I'm having problem with showing of a WPF object which consists of 4 rectangles and lines. To make it easier I used blend 4 to create User Control and now have following XAML tags as User Control.

Question: How can I display this shape (combination of rectangle and lines) on existing toolbar?

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

Upvotes: 0

Views: 1769

Answers (1)

Trevor Elliott
Trevor Elliott

Reputation: 11252

Here's a simple example of how you can add your UserControl to a Toolbar. Basically you need to add an xmlns declaration to the namespace in which you declared your control and then you can add it as a nested element in the ToolBar to make it a child item.

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

To have something that makes sense you will most likely want to either add a border or add a mouse-over trigger to give some visual feedback.

Also keep in mind you have to code the drag-and-drop functionality yourself in the code-behind.

EDIT:

Here's how you would make a MouseOver border in your UserControl2 XAML file:

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

Upvotes: 2

Related Questions