バージョン

カスタム カーソル

始める前に

エンド ユーザーが xamDialogWindow コントロールをリサイズする時に使用される既定のカーソルをオーバーライドできます。これは CustomCursors オブジェクトの DiagonalResizeCursorHorizontalResizeCursor および VerticalResizeCursor プロパティを設定することによって実行できます。

前提

このトピックは、ページ上に xamDialogWindow コントロールがすでにあることを前提とします。 詳細は、 xamDialogWindow をページに追加のトピックを参照してください。

達成すること

CustomCursors オブジェクトの DiagonalResizeCursor、HorizontalResizeCursor、VerticalResizeCursor プロパティをカスタム テンプレートに設定することによって、リサイズ カーソルをカスタマイズできます。

次の手順を実行します

  1. ページでリソース ディクショナリを作成します。

XAML の場合:

<UserControl.Resources>
   <!-- TODO: DataTemplateを追加します -->
</UserControl.Resources>
  1. DataTemplate を作成します。x:Name プロパティを HorizontalResizeCustomCursor に設定します。

XAML の場合:

<DataTemplate x:Key="HorizontalResizeCustomCursor">
   <!-- TODO: グリッド パネルを追加します -->
</DataTemplate>
  1. Grid パネルを DataTemplate に追加します。以下のプロパティを設定します。

    • Height - 20

    • Width - 20

XAML の場合:

<Grid Height="20" Width="20"
   <!-- TODO: ボタンを追加します -->
</Grid>
  1. Image を Grid パネルに追加します。以下のプロパティを設定します。

    • Stretch - Fill

    • Source - /Images/HorizontalResizeCursor

XAML の場合:

<Image Stretch="Fill"
       Source="/Images/HorizontalResizeCursor.png">
</Image>
  1. DataTemplate を作成します。x:Name プロパティを VerticalResizeCustomCursor に設定します。

XAML の場合:

<DataTemplate x:Key="VerticalResizeCustomCursor">
   <!-- TODO: グリッド パネルを追加します -->
</DataTemplate>
  1. Grid パネルを DataTemplate に追加します。以下のプロパティを設定します。

    • Height - 20

    • Width - 20

XAML の場合:

<Grid Height="20" Width="20">
   <!-- TODO: 画像を追加します -->
</Grid>
  1. Image を Grid パネルに追加します。以下のプロパティを設定します。

    • Stretch - Fill

    • Source - /Images/VerticalResizeCursor

XAML の場合:

<Image Stretch="Fill"
       Source="/Images/VerticalResizeCursor.png">
</Image>
  1. DataTemplate を作成します。x:Name プロパティを DiagonalResizeCustomCursor に設定します。

XAML の場合:

<DataTemplate x:Key="DiagonalResizeCustomCursor">
   <!-- TODO: グリッド パネルを追加します -->
</DataTemplate>
  1. Grid パネルを DataTemplate に追加します。以下のプロパティを設定します。

    • Height - 20

    • Width - 20

XAML の場合:

<Grid Height="20" Width="20">
   <!-- TODO: 画像を追加します -->
</Grid>
  1. Image を Grid パネルに追加します。以下のプロパティを設定します。

    • Stretch - Fill

    • Source - /Images/DiagonalResizeCursor

XAML の場合:

<Image Stretch="Fill"
       Source="/Images/DiagonalResizeCursor.png">
</Image>
  1. 以下の CustomCursors オブジェクトのプロパティを設定します:

    • DiagonalResizeCursor - {StaticResource DiagonalResizeCustomCursor}

    • HorizontalResizeCursor - {StaticResource HorizontalResizeCustomCursor}

    • VerticalResizeCursor - {StaticResource VerticalResizeCustomCursor}

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>
  1. アプリケーションを保存して実行します。

カスタム カーソル