Drag N drop images in a viewbox

Question

I have a usercontrol with 6 viewbox, each can have an image. I have not set the width or height of the usercontrol(not even the viewboxes). At first the viewboxes are empty.I can add the images dynamically.

<Grid x:Name="DashBoardGrid" DockPanel.Dock="Right">
        <Grid.RowDefinitions>
            <RowDefinition Height="20"></RowDefinition>
            <RowDefinition Height="200*"></RowDefinition>
            <RowDefinition Height="10"></RowDefinition>
            <RowDefinition Height="200*"></RowDefinition>
            <RowDefinition Height="20"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"></ColumnDefinition>
            <ColumnDefinition Width="200*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="200*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="200*"></ColumnDefinition>
            <ColumnDefinition Width="20"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Grid.Row="1" Grid.Column="1">
            <DockPanel x:Name="dockPanel1" Margin="10,30,10,10" >
                <TextBlock x:Name="TitleTxtblk1" DockPanel.Dock="Top" FontSize="10pt" TextWrapping="Wrap">screen 1</TextBlock>
                <Viewbox x:Name="Viewbox1" MouseDown="Viewbox_MouseDown" MouseEnter="ScaleUp" MouseLeave="ScaleDown" 
                         PreviewMouseLeftButtonDown="DockPanel_PreviewMouseLeftButtonDown" PreviewMouseMove="dockPanel_MouseMove" 
                         Drop="dockPanel_Drop"  DragEnter="dockPanel_DragEnter" AllowDrop="True">

                </Viewbox>
            </DockPanel>
        </Border>
        <Border Grid.Row="1" Grid.Column="3" >
            <DockPanel x:Name="dockPanel2" Margin="10,30,10,10" >
                <TextBlock x:Name="TitleTxtblk2" DockPanel.Dock="Top" FontSize="10pt" TextWrapping="Wrap">screen 2</TextBlock>
                <Viewbox x:Name="Viewbox2" MouseDown="Viewbox_MouseDown" MouseEnter="ScaleUp" MouseLeave="ScaleDown" 
                         PreviewMouseLeftButtonDown="DockPanel_PreviewMouseLeftButtonDown" PreviewMouseMove="dockPanel_MouseMove" 
                         Drop="dockPanel_Drop"  DragEnter="dockPanel_DragEnter" AllowDrop="True">

                </Viewbox>
            </DockPanel>
        </Border>

I want to drag and drop the images from one viewbox to any other empty viewbox. But when the viewbox is empty, it is not visible at all. because it does not have a height or width. So i am not able to drop the image on it.

So what will i have to to such that when any one view box has an image all the view box have the same height and width? any other solution is welcome.

Answer 1

You could handle the drag/drop events in a parent control like the Border. And then you probably need a reference to your viewbox in your drag/drop methode. Try this:

<Border Tag="{Binding ElementName=Viewbox2,Path=.} … >

and in your drag/drop methode

ViewBox v = (sender as Border).Tag as ViewBox;