Click here to Skip to main content
12,693,601 members (28,478 online)
Click here to Skip to main content

Stats

547.4K views
10.2K downloads
192 bookmarked
Posted

Dragging Elements in a Canvas

, 2 Sep 2006 CPOL
Discusses a class which provides automated dragging of elements in a WPF Canvas.
<Window x:Class="DragCanvasDemo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:jas="clr-namespace:WPF.JoshSmith.Controls" 
    Title="DragCanvas Demo" Height="700" Width="700"  
    WindowState="Maximized"
    FontSize="14"
    >
  <Window.Resources>
    <ResourceDictionary Source="resources.xaml" />
  </Window.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ToolBar>
      <ToggleButton Name="btnAllowDragging" IsChecked="True" Content="Allow Dragging" Margin="2,0" />
      <Separator />
      <ToggleButton Name="btnAllowDragOutOfView" Content="Allow Drag Out Of View" Margin="2,0" />
      <Separator />
      <ToggleButton Name="btnOnlyShowOffsetIndicators" Content="Only Show Offset Indicators" Margin="2,0" />
    </ToolBar>

    <jas:DragCanvas x:Name="dragCanvas"
      Grid.Row="1" 
      AllowDragging="{Binding ElementName=btnAllowDragging, Path=IsChecked}"
      AllowDragOutOfView="{Binding ElementName=btnAllowDragOutOfView, Path=IsChecked}" 
      >
      <jas:DragCanvas.ContextMenu>
        <ContextMenu Opened="OnContextMenuOpened"  MenuItem.Click="OnMenuItemClick">
          <MenuItem Header="Bring To Front" Name="menuItemBringToFront" />
          <MenuItem Header="Send To Back" Name="menuItemSendToBack" />
          <Separator />
          <MenuItem Header="Can Be Dragged" Name="menuItemCanBeDragged" />
        </ContextMenu>
      </jas:DragCanvas.ContextMenu>

      <Ellipse
        Canvas.Left="100" Canvas.Bottom="30"
        Width="65" Height="70">
        <Ellipse.Fill>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="LightGray" Offset="0" />
              <GradientStop Color="Black" Offset="0.75" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Ellipse.Fill>
      </Ellipse>

      <Polygon 
        Canvas.Right="200" Canvas.Top="250"
        Width="100" Height="100" Fill="Blue">
        <Polygon.Points>
          <Point X="0" Y="0" />
          <Point X="0" Y="100" />
          <Point X="100" Y="50" />
        </Polygon.Points>
      </Polygon>

      <StackPanel 
        jas:DragCanvas.CanBeDragged="False" 
        Background="Wheat" 
        Canvas.Left="40" 
        Canvas.Bottom="70" 
        Name="stackPanel"  
        Orientation="Horizontal">
        <TextBlock  Text="CanBeDragged = " />
        <TextBlock Text="{Binding ElementName=stackPanel, Path=(jas:DragCanvas.CanBeDragged)}" />
      </StackPanel>

      <Button Click="OnButtonClick" Canvas.Right="120" Canvas.Bottom="10">Josh was here</Button>

      <ComboBox Width="200" Canvas.Left="300" Canvas.Top="10" SelectedIndex="0">
        <ComboBoxItem>Don't worry, be happy.</ComboBoxItem>
        <ComboBoxItem>Hello, World!</ComboBoxItem>
      </ComboBox>

      <UniformGrid Background="White" Rows="2" Columns="2" Canvas.Left="20" Canvas.Top="200" Width="250" Height="250">
        <Border BorderBrush="Black" BorderThickness="1" Background="AliceBlue">
          <Image Source="/Images/girls.gif" Width="50" Height="50" />
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Background="SeaGreen">
          <Image Source="/Images/girls.gif" Width="50" Height="50" />
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Background="LightGoldenrodYellow">
          <Image Source="/Images/girls.gif" Width="50" Height="50" />
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Background="PaleGoldenrod" >
          <DockPanel>
            <TextBlock 
              DockPanel.Dock="Top"
              FontSize="15"
              HorizontalAlignment="Center"
              TextAlignment="Center"
            >
              <Hyperlink>Hello!</Hyperlink>
            </TextBlock>
            <Image Source="/Images/girls.gif" Width="50" Height="50" />
          </DockPanel>
        </Border>
      </UniformGrid>

      <ScrollBar 
        Canvas.Bottom="90" 
        Canvas.Right="60" 
        ContextMenu="{x:Null}"
        Width="17" Height="200" />

    </jas:DragCanvas>
  </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Josh Smith
Software Developer (Senior) Cynergy Systems
United States United States
Josh creates software, for iOS and Windows.

He works at Cynergy Systems as a Senior Experience Developer.

Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.

Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.

Check out his Advanced MVVM[^] book.

Visit his WPF blog[^] or stop by his iOS blog[^].

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170118.1 | Last Updated 2 Sep 2006
Article Copyright 2006 by Josh Smith
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid