Sunday, December 10, 2017

WPF Extended Toolkit. Free WPF Controls

WPF has its own controls like Label, Button, ListView etc. and you can use them in your WPF Project. But some times you have to customize some WPF controls in a way that is not already available. For example: you want some buttons in your application to have Icons(images) with the displayed text like this:



You can write Styles and control templates etc. to meet your needs.
There is a free and open source Xceed WPF Controls Toolkit wpf toolkit available that has many things already done for you.
You can download it and use it in your project as required from the following link:
https://github.com/xceedsoftware/wpftoolkit

You can also add this in your WPF project through Nuget Package also, which is pretty  simple.
1. Open Visual Studio 2015
2. Tools -> Nuget Package Manager -> Manage Nuget Packages for Solution

 Search for "WPF" in search bar.
From Search Results, Install "Extended WPF Toolkit"

It will be installed in your selected Project.

Now, you surely want to test some of its controls.
Add a new "Window" in you WPF Project.
Add this nameSpace in your XAML.
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"


We will use this namespace to use its controls in our XAML.
Code Sample:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
       
        <xctk:IconButton Grid.Row="1" Content="Icon Button" Padding="10,0,0,0" HorizontalContentAlignment="Left" Width="150" Height="50"
                         Foreground="White"
                         Background="Orange"
                         FontWeight="Bold"
                         IconLocation="Right" BorderBrush="Yellow" BorderThickness="0,0,0,5">
            <xctk:IconButton.Icon>
                <Image Source="Images/microsoft-gray.png" Margin="4,0,0,0" Width="50" />
            </xctk:IconButton.Icon>
        </xctk:IconButton>
       
    </Grid>


This code will display the following output:





Courtesy to this link http://www.freebits.co.uk/convert-html-code-to-text.html for helping me paste my XAML code in this blog :)

No comments:

Post a Comment