Monday, March 27, 2017

Creating an Application and Adding UI for WPF

Getting Started
When creating new project, select the needed template as seen on Figure 1.

Figure 1: Select template



Visual Studio Extensions for UI for WPF aim to help developers when creating WPF Application with Telerik UI for WPF.
The extensions handle the following major points in the development with UI for WPF:
·         Project creation, conversion and configuration – reference management.
·         Project Upgrade - upgrading UI for WPF to a new version.
·         Common scenario page creation - aid creating pages with basic scenarios in the usage of UI for WPF.
·         Toolbox configuration – select what version of Telerik UI to be populated in the Toolbox.
Visual Studio Extensions for UI for WPF are distributed with the UI for WPF installer. They can be downloaded and installed as separate product from the Visual Studio Gallery for Visual Studio 2010 and later. The extensions support Visual Studio 2010, 2012, 2013 and 2015, handling .NET 4.0+ applications.
The Visual Studio Extensions can be accessed through the Telerik | UI for WPF menu which has different menu items depending on the selected project in Visual Studio. The extensions can be accessed through the context menu of a WPF Application as well.
No selected project in Visual Studio

Selected project in Visual Studio is Standard WPF Application

 Selected project in Visual Studio is Telerik WPF Application

When installed, the extensions add several project templates to the New Project dialog of Visual Studio:

These are available in the language specific nodes of the dialog as well. New Project dialog contains Telerik WPF Application under both CSharp\Windows and Visual Basic\ Windows nodes


With the new Visual Studio Extensions for WPF you can quickly create an application pre-configured to use Telerik UI for WPF. The fastest way to have such a project is using the Visual Studio New Project Wizard. Under the Telerik node there is a new node – Windows, where four project templates exist:
For convenience the same project templates could be found under the Visual C# -> Windows and Visual Basic -> Windows nodes.
After you click the OK button, you get the Create New Project Wizard, provided by the Telerik UI for WPF Visual Studio Extensions. The wizard detects all the installed Use Implicit Styles version of UI for WPF and lists them in a combobox. You can select a version which you want to be applied to your project. You can select what type of project to be created: Standard, Word-Inspired, Excel-Inspired or Outlook-Inspired. You can access the Create New Project Wizard through the Telerik menu when you need to create a new Telerik WPF application:

The Create New Project Wizard lets you:
·         Select a Telerik UI version from the list of versions detected on your system
·         Download the latest versions available on our website using the GET LATEST button
·         Specify which assemblies your project would use. When selecting a UI for WPF assembly all dependent controls are selected automatically and vice-versa.
GET LATEST button is available only when there is a newer version released on our web site.
If you prefer the Telerik assemblies to be copied into your solution folder, the Copy referenced assemblies to solution and source control option could be selected only into the Visual Studio Extensions Options.
When you click the Finish button:
·         The selected assembly references get added to your project
·         A default application-wide theme gets set if you use theming based on implicit styles.


The following topic describes the system requirements needed by Telerik UI for WPF.
Telerik UI for WPF can be installed on any of the following operating systems:
Windows 10
Windows 8, 8.1
Windows 7
Windows Vista
Windows Server 2008
Windows Server 2008 R2
Windows XP SP2, SP3
Windows 2000 SP4 + KB 891861*
Windows Server 2003 (excluding IA-64)
*Microsoft Consumer Support Ended July 13, 2010 for this product
You could check here for a complete list of the supported operating systems.

