#716 – Using a Border As a Visual Indication That a Control Can Be Dragged
December 20, 2012 9 Comments
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>