Easily create a Modern UI with RadControls for WPF using RadTileList Part 2

Posted by: the telerik blogs, on 18 Apr 2013 | View original | Bookmarked: 0 time(s)

Introduction

In Part 1 of Easily Create a Modern UI with Radcontrols for WPF using RadTileList, we discussed how to get started using RadTileList to achieve a Modern UI Style for your XAML applications (WPF & Silverlight), similar to the start menu screen of Windows 8. If you havent read that post yet, then Id encourage you to start from there, then pickup with this post as we will be expanding upon the example we left off on as well as answering several questions that you might have had.

Im going to be using RadControls for WPF Q1 2013 Service Pack 1 for this example. You may want to go ahead and download it now. You can follow along with this blog post with either the WPF or Silverlight bits. The completed source code for this project is also available here.

Picking up where we left off

Our completed application looked like the following as shown in Figure 1.

5

Figure 1: RadTileList displaying multiple TilesTypes and Images with Maps selected.

As you can see from the example above, the Photo tile used an image as the background. The Maps tile colored the background purple and the Mail tile used Path data as shown in the code snippet below.

<telerik:Tile Background="Green">
 <Grid >
 <Path Name="Mail" Data="M12.343673,26.303528 L12.343673,48.725266 L53.020504,48.725266 L53.020504,26.303528 L34.296661,40.339897 C33.984161,40.635036 33.693367,40.808647 33.424271,40.860729 C33.155174,40.912811 32.864376,40.938854 32.55188,40.938854 C32.256741,40.938854 31.961605,40.912811 31.66647,40.860729 C31.37133,40.808647 31.067513,40.635036 30.755016,40.339897 z M12.864503,20.756687 L32.55188,35.938885 L52.239258,20.756687 z M9.5832739,15.652554 L55.181946,15.652554 C55.633331,15.652554 56.036976,15.717659 56.392876,15.847866 C56.748775,15.978073 57.056931,16.151684 57.317348,16.368694 C57.577766,16.585709 57.773079,16.828762 57.903286,17.097858 C58.033493,17.366955 58.098595,17.640388 58.098595,17.918163 L58.098595,50.964832 C58.098595,51.815521 57.833839,52.501282 57.304329,53.02211 C56.774818,53.542942 56.067356,53.803356 55.181946,53.803356 L9.5832739,53.803356 C9.2881355,53.803356 9.0016794,53.733913 8.7239037,53.595024 C8.4461269,53.456139 8.2030735,53.260826 7.9947419,53.00909 C7.7864099,52.757355 7.6127996,52.457878 7.4739113,52.110661 C7.3350234,51.763439 7.2655792,51.381496 7.2655797,50.964832 L7.2655797,17.918163 C7.2655792,17.640388 7.3350234,17.366955 7.4739113,17.097858 C7.6127996,16.828762 7.7864099,16.585709 7.9947419,16.368694 C8.2030735,16.151684 8.4461269,15.978073 8.7239037,15.847866 C9.0016794,15.717659 9.2881355,15.652554 9.5832739,15.652554 z"
 Fill="White"
 HorizontalAlignment="Center"
 VerticalAlignment="Center">
 </Path>
 <TextBlock Text="Mail" Style="{StaticResource TileLabelStyle}"/>
 </Grid>
</telerik:Tile>

As we discussed in the first part of the series, the RadTileList can use any UI Element to display content inside of a tile, but you may have several questions regarding the Path Data found in the Mail tile.

Primer on Path Data

The path class draws a series of connected lines and curves by using the Geometry class. This class specifies the shape to be drawn. When you first look at a sample of path data you may be confused and think it is hard to implement or create your own. It is actually very simple with a few websites and tools listed below.

One great resource for path data that you may use freely in your enterprise apps comes from XAMLALOT. In this case, you can search the database for existing clipart such as the Mail icon, and select Download XAML Canvas as Text. You will want to remove everything inside the code snippet except for the Path data as the code snippet is formatted to be used in with a canvas. Another free option is called, Open Clip Art. Search for the clipart that you want, and then convert it from SVG format to XAML using Inkscape.

If you prefer to create your own path data, then there are a number of ways to do so. You can use either Jesema or Live Geometry, but I prefer to use the Copy XAML option of Microsoft Expression Design 4. This blog post describes how to use the Copy XAML option in Expression Design 4 to generate path data that can be used in Blend or Visual Studio.