In order to develop applications with Telerik UI for WPF you need to have installed the following development tools:
·         Microsoft Visual Studio 2010/2012/2013/2015 - download from here.
·         .NET Framework 4.0, .NET 4.5, .NET 4.5.1, .NET 4.5.2 or .NET 4.6 - download .NET 4.0 from here, .NET 4.5 from here, .NET 4.5.1 fromhere, .NET 4.5.2 from here or .NET 4.6 from here.
·         Microsoft Expression Blend(optional) - download the latest version from here.
·         SQL Server 2008 Express (optional) - download the latest version from here.
We can no longer claim a dedicated support for XBAP applications. This is due to the fact that IE 9 disables XBAP by default (more infohere). We strongly recommend using ClickOnce deployment instead.
·         Processor: x86 or x64 1 GHz Pentium processor or equivalent (minimum); 1 GHz Pentium processor or equivalent (recommended)
·         RAM: 512 MB (minimum); 1 GB (recommended)
·         Hard disk: up to 1.5 GB of available space may be required
·         Display: 800 x 600, 256 colors (minimum); 1024 x 768 high color, 32-bit (recommended)


The following topic describes the installation packages for the Telerik UI for WPF and for the Demos solution.
Each installation package comes in three types:
·         MSI file for automatic installation.
·         ZIP file for manual (advanced) installation.
·         DLL files only (a.k.a. HOTFIX).
WPF Demos application comes in a zip package which you can extract on your machine.



The following topic describes what steps you should perform in order to install Telerik UI for WPF from a MSI file.
The MSI files are intended for easy and automatic installation of a product. The MSI installs the suite on your computer to a folder named Telerik in your Program Files, automatically creating the necessary virtual folders and projects.
For more information about which installation package you need to install, read here.
For more information about the system requirements, read here.
The latest package available for download already has all updates/HOTFIXES applied. There is no need to update it further.
The MSI installation will not overwrite previous Telerik UI for WPF installations, unless it is of the same version.

Before installing Telerik UI for WPF on your machine, you need to download the latest MSI package.
Again, if you've purchased Telerik DevCraft Complete/Ultimate bundle, you will be redirected to a page with all the products in the suite.



Scroll to "UI for WPF" product. Click "Browse all product files" to go to the detailed download page.
·         Click Automatic installation.
·         Download the MSI file.
·         Once the download completes, run the MSI file and follow the instructions below.




·         After downloading the UI for WPF and executing the MSI file you should see the welcome window that is shown on the next image.
·         Click "Read License Agreement" button - the "Telerik End User License Agreement" dialog will appear. In order to continue you need to read and accept the License Agreement.
·         After reading the License Agreement, click "OK" and then "I Agree - Continue".

The next dialog gives you the ability to choose the setup type that best suits your needs. You can either install all Telerik Components or choose which features to install. The second option is recommended for advanced users.



Choose the "Customize" option. The next dialog gives you the ability explicitly to choose the you want features to be installed.


You have the ability to choose the installation location. The default location is
C:\Program Files\Telerik\(where C:\ is the drive where your Windows installation folder is located).
Once choosing the installation location, the wizard will create the necessary virtual folders.

·         Click "OK".
·         Click "Install" to start the installation process, or click "Cancel" to exit the wizard and to terminate the setup. You may want to go back and to change any of the installation parameters - click "Back" in order to do that.


The installation process may take several minutes to complete.
·         After the successful installation of all features you are ready to start developing powerful and interactive applications using the Telerik UI for WPF.




If you open the installation folder ( C:\Program Files\Telerik\UI for WPF [version] ) you will probably note the following sub directories:
·         Binaries - the standard binaries.
·         Binaries.NoXaml - binaries without XAML.
·         LicenseAgreements
·         Themes.Implicit - implicit styles friendly XAML.
·         VSExtensions

With the Q1 2014 release we no longer provide the Themes and pdb files within the installation package. You could download them separately from the UI for WPF download page in your Telerik account.
The WPF Demos application can be downloaded from the UI for WPF download page (in the Telerik account) as a separate ZIP file as well.



The following tutorial will show you how to add UI for WPF controls to the Visual Studio 2015 toolbox.


