We are going to be taking a look at how to use two WPF controls today,
the
Popup
control and the
Thumb.
Both are located in the
system.windows.controls.primitives namespace,
because they are used in a number of regular WPF controls. What are we
going to do with these two controls? Well, as the title of the tutorial
says, we are going to make a resizeable popup.
You can probably guess what the
popup control does - it makes a popup
window. In the standard WPF controls, the popup control is used mainly
for menus and tooltips, but it can hold pretty much any content you want
to throw at it. The thumb control does not have an as obvious a name
as popup, but it serves an important purpose. It is used to do mouse
movement tracking, and the two places where it shows up most often are
the
Scrollbar
and the
Slider.
The thumb is the component that the user grabs and drags around.
So today we are going to create a popup that uses thumbs to make
resizing that popup extremely easy. Below is a screenshot of the silly
little application we will be building:
Sadly, popups do not have any user resizing capability built right in.
But as you're about to see, using thumbs makes it pretty easy to do.
First, the XAML:
<Window x:Class="ResizePopup.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Resizeable Popup" Height="100" Width="100">
<Window.Resources>
<Style TargetType="{x:Type Thumb}"
x:Key="PopupThumb">
<Setter Property="HorizontalAlignment"
Value="Stretch"/>
<Setter Property="VerticalAlignment"
Value="Stretch"/>
<EventSetter Event="DragStarted"
Handler="ThumbDragStarted" />
<EventSetter Event="DragDelta"
Handler="ThumbDragDelta" />
<EventSetter Event="DragCompleted"
Handler="ThumbDragCompleted" />
</Style>
<Popup StaysOpen="False" Width="100" Height="100"
x:Key="myPopup" Placement="Mouse">
<Border BorderBrush="Black" BorderThickness="1">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
x:Name="PopupTxt"
TextAlignment="Center"
VerticalAlignment="Center">
I'm A Popup!!
</TextBlock>
<Thumb Grid.Row="0" Grid.Column="1"
Cursor="SizeWE"
Style="{StaticResource PopupThumb}"/>
<Thumb Grid.Row="1" Grid.Column="0"
Cursor="SizeNS"
Style="{StaticResource PopupThumb}"/>
<Thumb Grid.Row="1" Grid.Column="1"
Cursor="SizeNWSE"
Style="{StaticResource PopupThumb}"/>
</Grid>
</Border>
</Popup>
</Window.Resources>
<Button Click="ShowPopup" Content="Popup!!" />
</Window>
OK, let's work our way down from the top. First, we have a resources
section, and the first thing in there is a style. We have a style
because we are actually going to be using multiple thumbs for resizing
(one for the bottom edge, one for the corner, and one for the right
edge), and this way we don't have to repeat these property and event
setters. Setting the alignment properties to stretch just guarantees
that the thumbs will fill their respective containers - not very
interesting. The event setters, however are interesting. We will be
getting to the code behind in a minute, but at this point you are
probably realizing what using a
Thumb gives us. We get these three
events
(DragStarted,
DragDelta
and
DragCompleted)
that give us all sorts of information when a user tries to drag a
Thumb.
Next comes the popup. I've put it here in resources because I like to
keep my popups out of the way, but you can actually put it anywhere in
your XAML that a regular control would go. The only difference when
doing that is that the Popup does not get added as a visible element
(they only appear when told to, and even then, as a separate window),
even though it is part of the logical tree.
The popup here doesn't have much to it: a border, a grid, and a
textblock taking up most of that grid. But we do have our three thumbs -
one on the right, one on the bottom, and one in the corner, each with an
appropriate cursor. And as you might expect, the style on each of the
thumbs is set to the style we defined above.
And that brings us to the end of the resources, which is almost the end
of the XAML file. The only thing left is the button which triggers the
popup to show, by calling the method
ShowPopup when clicked. And since
the code behind is next, we will be getting to the content of that
method real soon.using System;
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
namespace ResizePopup
{
public partial class Window1 : Window
{
private const int MaxSize = 500;
private const int MinSize = 50;
private Popup _MyPopup;
public Window1()
{
InitializeComponent();
_MyPopup = Resources["myPopup"] as Popup;
}
private void ShowPopup(object sender, RoutedEventArgs e)
{
_MyPopup.IsOpen = true;
}
private void ThumbDragDelta(object sender,
DragDeltaEventArgs e)
{
Thumb t = sender as Thumb;
if (t.Cursor == Cursors.SizeWE
|| t.Cursor == Cursors.SizeNWSE)
{
_MyPopup.Width = Math.Min(MaxSize,
Math.Max(_MyPopup.Width + e.HorizontalChange,
MinSize));
}
if (t.Cursor == Cursors.SizeNS
|| t.Cursor == Cursors.SizeNWSE)
{
_MyPopup.Height = Math.Min(MaxSize,
Math.Max(_MyPopup.Height + e.VerticalChange,
MinSize));
}
}
private void ThumbDragStarted(object sender,
DragStartedEventArgs e)
{
//This is called when the user
//starts dragging the thumb
}
private void ThumbDragCompleted(object sender,
DragCompletedEventArgs e)
{
//This is called when the user
//finishes dragging the thumb
}
}
}
First off, we have ourselves two constants - a minimum size and a
maximum size, just because it is always good to put limits on something
like this. Next, in the constructor, we pull the popup out of the
resources for the window and store it in the private variable
_MyPopup. This is mostly because we are going to be poking at it a
lot, and so I didn't want to have to keep pulling it out of the resource
dictionary.
Next, we have the
ShowPopup method that the button on the window
calls. It doesn't take much to show a popup, does it? You can control
exactly where the popup appears through a couple different properties on
the popup - namely
PlacementTarget,
PlacementRectangle,
Placement.
And if those don't give you enough control, there is always the
CustomPopupPlacementCallback
property, which allows you to give the popup a method of yours to call
when it wants to figure out its position.
By default, a popup will disappear when it loses focus, but you can
override that behavior using the
StaysOpen
property. If that is set to true, the popup will stay open until
IsOpen
gets set to false.
OK, enough about opening the popup. Now we get to the meat - resizing
the popup. In this particular case, we don't actually care about the
DragStarted and DragCompeted parts - we don't need them - but I left
them in there for you to see. All the actual logic is in DragDelta -
although there isn't that much.
In DragDelta, we first deal with width. If the thumb being dragged is
the right edge or the corner (that is the cursor check), we add the
HorizontalChange (which could be positive or negative) on the
DragDeltaEventArgs
to the width of the popup. We then constrain the new width within the
min and max constants using the math min and max functions, and set the
new value as the new width of the popup. We do the exact same thing for
height, except in that case we only do it if the thumb being dragged is
the bottom edge or the corner.
And that is it! So there you go, you have now learned how to use Popups
and Thumbs in one fell swoop. If you would like to download the Visual
Studio project for this example, you can grab it
here, and as
always, questions or comments are welcome.
Source Files:
Comments
Post a Comment