Wpf-third-party-controls

提供:Dev Guides
移動先:案内検索

WPF-サードパーティコントロール

サードパーティのコントロールは、Microsoftによって作成されたものではなく、WPFユーザーコントロールまたはカスタムコントロールを使用して、個人または企業によって作成されたものです。 Telerik および DevExpress は、サードパーティのコントロールを作成するための最も人気のある会社です。

この章では、Telerikコントロールを使用します。 それでは、以下の手順に従って始めましょう。

  • Telerik WPFコントロールを含むリンクhttp://www.telerik.com/products/wpf/download.aspx[Telerik]に移動し、WPFのUIをダウンロードします。
  • ダウンロードが完了したら、マシンにファイルをインストールします。
  • インストール後、Visual Studioを開き、 WPF3rdPartyControls という名前の新しいWPFプロジェクトを作成します。
  • ツールボックスに、Telerik UIコントロールが表示されます。 さらに、ソリューションエクスプローラーでは、インストール後にすべての必要な dll も追加されます。

サードパーティコントロール

  • WPFの Telerik UIを展開して、ツールボックスに2015 Q2 を入力してみましょう。 多くの組み込みコントロールが表示されます。

Telerik UI

  • 次に、RadCalculatorをツールボックスボックスからデザインウィンドウにドラッグします。
  • RadCalculatorタグが追加されたXAMLウィンドウを見てください。
<Window  x:Class = "WPF3rdPartyControls.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:WPF3rdPartyControls"
   xmlns:telerik = "http://schemas.telerik.com/2008/xaml/presentation"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <telerik:RadCalculator HorizontalAlignment = "Left" Margin = "174,25,0,0"
         VerticalAlignment = "Top"/>
   </Grid>

</Window>
  • 上記のコードをコンパイルして実行しましょう。 1行のコードで、完全に機能する計算機がウィンドウに表示されます。

計算機

*それがサードパーティのコントロールの美しさです。 ただし、無料ではありません。アプリケーションでサードパーティのコントロールを使用する場合は、ライセンスを購入する必要があります。

別のTelerikコントロールを見てみましょう。* WPF3rdPartyControls *という名前の新しいWPFプロジェクトを作成します。 RadDateTimePickerコントロールをツールボックスからドラッグします。 XAMLコードは次のとおりです-

<Window x:Class = "RadDateTimePickerDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:telerik = "http://schemas.telerik.com/2008/xaml/presentation"
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <telerik:RadDateTimePicker VerticalAlignment = "Top"
         Name = "dateTimePicker"/>
   </Grid>

</Window>

以下は、選択変更イベントが実装されている* C#コード*です。

using System;
using System.Windows;
using System.Windows.Controls;

namespace RadDateTimePickerDemo {

   public partial class MainWindow : Window {

      public MainWindow() {
         InitializeComponent();
         dateTimePicker.SelectionChanged += dateTimePicker_SelectionChanged;
      }

      void dateTimePicker_SelectionChanged( object sender, SelectionChangedEventArgs e ) {
         DateTime? dt = dateTimePicker.SelectedValue;
         DateTime? date = dateTimePicker.SelectedDate;
         TimeSpan? time = dateTimePicker.SelectedTime;
         MessageBox.Show( "Selected date/time: " + dt.ToString() );
      }

   }
}

上記のコードをコンパイルして実行すると、次のウィンドウが生成されます。

サードパーティ製コントロールの出力

任意の時刻と日付を選択すると、メッセージボックスに表示されます。

メッセージボックス

RichTextBoxの例を次に示します。 次のXAMLコードは、3つのトグルボタンとリッチテキストボックスを作成します。

<Window x:Class = "RichTextBoxDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:telerik = "http://schemas.telerik.com/2008/xaml/presentation"
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <StackPanel>
         <StackPanel Orientation = "Horizontal">
            <ToggleButton Content = "B" x:Name = "BoldButton" Click = "BoldButton_Click"/>
            <ToggleButton Content = "I" x:Name = "ItalicButton"
               Click = "ItalicButton_Click"/>
            <ToggleButton Content = "U"x:Name = "UnderlineButton"
               Click = "UnderlineButton_Click"/>
         </StackPanel>

         <telerik:RadRichTextBox Height = "250" Width = "400" Name = "richTextBox"/>
      </StackPanel>
   </Grid>

</Window>

ボタンクリックイベントの* C#*での実装を次に示します。

using System.Windows;

namespace RichTextBoxDemo {
  ///<summary>
     ///Interaction logic for MainWindow.xaml
  ///</summary>

   public partial class MainWindow : Window {

      public MainWindow() {
         InitializeComponent();
      }

      private void BoldButton_Click( object sender, RoutedEventArgs e ) {
         richTextBox.ToggleBold();
      }

      private void ItalicButton_Click( object sender, RoutedEventArgs e ) {
         richTextBox.ToggleItalic();
      }

      private void UnderlineButton_Click( object sender, RoutedEventArgs e ) {
         richTextBox.ToggleUnderline();
      }

   }
}

上記のコードをコンパイルして実行すると、次のウィンドウが生成されます。 3つのボタンを使用して、リッチテキストボックス内に入力されたテキスト(太字、斜体、下線)を書式設定できます。

3つのボタン

ツールボックスで使用可能な他のコントロールを使用して、実験することをお勧めします。