With all this talk about Path data, you may be wondering when you should or shouldnt use it. It has been my experience that you typically want to use Path data for simple graphics such as clipart. If you use it with graphics of any real complexity, then it will generate hundreds and possibly thousands of lines of path data. On the other hand, if you include an image into your project, then you will need to deploy it with your application which will increase the size of your app. There is no one fits all answer to this question as it largely depends on your applications needs.

Extending RadTileList with a Custom Background

Instead of using a DodgerBlue background found in the previous post, lets add an image that is similar to the ones found in Windows 8. We can do so by adding the following code snippet shown below.

<telerik:RadTileList.PanoramaBackground>
 <Image Source="largebackground.png" />
</telerik:RadTileList.PanoramaBackground>

I can now run my application and it will look like what is shown in Figure 2.

1

Figure 2: RadTileList using the PanoramaBackground to give it a Windows 8 look-and-feel.

Grouping Tiles

Right now we have several common application types that most users would use such as Photos, Mail and Maps. Lets add a few more Tiles geared towards a developer and demonstrate the new grouping functionality added in WPF/Silverlight Q1 2013 SP1.

Heading back to the Grid.Resources, we will add the following code snippet:

<DataTemplate x:Key="GroupTemplate">
 <TextBlock Text="{Binding}" 
 Foreground="Gray"
 Margin="20" 
 FontWeight="Bold"
 FontSize="20"
 FontFamily="Segoe UI"/> 
 
</DataTemplate>
 <Style TargetType="telerik:Tile">
 <Setter Property="Margin" Value="20,15,5,0"/> 
 </Style>

We first declare a DataTemplate and give it a Key of GroupTemplate that defines the style of the TextBlock used for our heading. We then set the style for all Tile types to have the same margin, where they all have the same look and feel.

Next, we need to reference our GroupTemplate by adding it as a StaticResource as shown in the snippet below:

<telerik:RadTileList x:Name="TileList1" GroupTemplate="{StaticResource GroupTemplate}"/>

Finally, we will set the Group property of each Tile to the same name to group them as shown below:

<telerik:Tile x:Name="VisualStudio" Background="Purple" TileType="Single" Group="Software Development" >
 <TextBlock Text="Visual Studio" Style="{StaticResource TileLabelStyle}"/>
</telerik:Tile>
 
<telerik:Tile x:Name="Blend" Background="DodgerBlue" TileType="Quadruple" Group="Software Development" >
 <TextBlock Text="Blend" Style="{StaticResource TileLabelStyle}"/>
</telerik:Tile>
 
<telerik:Tile x:Name="ILDASM" Background="Black" TileType="Double" Group="Software Development" >
 <TextBlock Text="ILDASM" Style="{StaticResource TileLabelStyle}"/>
</telerik:Tile>

For demonstration purposes, Im only going to set the Background color on these Tiles.

You may also notice that we are also showing a TileType that we have not seen before called Quadruple, which is rumored to be Windows Blue.

After adding the proper Group to each Tile and running it, we will see what is shown in Figure 3.

3

Figure 3: RadTileList using the GroupTemplate and Group property to organize our Tiles.

Conclusion

Today, we took a second look at RadTileList for Silverlight and WPF. We have seen that with the introduction of Service Pack 1, we have even more flexibility when creating Tiles. Of course, we always strive to do deliver more than expected. So, we would love your feedback on what we can do to improve RadTileList. If you have any questions, then please feel free to leave it in the comment box below or our forums.

Dont forget that in order to try this control out, then you will need to download RadControls for WPF or Silverlight.

The completed source code for this project is also available here.

-Michael Crump (@mbcrump)

Category: WPF | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 1643 | Hits: 5

Similar Posts

  • Telerik Releases New Controls for Silverlight 3 and WPF more
  • Telerik Announces Support for Microsoft Silverlight 3 more
  • Telerik Introduces Free Web Testing Framework for ASP.NET AJAX and Silverlight more
  • XAML Power Toys for Silverlight more
  • WPF and Windows Forms integration more
  • What happened behind the scene in Card Space more
  • Tip/Trick: Gathering Custom User Registration Information more
  • You gotta love SeeWindowsVista more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD