#716 – Using a Border As a Visual Indication That a Control Can Be Dragged

You can use the Thumb control to allow dragging a control around on a parent Canvas.  To make it a little more obvious to the user that the control can be dragged, you can set up a Border around the control that only shows up when the user moves the mouse over the control.

    <Window.Resources>
        <Style x:Key="BorderVisibleOnMouse" TargetType="Border">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="Border.IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="LightBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Canvas>
        <Thumb Canvas.Left="100" Canvas.Top="60" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Border Style="{StaticResource ResourceKey=BorderVisibleOnMouse}">
                        <Label Content="Elvis Drafted!"/>
                    </Border>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Canvas.Left="30" Canvas.Top="180" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Border Style="{StaticResource ResourceKey=BorderVisibleOnMouse}">
                        <Label Content="Richard the Lion-Hearted Captured!"/>
                    </Border>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>

716-001
716-002
716-003

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

9 Responses to #716 – Using a Border As a Visual Indication That a Control Can Be Dragged

  1. Pingback: Dew Drop – December 20, 2012 (#1,467) | Alvin Ashcraft's Morning Dew

  2. HHH says:

    Thanks alot this really helped!!!! Do you know how I could add to this to rotate the image about 20degrees left or right on button clicks?or on corners of the image? Thank you

    • Sean says:

      You could add an event handler for the Click event where you change the Angle property of a RotateTransform. See https://wpf.2000things.com/2013/03/05/769-rotation-transforms/ to get you started.

      • HHH says:

        Thank you Sean – I need to change this so that on a button click it will rotate a different image, not the actual button that is being clicked – is this easily done? I will begin to mess around with it now.

      • Sean says:

        Yes, you can just have the Click handler tweak the Angle property of the rotate transform associated with the image.

      • HHH says:

        Thank you again Sean, I am new to this RotateTransform, do you have any examples of using a button click to change other control angle properties? I am struggling to get my head around this.

      • Sean says:

        (Without writing the code for you), the process is pretty simple:
        – Create a RotateTransform object in your code
        – Bind it to the RenderTransform property of your Image
        – Add a Click handler
        – In the Click handler, increment (or decrement) the Angle property of the RotateTransform object

  3. HHH says:

    Thank you for the help

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: