WPF: controles de terceros

Los controles de terceros son aquellos que no son creados por Microsoft, sino que son creados por alguna persona o empresa mediante el control de usuario o el control personalizado de WPF. Telerik y DevExpress son las empresas más populares para crear controles de terceros.

En este capítulo, usaremos los controles de Telerik. Así que comencemos siguiendo los pasos que se indican a continuación.

  • Vaya al enlace Telerik que contiene los controles de Telerik WPF y descargue la interfaz de usuario para WPF.

  • Una vez que se complete la descarga, instale los archivos en su máquina.

  • Después de la instalación, abra Visual Studio y cree un nuevo proyecto WPF con el nombre WPF3rdPartyControls.

  • En Toolbox, verá los controles de la interfaz de usuario de Telerik. Además, observará que en el explorador de soluciones, todos losdll también se agregan después de la instalación.

  • Ampliemos el Telerik UI for WPF – input 2015 Q2en la caja de herramientas. Verá muchos controles integrados.

  • Ahora arrastre RadCalculator desde la caja de herramientas a la ventana de diseño.

  • Eche un vistazo a su ventana XAML en la que se ha agregado la etiqueta RadCalculator.

<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>
  • Compilemos y ejecutemos el código anterior. Verá una calculadora completamente funcional en su ventana con solo una línea de código.

  • Esa es la belleza de los controles de terceros. Pero no es gratis, tendrá que comprar una licencia si desea utilizar controles de terceros en su aplicación.

Echemos un vistazo a otro control Telerik. Cree un nuevo proyecto de WPF con el nombreWPF3rdPartyControls. Arrastre el control RadDateTimePicker desde la caja de herramientas. El código XAML es el siguiente:

<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>

Aquí está el C# code en el que se implementa el evento de cambio de selección.

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() ); 
      }
		
   } 
}

Cuando compile y ejecute el código anterior, producirá la siguiente ventana.

Seleccione cualquier hora y fecha y se mostrará en el cuadro de mensaje.

Ejemplo

Aquí hay un ejemplo de RichTextBox. El siguiente código XAML crea tres botones de alternancia y un cuadro de texto enriquecido.

<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>

Aquí está el implementation in C# para evento de clic de botón.

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(); 
      } 
		
   } 
}

Cuando compile y ejecute el código anterior, producirá la siguiente ventana. Con la ayuda de los tres botones, puede formatear el texto (negrita, cursiva, subrayado) escrito dentro del cuadro de texto enriquecido.

Le recomendamos que intente utilizar los otros controles disponibles en su caja de herramientas y experimente.