<UserControl.Resources> <!-- TODO: Add DataTemplate --> </UserControl.Resources>
You can override the default cursors that are used when your end users resize the xamDialogWindow control. This can be achieved by setting the CustomCursors object’s DiagonalResizeCursor, HorizontalResizeCursor and VerticalResizeCursor properties.
Assumptions
This topic assumes that you already have a xamDialogWindow control on your page. For more information, see the Adding xamDialogWindow to Your Page topic.
You will customize the resizing cursors by setting the CustomCursors object’s DiagonalResizeCursor, HorizontalResizeCursor, VerticalResizeCursor properties to custom templates.
Create a resource dictionary on your page.
In XAML:
<UserControl.Resources> <!-- TODO: Add DataTemplate --> </UserControl.Resources>
Create a DataTemplate. Set the x:Name property to HorizontalResizeCustomCursor.
In XAML:
<DataTemplate x:Key="HorizontalResizeCustomCursor"> <!-- TODO: Add Grid Panel --> </DataTemplate>
Add a Grid panel to the DataTemplate. Set the following properties:
Height - 20
Width - 20
In XAML:
<Grid Height="20" Width="20" <!-- TODO: Add Button --> </Grid>
Add an Image to the Grid panel. Set the following properties:
Stretch - Fill
Source - /Images/HorizontalResizeCursor
In XAML:
<Image Stretch="Fill"
Source="/Images/HorizontalResizeCursor.png">
</Image>
Create a DataTemplate. Set the x:Name property to VerticalResizeCustomCursor.
In XAML:
<DataTemplate x:Key="VerticalResizeCustomCursor"> <!-- TODO: Add Grid Panel --> </DataTemplate>
Add a Grid panel to the DataTemplate. Set the following properties:
Height - 20
Width - 20
In XAML:
<Grid Height="20" Width="20"> <!-- TODO: Add Image --> </Grid>
Add an Image to the Grid panel. Set the following properties:
Stretch - Fill
Source - /Images/VerticalResizeCursor
In XAML:
<Image Stretch="Fill"
Source="/Images/VerticalResizeCursor.png">
</Image>
Create a DataTemplate. Set the x:Name property to DiagonalResizeCustomCursor.
In XAML:
<DataTemplate x:Key="DiagonalResizeCustomCursor"> <!-- TODO: Add Grid Panel --> </DataTemplate>
Add a Grid panel to the DataTemplate. Set the following properties:
Height - 20
Width - 20
In XAML:
<Grid Height="20" Width="20"> <!-- TODO: Add Image --> </Grid>
Add an Image to the Grid panel. Set the following properties:
Stretch - Fill
Source - /Images/DiagonalResizeCursor
In XAML:
<Image Stretch="Fill"
Source="/Images/DiagonalResizeCursor.png">
</Image>
Set the following CustomCursors object’s properties:
DiagonalResizeCursor – {StaticResource DiagonalResizeCustomCursor}
HorizontalResizeCursor – {StaticResource HorizontalResizeCustomCursor}
VerticalResizeCursor – {StaticResource VerticalResizeCustomCursor}
In XAML:
<Grid x:Name="LayoutRoot" Background="White">
<ig:XamDialogWindow x:Name="DialogWindow" Width="200"
Height="200" IsModal="True" Content="This is a sample dialog">
<ig:XamDialogWindow.CustomCursors>
<ig:CustomCursors
DiagonalResizeCursor="{StaticResource DiagonalResizeCustomCursor}"
HorizontalResizeCursor="{StaticResource HorizontalResizeCustomCursor}"
VerticalResizeCursor="{StaticResource VerticalResizeCustomCursor}" />
</ig:XamDialogWindow.CustomCursors>
</ig:XamDialogWindow>
</Grid>
Save and run your application.