To manually add Telerik UI for WPF to the Visual Studio 2015 Toolbox, follow the steps below:
·         Open your application in Visual Studio 2015.
·         Expand the Toolbox (View->Toolbox or use the shortcut Ctrl+Alt+X).
3.    Right-mouse button click in the toolbox area and choose "Add Tab" from the context menu.
4.    Add a new tab with name "UI for WPF".
5.    Select the "UI for WPF" tab in the toolbox. Right-mouse click and select "Choose Items...".
6.    In the "Choose Toolbox Items" dialog, go to the "WPF Components" tab and click "Browse...".
7.    Navigate to the folder where the binaries are located. Select the DLL you want to import and click OK or press Enter.
If you wonder which control belongs to which assembly, take a look at the main topic about 
Controls Dependencies.
8.    Press OK to include the controls in your toolbox or filter the controls you want to add.
9.    Expand your toolbox. You will see the newly added controls in the "UI for WPF" section.

After clicking the OK button of the "Choose Toolbox Items", it is possible that the "UI for WPF" tab in the toolbox may be hidden. If that happens, move the mouse pointer over the Toolbox area and right-click the mouse and then select the Show All command from the shortcut menu.







The following topic describes what steps you should perform in order to add the Telerik RadControls for Silverlight in your application. There are two ways to do this - first one is to install RadControls Extensions for VisualStudio which is the easiest and preferrable way. The second one is by adding the necessary assemblies as references in your application. No matter which of the two manners you will choose, you will be able to use the Toolbox to create your application.



·         Open Microsoft Visual Studio 2012.

·         Create new RadControlsWpf Application:
You can choose .Net Framework 4.0 or .Net Framework 4.5 for your application.
·         On the next step you can choose which assemblies to add to your application. For example if you intend to use RadGridView in your application you can check Telerik.Windows.Controls.GridView assembly and all other required dlls will be checked automatically.
·         After doing this your application should look like this:
XAML
<UserControl x:Class="RadControlsSilverlightApp1.MainPage"
        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:telerik
="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable
="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name
="LayoutRoot">
    </Grid>
</UserControl>



·         Open Microsoft Visual Studio 2012.
·         Create a new WPF Application.
You can choose .Net Framework 4.0 or .Net Framework 4.5 for your application.



·         Add the WPF RadControls to your toolbox.

If you wonder which control in which assembly belongs to, read the main topic about Controls Dependencies.
·         Open MainPage.xaml of the project you have previously created.
·         Select any control in the Visual Studio toolbox.
·         Drag and drop the control in the appropriate place in xaml. The result of this operation should be similar to this.
XAML
<Window x:Class="WpfApplication1.Window1"
    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
="Window1" Height="300" Width="300">
    <Grid>
        <telerik:RadTreeView></telerik:RadTreeView>
    </Grid>
</Window>


Note that after dropping a control, Visual Studio automatically creates a namespace that points to the appropriate assembly. If you want to manually set up a namespace take a look at the Namespace Declaration topic.



·         Create a new WPF Application.
·         Add references to the Telerik DLLs in the Solution Explorer.
·         Open the MainWindow.xaml.
·         Go to the Window tag and write:
XAML
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Or you can select from the IntelliSense in XAML:

·         The result should be similar to this.
XAML
<Window x:Class="WpfApplication1.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="525">
    <Grid>
    </Grid>
</Window>
·         Now you should be able to declare any controls existing in this namespace and which is in the assemblies you have added in your project. An example of RadTreeView declaration is shown below.
XAML

<Window x:Class="WpfApplication1.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="525">
    <Grid>
        <telerik:RadTreeView/>
    </Grid>
</Window>
If you wonder which control in which assembly belongs to, read the main topic about Controls Dependencies.























 As a result of the installation, references to the following assemblies will be added to the project:
·         Telerik.OpenAccess
·         Telerik.OpenAccess.Runtime
·         Telerik.OpenAccess.35.Extensions
·         Telerik.OpenAccess.40.Extensions



Add the following references to your WPF project:
·         Telerik.Windows.Data
·         Telerik.Windows.Controls
·         Telerik.Windows.Controls.Data
·         Telerik.Windows.Controls.GridView
·         Telerik.Windows.Controls.Input



No comments:

Post a Comment