Quantcast
Channel: Infragistics Community
Viewing all 2460 articles
Browse latest View live

ASP.NET controls and Bootstrap styling

$
0
0

ASP.NET application styling

For quite some time already Infragistics ASP.NET controls have been providing robust and mature CSS styling infrastructure. To look back a bit, it has been almost 7 years (since 2007) that this styling approach was introduced and used by our ASP.NET and ASP.NET AJAX controls.

The structure of the CSS files is very simple. There is one shared file, which contains CSS class that are common among all controls:

ig_shared.css

And there are all other CSS files that are specific to each control:

ig_dataGrid.css

ig_datamenu.css

ig_datatree.css

etc.

What makes it easy to configure and use, is a Visual Studio integration that gets activated as soon as a WebForms page is switched into the design mode. The VS extension watches for this view, and checks right away whether the styling folder exists in the application. If it does not, the folder is automatically created and the developer is informed about default styles copied into this new location:

Infragistics ASP.NET styling auto enables 

Afterwards the developer can change the style through extension dialog that can be found off

Visual Studio Add-on

The CSS classes structure itself is very straight forward, does not use complicated CSS queries at all and easy to learn and modify. Each element that gets styled has two or more classes applied to it. First class is from the shared CSS file, second is specific to the control.

Very simple and very straight forward.

Now the technology is changing, new browsers and new standards were developed since Infragistics ASP.NET suite was first released to market. We need to maintain backward compatibility, but we also need to be up to date. What do we do? Read on for the answer!

Bootstrap styling

Guys at Twitter seemed to hit the nail on the head. Everyone likes their open source Bootstrap library. Get your copy here: http://getbootstrap.com/

It is modern looking, responsive to the screen size, uses latest CSS capabilities, and has many themes developed for it already. Even Microsoft includes it as a part of their ASP.NET new project template. The list goes on and on!

To get started using it is very easy, just follow the simple steps on their tutorial page:

http://getbootstrap.com/getting-started/

Putting it together

If you are like me, you are probably wondering if you need to re-write your application in order to start using Bootstrap theme. All of your current front end work needs to be thrown away and countless hours added to redesign of the UI.

But maybe there is another way.

Here at Infragistics we’ve been investing our time into developing a solution that helps older applications to take advantage of newer UI libraries, but still use most of your application’s front end HTML and CSS. Take a look at this prototype tool. That is currently code named “Bootstrap Mapper”:

http://bootstrapmanager.azurewebsites.net/BootstrapConfigure

(Currently the tool has been tested only in the Internet Explorer 11. Please use this browser to avoid some unwanted glitches.)

The idea of this tool is simple: create links between existing CSS classes and the ones that may potentially be changed in the future (like Bootstrap).

In the floating window on the right you can choose your current CSS files and drill down to the style setting level in order to:

  • Delete a setting (x)
  • Link a setting to another (s)
  • Add a new setting (+). The new setting can afterwards be linked to another

Bootstrap Mapper tool

Green color indicates whether a class is currently in use. Classes use is monitored in real time, they become green as soon as they are applied.

(x) – hitting the (x) button will remove the style setting from use and will apply default value to it.

(s) – hitting the (s) button will open a dialog for selecting a CSS style and setting to link to:

Bootstrap Mapper edit link

OK will create the link between the two styles using JavaScript. This is a dynamic link that is independent from the final value of the linked-to style. Because of that you will be able to swap the CSS themes and the link will automatically apply new values to existing settings. Very useful in a case where the Bootstrap theme can be changed.

(+) – hitting the (+) button at the bottom of the dialog will create a new style setting and give it a value. Once it is added to the class, you can also link it to another style on the page.

BootstrapMapper after some changes

After all the configuration is done, it is easy to export dynamic linking JavaScript code by hitting the Export button at the top of the floating window. The code will be placed into the Clipboard and you will be able to paste it into your application.

And here is the result of our modifications with the dynamic links applied to this same page:

http://bootstrapmanager.azurewebsites.net/BootstrapLinked

Dynamic linking code for this small demo can be found in the attachment to the blog.

Some features that are in the pipeline for the next version of the tool:

  • Provide dynamic linking to Bootstrap for all Infragistics ASP.NET controls
  • Static linking – export CSS files (not JavaScript file)
  • Export SASS and LESS files

We are working hard to make this tool into production quality and add it to our offering as a part of the product. Hope you like this tool, and we will not be able to make it as good and as useful without your help. So please, send your suggestions and comments. We are listening.


IGChartView : Custom Data Styling (ObjectiveC / Xamarin.iOS - Monotouch)

$
0
0

Introduction

NucliOS 2014 v 1 introduces the ability to style individual parts of Category Series based charts. Now when certain datapoint needs to be brought to attention, you can change it's appearance dynamically.

So how does this work, well for the impatient you can hop down to the bottom and download a demo project in both Objective C or Xamarin.iOS.   And of course you will need the latest NucliOS Trial Download if you aren't already a subscriber.

Example Code

So the first thing we will need to do is to set up an IGChartViewDelegate in order to handle delegate method. In Objective C we could just add the delegate declaration to the hosting view controller but for this example I declared a class that would implement the delegate for me

Objective - C

.h
@interface MyChartViewDelegate : NSObject
@end

Xamarin.iOS - C#

public class MyChartViewDelegate : IGChartViewDelegate

Once we have the declarations out of the way, we override/implement the method that will be called by the chart each time rendering is done.

Objective - C

-(void)chartSeriesRenderHighlight:(IGChartView *)chartView forSeries:(IGSeries *)series withArgs:(IGAssigningCategoryStyleEventArgs *)args
{
  // this is extra for this sample, but since we can have more than one series in a chart, we should
   // filter our actions for the correct series.
   if ([series.key isEqualToString:@"a"])
  {
     // so this delegate method gets passed in information about the     rendering. For this sample
    // we know we are getting 10 data points so from the start index we will change the alpha level
    int i = args.startIndex;

    // once we figure out what the new color will be, we set the brush that will be used for the data item.
    args.fill = [[IGBrush alloc]initWithR:0 andG:1 andB:1 andA: (i+1)/12.0];


// ok the above code is pretty simple and just uses the index of the item as the only data. But by using the index we can find the underlying data object by looking through the data series. So if we need the actual data series object we can get that.

MyFakeData* fakeData = (MyFakeData*) [series.dataSource objectAtIndex:i];

  if (fakeData.nonCompleteData)
  {
    args.stroke = [[IGBrush alloc] initWithColor: [UIColor redColor]];
  }
 }
}

Xamarin.iOS


public override void RenderHighlight (IGChartView chartView, IGSeries series, IGAssigningCategoryStyleEventArgs args)
{
if (series.Key == "a") {

// so this delegate method gets passed in information about the rendering. For this sample
// we know we are getting 10 data points so from the start index we will change the alpha level
int i = args.StartIndex;

// once we figure out what the new color will be, we set the brush that will be used for the data item.
float percent = .9f - (((float)args.StartIndex/10f) * .4f);
args.Fill = new IGBrush( 136f/255f ,46f/255f ,75f/255f , percent);

// ok the above code is pretty simple and just uses the index of the item as the only data. But by using
the index we can find the underlying data object by looking through the data series. So if we need the actual data series object we can
get that.

MyFakeData fakeData = (MyFakeData) ((IGCategorySeriesDataSourceHelper) series.DataSource).Data[i] ;

if (fakeData.NonCompleteData)
{
args.Stroke = new IGBrush(52f/255f,179f/255f, 222f/255f,1f );
args.StrokeThickness = 4.0f;
}
}
}

So now that the delegate is set up, we should be done right? Well no, there is one more step. We need tell the series that we want to use the delegate method. This type of styling can be expensive, so we made it opt in rather than opt out. So when we make our series in the ViewController we also have to set a property on the series to hook it up.

Objective - C
// In order for the delegate to use it's method, we need to turn it on for the series. Otherwise
// the series will display it's default colors.
columnSeries.isCustomCategoryStyleAllowed = YES;
Xamarin.iOS
// In order for the delegate to use it's method, we need to turn it on for the series. Otherwise
// the series will display it's default colors.
columnSeries.IsCustomCategoryStyleAllowed = true;

And that's about it. This is what our output would be

Anyway as promised you can download the source code for this sample below :

IGChartView Series Styling Example - Objective C

IGChartView Series Styling Example - Xamarin.iOS

If you have a request for a feature in our frameworks, please let us know and we will see what can be done. 

Questions about a feature?  Hit us on the NucliOS Forums.

And if you have a request for a how to article for the NucliOS product you can tweet it to the @Infragistics feed or myself @DarrellKress17 and we will see if we can write that up for you.


By Darrell Kress

What’s New in Infragistics WPF and Silverlight 14.1

$
0
0

AMAZING! That’s all I can say about this 14.1 release of Infragistics WPF and Silverlight controls. This is the most feature packed release we have had since I started working at Infragistics over 2 years ago. I am really excited about the new controls we are giving you early access to, the new features that will remove hundreds of lines of XAML from your views, the improved MVVM support, and the new themes and style updates that will make your application sing that beautiful song of awesomeness.

This year, we are focusing on three main areas, all designed to help you deliver the best, most modern applications to your customers faster than ever.

  1. Touch everywhere, Office inspired apps on every platform
  2. Deliver “Stunning” with awesome branding and styling
  3. Developer productivity across every device, and every platform

This isn’t just limited to our WPF and Silverlight controls.  We are focused in these three areas across desktop, web, mobile native & mobile hybrid toolsets.  Everything we are doing in each product is going to circle back to one of these areas, and of course some features overlap.  I would like to also mention, that every single one of these new controls and features we are releasing in 14.1 were asked for by you. You told us what you wanted, and we delivered. This is your release!

Touch Everywhere, Office Inspired Apps on Every Platform

Normally I like to save the new CTP controls until the end of my posts, but I am so excited about our two newest controls, I just couldn’t wait. Wait a minute Brian… What the heck is a CTP? Well, I am glad you asked. A CTP (Community Technology Preview) is a classification that we give a control when it is in its’ early stage of development. We release these controls as a CTP in order to gather feedback from you, our customers, during the development of the control. This gives you the ability to get early access and tell us what you like and what you don’t like. You can even let us know what features the control should have. Feel free to submit your product ideas on our Product Ideas site, or email them directly to me.

xamDiagram – CTP

Go ahead and uninstall Microsoft Visio, because you won’t be needing it anymore. The new WPF xamDiagram will allow you to create your very own diagramming solution with all of the features that you would expect in a diagramming tool such as Visio.  Even though this is being released as a CTP, don’t let that fool you!  The xamDiagram CTP will ship with all the features you will need to start writing anything from simple flow charts and activity diagrams, to complex LinqToSQL relationship diagrams.

xamDiagram - activity diagram

Initially, the xamDiagram will come with over 10 predefined diagram shapes such as Circle, Square, Rhombus, and Triangle just to name a few.  We’ll be adding more in a future release.  Making connections between shapes is as easy as dragging your mouse.  Simply click the center of a shape and then, while holding down the mouse button, drag a connection to another shape.  It’s that easy.  Once a connection is made, you can change various properties of the connector.  Choose from 28 different start and end cap types such as Arrow, Circle, Diamond, and more.  Choose from 7 different line styles including dash, dot, dash-dot and more.  Not happy with the size of the shape?  No problem, we give you the ability to perform a proportional resize by dragging one of the shape’s many resize handles at runtime.  You can even do an un-proportional resize by holding the keyboards “Shift” key while dragging a shape’s resize handle.

Don’t think you are limited to just the predefined shapes and connectors.  Oh no!  You can create any custom shape you can imagine.  For example, maybe you want to create a LinqToSQL class diagram.  No problem!  Using custom styles and templates, you are not limited in what you can create.  You can even customize the location of the connection ports for your custom shapes.

xamDiagram - LinqToSql Object Model

The xamDiagram’s canvas is easy to navigate with mouse wheel support for zooming in and out, as well panning while holding down the left mouse button.  There is even an overview navigation pane built-in, which will give you more options for changing zoom levels and navigating the design surface.  The xamDiagram is being built with MVVM and data binding as our top priority.  We provide a number of commands that allows you to perform actions such as Copy, Paste, Cut, Delete, Edit, Undo, Redo, and SelectAll.  Having said that, we haven’t released data binding the xamDiagram to a collection of objects yet.  We want to make sure we do our due diligence, and get the data binding feature right the first time.  I am relying heavily on the Infragistics XAML Insiders to help us determine the best approach for data binding support.  If you have ideas on what data binding scenarios you would like to see us support.  I would love to hear them too.

You know what may be the best part about the xamDiagram?  Even with all these features, and the flexibility you have for customizations, it is still the highest performing WPF diagram control on the market.  Even as a CTP!  And it will get even better with time.

xamSpreadsheet – CTP

While you’re uninstalling Microsoft Visio, you might as well get rid of Microsoft Excel too.  Well, maybe not quite yet, but soon.  Since I started working at Infragistics, the most popular questions I received were on how to make the xamDataGrid behave, and act like, an Excel spreadsheet.  You know who you are!  Obviously, a data grid is not an Excel spreadsheet, and trying to get a data grid to act like one is like trying to get Darth Vader to leave the Dark Side.  It’s just not going to happen.  They are two very different controls with different purposes.  So instead of trying to convince Darth Vader to change his ways, we decided to write a new Excel inspired xamSpreadsheet control.  I can already tell that this will quite possibly be the most popular control we will ever write.  The number of customers wanting early access to this control is overwhelming.

xamSpreadsheet

You want to know what’s really cool about this control?  Do ya, do ya?  The new xamSpreadsheet is built on top of our existing Excel Library.  Now you can create, open, edit, and secure Excel documents without ever having Microsoft Excel installed on your machine.  Mind blown!  Your customers are going to love you.

As it sits, the xamSpreadsheet is in the very early stages of development, but has a ton of great features that you can start using now.  You can freeze and split panes, zoom, merge cells, set a background image (yeah that’s a big deal), control the grid lines, and format cells.  The options you have for formatting cells include alignment, font, indent, shrink to fit, text wrapping, fill colors, string formatting, and more.  That might not seem like much, but when you are basically writing Excel wrapped in a control, that is actually a lot in such a short amount of time.

You can expect this control to get a lot of love during our 14.2 efforts, but for now, what you see is what you get.  Normally, we wouldn’t be releasing this control so early in it’s development cycle, but I am really interested in your feedback.  Actually, I am surprised they are letting me release the xamSpreadsheet so early.  Hmmm… did I forget to ask for permission?  Move along, nothing to see here!

xamRadialMenu

Our xamRadialMenu has finally shed its’ CTP classification and is being officially released as an RTM control in 14.1. The xamRadialMenu is available for both WPF and Silverlight platforms. Inspired by the Microsoft OneNote radial menu, the xamRadialMenu provides a circular menu that orients the commands around the user, rather than requiring the user to negotiate a nested hierarchy of drop downs. Most commonly used as a context menu, the xamRadialMenu allows you to drill down into related sub-menu items with the ability to navigate back to the main level menu item. Although the xamRadialMenu is optimized for touch, it works just as well for mouse and keyboard interactions.

xamRadialMenu

It has configuration options for setting the number of wedges, rotation, size, and more. It has a number of built in tools such as a radio button, color well, numeric items and gauges, as well as a list tool. With support for recent items, tooltips, key tips, keyboard navigation, MVVM support, this control has everything you need to build your own touch based applications.  While some people believe this is somewhat of a novelty control, I have actually seen very good implementations of this control.  If done right, you can add a lot of touch friendly functionality to your applications.

Deliver Stunning with Awesome Branding & Styling

Besides releasing brand new Office inspired controls; we are also giving you a great new Office 2013 theme, and great new Office 2013 ribbon features to help give your applications a great modern and familiar feel.  We are also sprucing up some of our own default styles for a number of our data visualization controls to give them an updated look and feel right out of the box.

Office 2013 Theme

We are delivering a brand new theme for WPF inspired by the new Microsoft Office 2013. Not only does this new Office 2013 theme apply to all Infragistics controls, but we are also shipping this theme for common Microsoft controls.  You can now give your WPF applications a nice clean Office inspired look and feel.  Here is just a small sample of how some of your WPF controls will look with this new Office 2013 Theme applied.

Office 2013 Theme

I am even thinking of giving away the Office 2013 Microsoft styles for free, just like I did for our other popular themes (IG, Metro Light, Metro Dark, and Office 2012 Blue).  What do you think?  Thank you, thank you.  No need to applause!  You can have a seat now.

xamRibbon and xamRibbonWindow

In conjunction with the new Office 2013 Theme shipping in 14.1, we have also added a number of new features to our xamRibbon and xamRibbonWindow to help you achieve that Office 2013 inspired look and feel in your WPF applications. The most noticeable new feature of the xamRibbon is the brand new Office 2013 Backstage. Unlike the previous version of the Office Backstage in which the ribbon tabs were always in view, when opened, the 2013 backstage will encompass the entire application window. So, how do you get this new Office 2013 backstage? No need to re-write any of your application’s XAML. Simply set your xamRibbon.Theme to the Office 2013 theme, and VOILA!

We also added a new TabItemAreaToolbar that allows you to add custom content to the right end of the xamRibbon’s tab area. Some common usages for this feature are to add user login information, or provide a help button to access application help documentation. Items that are no longer visible, maybe because of a window resize, will be added to an overflow popup, which can be opened by clicking the overflow button to give you access to the content. You can see these features in action in the below screenshot. Pretty sweet, huh?

xamRibbon Office 2013 backstage

Have you noticed the clean, modern look of the window yet? I bet you have, because you don’t get that with the default WPF Window. When using the xamRibbonWindow, simply set the xamRibbon.Theme property to the new Office 2013 theme, and the xamRibbonWindow will automatically update its window chrome to match the modern style of the Microsoft Office 2013 products. But Brian… What if I want all the windows in my application to have this beautiful, clean, and modern window chrome? Well… I’m glad you asked, because you can! And no, you will not be required to have a xamRibbon in each window. You can easily use the xamRibbonWindow as a standalone window without defining a xamRibbon. In this case, you would simply define the RibbonWindowContentHost object in the xamRibbonWindow, and set the RibbonWindowContentHost.Theme property to the Office 2013 Theme. But wait… there’s more! You can even change the accent color of the window chrome by using the RibbonWindowContentHost.ApplicationAccentColor attached property. As you can probably guess, this property would need to be attached to the actual RibbonWindowContentHost object.

xamRibbonWindow accent color

New Default Style - xamDataChart, xamFunnelChart, and xamPieChart

We heard a lot of feedback regarding the default look and feel of some of the data visualization controls when dragging them from the Visual Studio toolbox onto the design surface, and we made sure to improve your experience. You no longer have to spend hours setting properties, modify a control template, or creating new styles altogether. We spent a lot of time creating a new default style to make the xamDataChart, xamFunnelChart, and xamPieChart kick you in the eyeballs with visual awesomeness. If you happen to prefer the older style to the new one, don’t worry, you can still apply the older style with a simply resource dictionary.

xamDataChart:

xamDataChart - default style

xamFunnelChart:

xamFunnelChart - default style

xamPieChart:

xamPieChart - default style

Developer Productivity across Every Device, Every Platform

Beside providing you with great new controls, and awesome new styles and themes that would put your applications on the cover of Vogue Magazine; we also want to make it easier for you to write those applications.  We want to reduce the number of line of code that you have to write.  We want to reduce the amount of time it takes to learn our controls.  To achieve these goals, we have implemented a number of new features that eliminates up to 500 lines of XAML from your code.  There are also a lot of new features that improve your ability to use our controls with the MVVM pattern.  There is also a brand new template gallery that delivers entire applications out of the box.

xamDataGrid

If you are one of the many customers that like to have record numbers in your grid, then you know the pain you had to go through to achieve simple record numbers in the xamDataGrid. You would literally need to add a custom RecordSelector ControlTemplate with up to 500 lines of XAML to get record numbers. Well, that is just not going to work! In this release you will be happy to know that you can now remove those 500 lines of XAML and turn on record numbering with a single property called FieldLayoutSettings.RecordSelectorNumberType. You have options for how the numbering will work, for example, will you use the DataItemIndex, the RecordIndex, or the VisibleIndex? You can even choose which number your record numbering begins at by setting the FieldLayoutSettings.RecordSelectorNumberStart property. What’s really nice about this feature is that these new properties are exposed off the FieldLayoutSettings so they can be set on the xamDataGrid directly, or on individual FieldLayouts through their Settings property.

xamDataGrid row numbers

What to change the styling? No problem! Just set the RecordSelectorNumberStyle property, and make it look exactly how you want.

xamDataGrid custom row numbers

The xamDataGrid also got two new filtering operands in the form of “In” and “Not In”. You can now filter a column in the xamDataGrid using multiple values, separated by commas, to find records that contain values that fall “In” the filter values, or do are “Not In” the filter values.

xamDataGrid In and Not In filtering

Are you an MVVM (Model-View-ViewModel) developer? Do you use the xamDataGrid? Do you wish there was a property that would allow you to data bind a property in your ViewModel to the selected items in the xamDataGrid? Well, call me “Brian the Genie”, because I just made your wish come true! The xamDataGrid has received a new SelectedDataItems property for the sole purpose of supporting numerous MVVM scenarios, as well as other View related data binding scenarios. Not only will your ViewModel have access to the items being selected in the xamDataGrid by binding to the SelectedDataItems property, but you can also control which records in the xamDataGrid get selected from within your ViewModel. That’s right! The SelectedDataItems property is a Two-Way binding. Not only that, we have provided a SelectedDataItemsScope property which will allow you to control when the SelectedDataItems are populated. For example, you may only want to know the SelectedDataItems when the records are selected. In this case, you would set the SelectedDataItemsScope property to RecordsOnly. You could also set the SelectedDataItemsScope property to RecordsOrCells, or you can turn the feature completely off in order to increase performance.

xamRichTextEditor

The xamRichTextEditor is quickly becoming one of our more popular controls. Although it supported RTF, Plain Text, and Word document formats with its’ first release, it was still missing one critical format... HTML! That’s right, the xamRichTextEditor now supports importing, exporting, and even data binding to the ever popular HTML format. Don’t get this confused with writing HTML in the editor. This is taking the rich content you created in the editor and converting all the fonts, styles, images, lists, and other rich content into HTML markup which can be saved as an .htm document on disk, or as text in a database field.

For example:

xamRichTextEditor HTML support

As you can see, as I type content into the xamRichTextEditor, the output is rendered as HTML markup.  If you’re an MVVM developer, don’t you worry.  We have created an HTML document adapter that will let you data bind your HTML content to a property in your ViewModel.  Now take that HTML and do what you want with it.  No code-behind here!

xamComboEditor

This one was personal!  In my early experience with the xamComboEditor, I determined that this control was not fit for an MVVM application.  Most PMs (Product Managers) would never say that about their product.  Well, if you can’t tell by now, I’m not like most PMs.  I tell it like it is.  I’m transparent to my customers, that’s you, and I am always looking for ways to improve my products.  I even wrote a custom behavior so that you can actually use the control.  Well, I am very excited to announce, that we have given the xamComboEditor so much MVVM love, that you would think that we were back in the 70’s.  Every feature that was in my custom behavior, and more, is now part of the product!

First, we added a new IsSelectedMemberPath property.  Now you can data bind those awesome CheckBoxes to a property of the underlying object.  Oh yeah baby!

xamComboEditor IsSelectedMemberPath binding

Next, we added the dearly missed, and much needed, SelectedValue and SelectedValuePath properties.  Now, you no longer have to rely on dealing with object instances.  Simply provide the SelectedValuePath to indicate which property of the underlying object you want to use for the identifying value.  Then, you data bind a property in your ViewModel to the SelectedValue property to get the corresponding value for the selected item.

xamComboEditor SelectedValue/SelectedValuePath binding

I know what you’re thinking… That’s great Brian, but how do I handle selecting multiple values?  I mean, we are dealing with a bunch of check boxes here.  So, I should be able to select many items at once.  Does the SelectedValue handle this scenario?  No it doesn’t.  The SelectedValue property will only give you the last selected value, or the last value of the item that was checked.  Don’t freak out!  We have a solution for this.  We have also added a new SelectedValues property.  Notice the plural “s”?  In multiple selection/CheckBox scenarios, you can use the SelectedValues property to get the collection of all selected values from within your ViewModel.  Oh, and did I mention that both of these properties are a Two-Way binding?  This means that not only can you get the selected values from within your ViewModel, but you can also control what items get selected in the xamComboEditor from within your ViewModel.  Isn’t it beautiful?

The SelectionChangedEventArgs got a little love as well.  Now you might be thinking, “why would you spend time on this?”.  Well, if you ever used the SelectionChanged event in the past, you quickly realized that you had no way to know what was selected or unselected.  What a pain!  So we fixed it.  You now have access to the newly added and removed items from within the SelectionChanged event.  Ahhh… the little pleasures in life.

xamComboEditor improved SelectionChangedEventArgs

Were you one of the many customers that wanted a more powerful filtering mechanism?  In the past, you could only filter the items based on the DisplayMemberPath.  Well, this isn’t very useful, especially if you need to filter on multiple values.  Maybe you use a 10-Key system, and use codes to lookup inventory items.  You will be happy to hear that we have introduced a new, much more powerful, filtering mechanism to give you much more control over your filtering needs.  You can filter on multiple properties, as well as add multiple filter conditions per property.

xamComboEditor item filters

In this example, we are filtering a list for people that have a “First Name” that contains the search query we enter into the editable xamComboEditor, AND doesn’t end with the same query.  We can easily modify this query to do an OR comparison between our two ComparisonConditions, or choose from over 35 operators.  You can even add more ComboItemFilters to filter on other properties of your underlying objects.  Now, this will be useful!

Lastly, we also gave you a little more control over the xamComboEditor’s drop down.  You can now set the MaxDropDownHeight, MaxDropDownWidth, and MinDropDownWidth.  The xamComboEditor also got a nice resize handle so your users can easily resize the drop down at runtime.  Not only that, but we added a new DropDownButtonDisplayMode property that gives you control over when to show the drop down button.  You have four options to choose from; Always, MouseOver, Focused, and Never.  Pick what fits your needs.

xamComboEditor DropDownButtonDisplayMode property

Oh, and guess what?!  Since the xamMultiColumnComboEditor derives from the xamComboEditor, all these features are available in the xamMultiColumnComboEditor too.  How sweet is that?!

Infragistics Template Gallery

You can now find a new set of Infragistics templates in the File - New Project dialog of Visual Studio. These templates are designed to help you get started with a functional, well-designed, and fully-styled application.  We have templates for all platforms that target all kinds of application scenarios such as dashboards, inventory management, project management, and Outlook inspired applications to name a few.

Infragistics Template Gallery

More templates will be added over time to address a wide range of application scenarios.  If you have any suggestions for templates you’d like to see, be sure to let me know or submit them directly to the Product Ideas website.

Additional Features

Besides all of the major controls and features I described above, we have also added a number of smaller, yet still important, features to some other controls.  Here are some of the other features that are worth highlighting in this post.

XamDataTree – ActiveDataItem

The xamDataTree got a property that everyone has been screaming for.  I would like to introduce you to the new xamDataTree.ActiveDataItem property.  You can now data bind a property in your ViewModel to the currently active item in the xamDataTree.  It is amazing what a single property can do for you.

xamDataTree ActiveDataItem binding

XamPivotGrid – KPI Support

The xamPivotGrid now gives you the ability to visualize and monitor your measured key performance indicators (KPI) directly from your online analytical processing (OLAP) cube.  You can easily define your very own custom KPI images by using simple data templates using pure XAML.  Go ahead, and feel free to visualize your product sales KPIs for each fiscal year.

xamPivotGrid KPI support

IME Support

We didn’t forget about our global, non-English speaking, customers.  We put a lot of effort into making sure that you can use our xamSyntaxEditor and xamRichTextEditor no matter what language you speak by adding IME support to both controls.  Don’t think we just slapped this feature on.  Heck no!  Our IME support embeds active compositions directly into the text area, rather than the less desirable ‘overlay window’ approach that is often seen.  This allows the user to watch the content being “re-flowed” as compositions are entered.  Now, no matter what keyboard language you are using, our IME editor will display language specific options for you to use while editing content within the xamSyntaxEditor and the xamRichTextEditor.

xamRichTextEditor and xamSyntaxEditor IME support

Excel Library – Protect Workbooks

Lastly, due to popular demand, we have added the ability to protect an Excel workbook to our Excel Library.  There have been a number of new properties and methods, and method overloads added to the Excel Library that give you full control over providing encrypt passwords and protecting workbooks.  Requiring a password to open a workbook is as easy as calling the Workbook.SetOpenPassword(password) method and passing in your password.  Want to write protect the workbook?  No problem, simply call the Workbook.SetFileWriteProtectionPassword(password) method ad provide your password.  Even if you created and protected the workbook in Microsoft Excel, our Excel Library will be able to open and unprotect that workbook if using a valid password.

Let’s Wrap this Baby Up!

Are you still with me?  Wow, that was a lot to cover.  Your eyeballs are probably exhausted from reading all that awesomeness!  Besides all of the great controls and new features I mentioned in this post, we are delivering much more that I didn’t get a chance to talk about.  We have tons of other smaller features, and bug fixes, and performance optimizations that we are part of our newest 14.1 release.

I hope you are as excited about this release as I am.  As you have probably noticed, things are changing at Infragistics, and your voice is louder than ever.  If you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.

If you are not using our WPF or Silverlight controls yet, remember that a free evaluation download is only a click away.

Lastly, when you do build something cool with our controls, please make sure to let us know.

New Video: Getting Started with the xamRichText Editor

$
0
0

Check out our latest how-to video! In just a few simple steps, you'll learn how to add rich-text document editing capabilities to your WPF and Silverlight applications using the xamRichText Editor.

[youtube] width="560" height="315" src="http://www.youtube.com/embed/J365wzrFWpw" [/youtube]

And for more great tutorials, be sure to subscribe to our YouTube channel.

Create Barcodes in iOS with Ease Using NucliOS (Obj-C & C#)

$
0
0

Introduction

With the recent release of NucliOS 2014 Volume 1 we've added an iOS control that can render 12 different barcode types. The graphic below shows all of the currently supported types.

codabar, code 39, code 39 extended, code 128, ean 8, ean 13, interleaved 2 of 5, planet, postnet, standard 2 of 5, upc-a, upc-e

Creating Barcodes

Creating a barcode with IGBarcodeView is super simple. You create an instance of IGBarcodeView like any other view, and then set the value to render.

Objective-C

CGRect barcodeRect = CGRectMake(0, 0, 300, 200);
IGBarcodeView *barcode = [[IGBarcodeView alloc] initWithFrame:barcodeRect barcodeType:IGBarcodeTypeCode128];
barcode.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[barcode setValue:@"Getting Started"];
[self.view addSubview:barcode];

C# (Xamarin.iOS)

RectangleF barcodeRect = new RectangleF(0, 0, 300, 200);
IGBarcodeView barcode = IGBarcodeView.CreateBarcodeFrame(IGBarcodeType.IGBarcodeTypeCode128, barcodeRect);
barcode.AutoresizingMask = UIViewAutoresizing.FlexibleWidth|UIViewAutoresizing.FlexibleHeight;
barcode.SetValue ("Getting Started");
this.View.Add (barcode);

The final result when the IGBarcodeView renders is shown below.

Creating Barcodes

Further Reference

In addition to setting the barcode value, the IGBarcodeView allows for customizing the font name used, text color and even the barcode color. Below are links to the API reference page as well as the developer's guide, NucliOS forums & NucliOS trial.

API Reference for IGBarcodeView - http://help.infragistics.com/iOS/2014.1/gridapi/Classes/IGBarcodeView.html
Developer's Guide Documentation for IGBarcodeView - http://help.infragistics.com/iOS/2014.1/?page=IGBarcodeView.html
NucliOS Forums - http://www.infragistics.com/community/forums/default.aspx?GroupID=92
NucliOS Trial - http://www.infragistics.com/products/ios/

By Torrey Betts

Create an iOS Flow Layout with Ease Using NucliOS (Obj-C & C#)

$
0
0

Introduction

With the release of NucliOS 2014 Volume 1 we've included a flow layout control (IGFlowLayoutView). This control allows you to easily create a dynamically sized list of items that can be scroll horizontal or vertically, similar to the UICollectionView. Like any other Infragistics control, this powerful flow layout can have its style fully customized, cells reordered or even resized.

Introduction

Creating a Flow Layout

The IGFlowLayoutView loads up its data in a similar data source protocol fashion as the IGGridView or Apple's own UITableView. The IGFlowLayoutView requires the implementation of 4 method found in the IGFlowLayoutDataSource protocol.

One of the many great things about the IGFlowLayoutView is that changes when adding, removing or updating cells can be animated. The code example below demonstrates this by calling an update on each cell to provide a histogram equalizer effect, similar to what you see in audio apps.

Objective-C

@interface igViewController () <IGFlowLayoutViewDataSource>
{
    IGFlowLayoutView *_flowLayoutView;
    NSInteger _totalItems;
}
@end

@implementation igViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    _totalItems = 10;
    _flowLayoutView = [[IGFlowLayoutView alloc] initWithFrame:self.view.bounds];
    _flowLayoutView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    _flowLayoutView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1.0];
    _flowLayoutView.transitionDuration = 0.75;
    _flowLayoutView.dataSource = self;
    _flowLayoutView.transform = CGAffineTransformMakeRotation(M_PI);
    [self.view addSubview:_flowLayoutView];
    [_flowLayoutView updateData];
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerTick) userInfo:nil repeats:YES];
}
- (CGSize)numberOfBlocksInViewport:(IGFlowLayoutView *)flowLayoutView
{
    CGSize result = CGSizeMake(_totalItems, 4);
    return result;
}
- (NSInteger)numberOfItemsInFlowLayoutView:(IGFlowLayoutView *)flowLayoutView
{
    return _totalItems;
}
- (CGSize)flowLayoutView:(IGFlowLayoutView *)flowLayoutView sizeForItemAtIndex:(NSInteger)index1
{
    CGSize result;
    IGFlowLayoutViewCell *cell = [_flowLayoutView cellAtIndex:index1];
    if (!cell)
        result = CGSizeMake(1, 1);
    else
        result = CGSizeMake(1, cell.tag);
    return result;
}
- (IGFlowLayoutViewCell *)flowLayoutView:(IGFlowLayoutView *)flowLayoutView cellAtIndex:(NSInteger)index1
{
    IGFlowLayoutViewCell *cell = [flowLayoutView dequeueReusableCellWithIdentifier:@"CELL"];
    if (!cell)
    {
        cell = [[IGFlowLayoutViewCell alloc] initWithReuseIdentifier:@"CELL"];
        cell.contentInset = UIEdgeInsetsMake(3, 3, 3, 3);
        cell.tag = 0;
        UIView *innerView = [[UIView alloc] init];
        innerView.layer.backgroundColor = [UIColor colorWithRed:238/255.0f green:197/255.0f blue:91/255.0f alpha:1.0f].CGColor;
        innerView.layer.cornerRadius = 10.0;
        innerView.layer.borderWidth = 3.0;
        innerView.layer.borderColor = [UIColor colorWithWhite:0.3 alpha:0.75].CGColor;
        cell.contentView = innerView;
    }
    return cell;
}
- (void)timerTick
{
    NSMutableArray *levels = [[NSMutableArray alloc] init];
    for (int k = 0; k < _totalItems; k++)
    {
        [levels addObject:[NSNumber numberWithInt:arc4random_uniform(4) + 1]];
    }
    for (NSUInteger j = 0; j < _totalItems; j++)
    {
        NSInteger levelForColumn = [[levels objectAtIndex:j] intValue];
        IGFlowLayoutViewCell *cell = [_flowLayoutView cellAtIndex:j];
        cell.tag = levelForColumn;
        [_flowLayoutView updateItemAtIndex:j];
    }
}
@end

C# (Xamarin.iOS)

public class FlowLayoutDataSource : IGFlowLayoutViewDataSource
{
      int _totalItems;
      public FlowLayoutDataSource(int TotalItems)
      {
            _totalItems = TotalItems;
      }
      public override SizeF NumberOfBlocksInViewport (IGFlowLayoutView flowLayoutView)
      {
            SizeF result = new SizeF(_totalItems, 4);
            return result;
      }
      public override int NumberOfItems (IGFlowLayoutView flowLayoutView)
      {
            return _totalItems;
      }
      public override SizeF SizeForItem (IGFlowLayoutView flowLayoutView, int index)
      {
            SizeF result;
            IGFlowLayoutViewCell cell = flowLayoutView.CellAtIndex (index);
            if (cell == null)
                  result = new SizeF (1, 1);
            else
                  result = new SizeF(1, cell.Tag);
            return result;
      }
      public override IGFlowLayoutViewCell CreateCell (IGFlowLayoutView flowLayoutView, int index)
      {
            IGFlowLayoutViewCell cell = flowLayoutView.DequeueReusableCell ("CELL") as IGFlowLayoutViewCell;
            if (cell == null)
            {
                  cell = new IGFlowLayoutViewCell ("CELL");
                  cell.ContentInset = new UIEdgeInsets (3, 3, 3, 3);
                  UIView innerView = new UIView ();
                  innerView.Layer.BackgroundColor = UIColor.FromRGBA (238 / 255.0f, 197 / 255.0f, 91 / 255.0f, 1.0f).CGColor;
                  innerView.Layer.CornerRadius = 10.0f;
                  innerView.Layer.BorderWidth = 3.0f;
                  innerView.Layer.BorderColor = UIColor.FromWhiteAlpha (0.3f, 0.75f).CGColor;
                  cell.ContentView = innerView;
            }
            return cell;
      }
}

public partial class FlowLayoutUpdateItem_CSViewController : UIViewController
{
      IGFlowLayoutView _flowLayoutView;
      int _totalItems;
      public FlowLayoutUpdateItem_CSViewController ()
      {
      }
      public override void ViewDidLoad ()
      {
            base.ViewDidLoad ();
            _totalItems = 10;
            _flowLayoutView = new IGFlowLayoutView ();
            _flowLayoutView.Frame = this.View.Bounds;
            _flowLayoutView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight|UIViewAutoresizing.FlexibleWidth;
            _flowLayoutView.BackgroundColor = UIColor.FromWhiteAlpha (0.3f, 0.75f);
            _flowLayoutView.TransitionDuration = 0.75f;
            _flowLayoutView.DataSource = new FlowLayoutDataSource(_totalItems);
            _flowLayoutView.Transform = CGAffineTransform.MakeRotation((float)Math.PI);
            this.View.Add (_flowLayoutView);
            _flowLayoutView.UpdateData ();
            NSTimer.CreateRepeatingScheduledTimer (1.0f, () => {
                  Random rnd = new Random();
                  List<int> levels = new List<int>();
                  for (int k = 0; k < _totalItems; k++)
                  {
                        levels.Add(rnd.Next(4) + 1);
                  }
                  for (int j = 0; j < _totalItems; j++)
                  {
                        int levelForColumn = levels[j];
                        IGFlowLayoutViewCell cell = _flowLayoutView.CellAtIndex(j);
                        cell.Tag = levelForColumn;
                        _flowLayoutView.UpdateItemAtIndex(j);
                  }
            });
      }
}

The final result when the IGFlowLayoutView renders is shown below.

Creating a Flow Layout

Further Reference

Below are links to the API reference page as well as the developer's guide, NucliOS forums & NucliOS trial.

API Reference for IGFlowLayoutView -http://help.infragistics.com/iOS/2014.1/gridapi/Classes/IGFlowLayoutView.html
Developer's Guide Documentation for IGFlowLayoutView - http://help.infragistics.com/iOS/2014.1/?page=IGFlowLayoutView.html
NucliOS Forums - http://www.infragistics.com/community/forums/default.aspx?GroupID=92
NucliOS Trial - http://www.infragistics.com/products/ios/

By Torrey Betts

The Off-Season

$
0
0

20110314160930!The_Matrix_Background

In the user experience profession, as in sports and school, there is often a time “between”… between projects, between seasons, between semesters. Call it down-time, the local minima between the peaks of craziness that is consulting or just a short breather before throwing yourself into another business you know little about, it is a special time. As I write this, it is early March, the snow is (finally) beginning to melt here in the northeast United States and there are 4 weeks till motorcycle racing season begins. Like most off-seasons, this one included taking things apart, cleaning them and putting them back together again, replacing old parts with new, and waiting. So much waiting. But to a racer, the off-season is more than cold, dark months spent preparing for the first race. It’s the time when you forget how difficult it is getting up at 4am to get to the track by 7 or how disappointing the final race of the season may have been or just how hot it feels when it’s 105°F in the shade.

Knowing the Path and Walking the Path

It’s a time of unbridled optimism. A time when last season’s unrealized dreams give way to the absolute certainty of next season’s goals. It’s a time when aspirations seem not only possible but inevitable. To paraphrase a line from the first Matrix movie, it’s when you let it all go - fear, doubt and disbelief - and free your mind. I’m serious. Ask me mid-season if I think I can drop a second off my best lap time and I’ll shrug doubtfully and stammer, “Maybe.” Ask me in March and I’ll tell you that 1 second is no problem but that my real goal is five. And I will say that with absolute conviction. The off-season is a time of magic.

The UX Experience

A career in user experience can feel like this. There are times during difficult projects when you’re just not sure you’re cut out for this job. When all your creativity and skill seem to count for little and you wonder if it’s too late to apply for that barista job at Starbucks. When the subject matter seems so complex that you’d swear the clients and users aren’t actually speaking English. These are the moments when we mumble, “I don’t know but I’ll try,” especially when asked if we can come up with an updated design by the end of the week. And yet, these projects end successfully, clients, users and management tend to go home happy, and we, if we’re lucky, get some time to regroup before the next project begins. And somehow, during that “between time”, it happens. The self-doubt fades. The self-confidence reasserts itself. You find yourself looking forward to the next project because you know, without a shadow of a doubt, that there is no challenge that you cannot overcome, no problem that you cannot solve. Magic.


Kevin Richardson has been working in the area of user experience for over 20 years. With an PhD in Cognitive Psychology, he has experience across business verticals in the fields of research, evaluation, design and management of innovative, user-centered solutions.

Kevin’s experience includes web sites, portals and dashboards, enterprise software and custom business applications for medical, pharmaceutical, communications, entertainment, energy, transportation and government users.

On the weekends, you can find Kevin on his motorcycle, riding for Infragistics Racing at a number of different racetracks on the East coast.

Sneak Peek: WYSIWYG Design in HTML5

$
0
0

One of the biggest barriers to getting started on your first HTML5 project is the lack of design time support to do page layout, set properties, and add events. With the Ignite UI Page Designer, you have the tools you need to drag & drop your way to a simple page or a full-blown SPA. All in the browser!

[youtube] width="560" height="315" src="http://www.youtube.com/embed/oWsROQwX2xs" [/youtube]

Sign up for early access to this new feature now by clicking here:

And be sure to subscribe to our YouTube channel for more videos just like this one.


Infragistics ASP.NET Release Notes - April: 14.1 Volume Release

$
0
0

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

ASP.NET 2014 Volume 1

XamRichTextEditor: Build your own Office Inspired Contextual Rich Text Format Toolbar

$
0
0

The xamRichTextEditor was release just over 5 months ago, and it has quickly becoming one of Infragistics’ most popular controls.  For those of you that don’t know about the xamRichTextEditor, it’s a highly customizable rich text editing control that provides functionality modeled after the features and behavior of Microsoft Word.  So imagine taking Microsoft Word, removing all the crap you don’t care about or need, and then making a control out of it.  Well, that’s exactly what we did.

Now that the xamRichTextEditor has been release, the number of feature requests are just pouring in.  Honestly, a lot of the features you are asking for can be built by you, the customer.  I get it; you want these feature built into the control so you don’t have to write them yourself.  The reality is, if you need a feature sooner rather than waiting 6 months for the next release, which there is no guarantee that the feature will even get implemented, then you are better off writing it yourself.  One such feature is a contextual mini toolbar similar to Microsoft Word’s toolbar.

Microsoft Word mini toolbar

This is actually one of the more popular features I have been hearing about.  I know that there is no way I can get this in the next 14.2 release, so I decided I will help you guys get started writing your own Office inspired contextual rich text format toolbar for the xamRichTextEditor.  This will be a very simple example, but will contain all the code required to make it work, and you will easily be able to add more options to your toolbar.

The Solution

Since we are all WPF developers here, we know that the best way to show a control on top of another control is to utilize the Adorner layer.  Now, the AdornerLayer is most possibly the most under utilized feature in WPF.  That’s too bad, because it is extremely powerful and flexible.  In order to show a custom control in the AdornerLayer we need to create a custom Adorner to act as our control host.  For this, I will use a very simple, yet functional, UIElementAdorner<T> class.

///<summary>
/// An adorner that can display one and only one UIElement.  
/// That element can be a panel, which contains multiple other elements.
/// The element is added to the adorner's visual and logical trees, enabling it to
/// particpate in dependency property value inheritance, amongst other things.
///</summary>
publicclassUIElementAdorner<T> : Adornerwhere T : UIElement
{
    #region Fields

    VisualCollection _visuals;
    T _child = null;
    double _offsetLeft = 0;
    double _offsetTop = 0;

    #endregion// Fields

    #region Constructor

    ///<summary>
    /// Constructor.
    ///</summary>
    ///<param name="adornedElement">The element to which the adorner will be bound.</param>
    public UIElementAdorner(UIElement adornedElement)
        : base(adornedElement)
    {
        _visuals = newVisualCollection(this);
    }

    #endregion// Constructor

    #region Properties

    #region Child

    ///<summary>
    /// Gets/sets the child element hosted in the adorner.
    ///</summary>
    public T Child
    {
        get { return _child; }
        set
        {
            if (value == _child)
                return;

            if (_child != null)
            {
                if (_visuals.Contains(_child))
                    _visuals.Remove(_child);
            }

            _child = value;

            if (_child != null)
            {
                var visualParentAdorner = VisualTreeHelper.GetParent(_child) asUIElementAdorner<T>;
                if (visualParentAdorner != null)
                    visualParentAdorner._visuals.Remove(_child);

                if (!_visuals.Contains(_child))
                    _visuals.Add(_child); ;
            }
        }
    }

    #endregion// Properties

    #region GetDesiredTransform

    publicoverrideGeneralTransform GetDesiredTransform(GeneralTransform transform)
    {
        GeneralTransformGroup result = newGeneralTransformGroup();
        result.Children.Add(base.GetDesiredTransform(transform));
        result.Children.Add(newTranslateTransform(_offsetLeft, _offsetTop));
        return result;
    }

    #endregion// GetDesiredTransform

    #region OffsetLeft

    ///<summary>
    /// Gets/sets the horizontal offset of the adorner.
    ///</summary>
    publicdouble OffsetLeft
    {
        get { return _offsetLeft; }
        set
        {
            _offsetLeft = value;
            UpdateLocation();
        }
    }

    #endregion// OffsetLeft

    #region SetOffsets

    ///<summary>
    /// Updates the location of the adorner in one atomic operation.
    ///</summary>
    publicvoid SetOffsets(double left, double top)
    {
        _offsetLeft = left;
        _offsetTop = top;
        this.UpdateLocation();
    }

    #endregion// SetOffsets

    #region OffsetTop

    ///<summary>
    /// Gets/sets the vertical offset of the adorner.
    ///</summary>
    publicdouble OffsetTop
    {
        get { return _offsetTop; }
        set
        {
            _offsetTop = value;
            UpdateLocation();
        }
    }

    #endregion// OffsetTop

    #endregion// Public Interface

    #region Protected Overrides

    protectedoverrideSize MeasureOverride(Size constraint)
    {
        if (_child == null)
            returnbase.MeasureOverride(constraint);

        _child.Measure(constraint);
        return _child.DesiredSize;
    }

    protectedoverrideSize ArrangeOverride(Size finalSize)
    {
        if (_child == null)
            returnbase.ArrangeOverride(finalSize);

        _child.Arrange(newRect(finalSize));
        return finalSize;
    }

    protectedoverrideVisual GetVisualChild(int index)
    {
        return _visuals[index];
    }

    protectedoverrideint VisualChildrenCount
    {
        get { return _visuals.Count; }
    }

    #endregion// Protected Overrides

    #region Private Helpers

    void UpdateLocation()
    {
        AdornerLayer adornerLayer = base.Parent asAdornerLayer;
        if (adornerLayer != null)
            adornerLayer.Update(base.AdornedElement);
    }

    #endregion// Private Helpers
}

Now that we have our Adorner that will host our Office inspired contextual rich text format mini toolbar control, we need to find a way to control when it shows, where it shows, and when it hides.  To achieve this, we need to create some type of manager that we can attach to any xamRichTextEditor instance.  This is why we will create a class called the RichTextFormatBarManager.  This class will be responsible for showing, hiding, and positioning the mini toolbar in the xamRichTextEditor.  This manager will have to have some knowledge of the mini toolbar we will be using.  It will need to be able to tell the mini toolbar which xamRichTextEditor instance to manipulate, and it will need to tell the mini toolbar when to update the button state for newly selected text.  To achive this, and remain decoupled from other implementations, we will need to use an interface named IRichTextFormatBar.

publicinterfaceIRichTextFormatBar
{
    ///<summary>
    /// Represents the RichTextBox that will be the target for all text manipulations in the format bar.
    ///</summary>
    XamRichTextEditor Target { get; set; }

    ///<summary>
    /// Represents the method that will be used to update the format bar values based on the current selection.
    ///</summary>
    void UpdateVisualState();
}

Now that we have defined our IRichTextFormatBar, we have what we need to create the RichTextFormatBarManager.

publicclassRichTextBoxFormatBarManager : DependencyObject
{
    #region Members

    privateXamRichTextEditor _richTextBox;
    privateUIElementAdorner<Control> _adorner;
    privateIRichTextFormatBar _toolbar;

    #endregion//Members

    #region Properties

    publicstaticreadonlyDependencyProperty FormatBarProperty = DependencyProperty.RegisterAttached("FormatBar", typeof(IRichTextFormatBar), typeof(RichTextBoxFormatBarManager), newPropertyMetadata(null, OnFormatBarPropertyChanged));
    publicstaticvoid SetFormatBar(UIElement element, IRichTextFormatBar value)
    {
        element.SetValue(FormatBarProperty, value);
    }
    publicstaticIRichTextFormatBar GetFormatBar(UIElement element)
    {
        return (IRichTextFormatBar)element.GetValue(FormatBarProperty);
    }

    privatestaticvoid OnFormatBarPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var rtb = d asXamRichTextEditor;
        if (rtb == null)
            thrownewException("A FormatBar can only be applied to a xamRichTextEditor.");

        RichTextBoxFormatBarManager manager = newRichTextBoxFormatBarManager();
        manager.AttachFormatBarToRichtextBox(rtb, e.NewValue asIRichTextFormatBar);
    }

    publicbool IsAdornerVisible
    {
        get { return _adorner.Visibility == Visibility.Visible; }
    }

    #endregion//Properties

    #region Event Handlers

    void RichTextBox_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (e.ChangedButton == MouseButton.Left && e.LeftButton == MouseButtonState.Released)
        {
            if (_richTextBox.Selection.Text.Length > 0 && !String.IsNullOrWhiteSpace(_richTextBox.Selection.Text))
                ShowAdorner();
            else
                HideAdorner();

            e.Handled = true;
        }
        else
            HideAdorner();
    }

    void RichTextBox_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        //if the mouse moves outside the richtextbox bounds hide the adorner
        //though this deosn't always work, especially if the user moves the mouse very quickly.
        //need to find a better solution, but this will work for now.
        Point p = e.GetPosition(_richTextBox);
        if (p.X <= 5.0 || p.X >= _richTextBox.ActualWidth - 5 || p.Y <= 3.0 || p.Y >= _richTextBox.ActualHeight - 3)
            HideAdorner();
    }

    #endregion//Event Handlers

    #region Methods

    ///<summary>
    /// Attaches a FormatBar to a RichtextBox
    ///</summary>
    ///<param name="richTextBox">The RichtextBox to attach to.</param>
    ///<param name="formatBar">The Formatbar to attach.</param>
    privatevoid AttachFormatBarToRichtextBox(XamRichTextEditor richTextBox, IRichTextFormatBar formatBar)
    {
        _richTextBox = richTextBox;
        _richTextBox.MouseLeftButtonUp += RichTextBox_MouseLeftButtonUp;
        _richTextBox.PreviewMouseMove += RichTextBox_PreviewMouseMove;

        _adorner = newUIElementAdorner<Control>(_richTextBox);
        formatBar.Target = _richTextBox;
        _toolbar = formatBar;
    }

    ///<summary>
    /// Shows the FormatBar
    ///</summary>
    void ShowAdorner()
    {
        if (_adorner.Visibility == Visibility.Visible)
            return;

        VerifyAdornerLayer();

        Control adorningEditor = _toolbar asControl;

        if (_adorner.Child == null)
            _adorner.Child = adorningEditor;

        _toolbar.UpdateVisualState(); //let's tell the toolbar to update it's visual state

        _adorner.Visibility = Visibility.Visible;

        PositionFormatBar(adorningEditor);
    }

    ///<summary>
    /// Positions the FormatBar so that is does not go outside the bounds of the RichTextBox or covers the selected text
    ///</summary>
    ///<param name="adorningEditor"></param>
    privatevoid PositionFormatBar(Control adorningEditor)
    {
        Point mousePosition = Mouse.GetPosition(_richTextBox);

        double left = mousePosition.X;
        double top = (mousePosition.Y - 15) - adorningEditor.ActualHeight;

        //top
        if (top < 0)
        {
            top = mousePosition.Y + 10;
        }

        //right boundary
        if (left + adorningEditor.ActualWidth > _richTextBox.ActualWidth - 20)
        {
            left = left - (adorningEditor.ActualWidth - (_richTextBox.ActualWidth - left));
        }

        _adorner.SetOffsets(left, top);
    }

    ///<summary>
    /// Ensures that the IRichTextFormatBar is in the adorner layer.
    ///</summary>
    ///<returns>True if the IRichTextFormatBar is in the adorner layer, else false.</returns>
    bool VerifyAdornerLayer()
    {
        if (_adorner.Parent != null)
            returntrue;

        AdornerLayer layer = AdornerLayer.GetAdornerLayer(_richTextBox);
        if (layer == null)
            returnfalse;

        layer.Add(_adorner);
        returntrue;
    }

    ///<summary>
    /// Hides the IRichTextFormatBar that is in the adornor layer.
    ///</summary>
    void HideAdorner()
    {
        if (IsAdornerVisible)
        {
            _adorner.Visibility = Visibility.Collapsed;
        }
    }

    #endregion//Methods
}

Now that we have a manager, we need to create a mini toolbar that will contain all the functions such as Bold, Italic, Underline, and other font options.  You could create an actual custom control, but for our purposes, I will use a simple UserControl.  I’ll name it RichTextFormatBar.xaml.  Let’s start with the View.  We won’t do anything complicated.  Just add a few combo boxes and buttons.  Of course to make applying the styles to the selected text of the xamRichTextEditor easy, we will use simple commands.  For the font family, and font size, we will have to handle some events and manually set the values.  No big deal though.  It’s super easy to do.

<UserControl x:Class="xamRichTextEditorOfficeFormatToolbar.RichTextFormatBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="Transparent"
             IsTabStop="False"
             x:Name="_window">
    <UserControl.Effect>
        <DropShadowEffect BlurRadius="5" Opacity=".25" />
    </UserControl.Effect>

    <UserControl.Resources>
        
        <Style TargetType="{x:Type Separator}" BasedOn="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"/>

        <ControlTemplate x:Key="ThumbControlTemplate" TargetType="{x:Type Thumb}">
            <Border Background="Transparent" Cursor="Hand" ToolTip="Click to Drag">
                <StackPanel VerticalAlignment="Center" Width="75">
                    <Line SnapsToDevicePixels="True" Stretch="Fill" StrokeDashArray="1,2" StrokeThickness="1" X1="0" X2="1" Margin=".5" >
                        <Line.Stroke>
                            <SolidColorBrush Color="Gray" />
                        </Line.Stroke>
                    </Line>
                    <Line SnapsToDevicePixels="True" Stretch="Fill" StrokeDashArray="1,2" StrokeThickness="1" X1="0" X2="1" Margin=".5">
                        <Line.Stroke>
                            <SolidColorBrush Color="Gray" />
                        </Line.Stroke>
                    </Line>
                    <Line SnapsToDevicePixels="True" Stretch="Fill" StrokeDashArray="1,2" StrokeThickness="1" X1="0" X2="1" Margin=".5">
                        <Line.Stroke>
                            <SolidColorBrush Color="Gray" />
                        </Line.Stroke>
                    </Line>
                </StackPanel>
            </Border>
        </ControlTemplate>

        <SolidColorBrush x:Key="MouseOverBorderBrush" Color="#FFFFB700" />
        <LinearGradientBrush x:Key="MouseOverBackgroundBrush" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Offset="0" Color="#FFFEFBF4" />
            <GradientStop Offset="0.19" Color="#FFFDE7CE" />
            <GradientStop Offset="0.39" Color="#FFFDDEB8" />
            <GradientStop Offset="0.39" Color="#FFFFCE6B" />
            <GradientStop Offset="0.79" Color="#FFFFDE9A" />
            <GradientStop Offset="1" Color="#FFFFEBAA" />
        </LinearGradientBrush>

        <SolidColorBrush x:Key="CheckedBorderBrush" Color="#FFC29B29" />
        <LinearGradientBrush x:Key="CheckedBackgroundBrush" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Offset="0" Color="#FFFFDCA0" />
            <GradientStop Offset="0.18" Color="#FFFFD692" />
            <GradientStop Offset="0.39" Color="#FFFFC45D" />
            <GradientStop Offset="1" Color="#FFFFD178" />
        </LinearGradientBrush>

        <SolidColorBrush x:Key="PressedBorderBrush" Color="#FFC29B29" />
        <LinearGradientBrush x:Key="PressedBackgroundBrush" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Offset="0" Color="#FFE3C085" />
            <GradientStop Offset="0.19" Color="#FFF4CC89" />
            <GradientStop Offset="0.36" Color="#FFF5C777" />
            <GradientStop Offset="0.36" Color="#FFF5BB56" />
            <GradientStop Offset="0.79" Color="#FFF4CE9A" />
            <GradientStop Offset="1" Color="#FFF3E28D" />
        </LinearGradientBrush>

        <Style x:Key="FormatBarToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Height" Value="22" />
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="ToolTipService.InitialShowDelay" Value="900"/>
            <Setter Property="ToolTipService.ShowDuration" Value="20000"/>
            <Setter Property="ToolTipService.BetweenShowDelay" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid SnapsToDevicePixels="True">
                            <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2"/>
                            <Border x:Name="MiddleBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="2">
                                <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="2" Padding="{TemplateBinding Padding}">
                                    <StackPanel x:Name="StackPanel" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                                        <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Margin="1"
                                           RenderOptions.BitmapScalingMode="NearestNeighbor"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                    </StackPanel>
                                </Border>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="OuterBorder" Value="{StaticResource MouseOverBackgroundBrush}"/>
                                <Setter Property="BorderBrush" TargetName="OuterBorder" Value="{StaticResource MouseOverBorderBrush}"/>
                                <Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
                            </Trigger>

                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                                <Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="#FF9E9E9E"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" TargetName="OuterBorder" Value="{StaticResource CheckedBackgroundBrush}"/>
                                <Setter Property="BorderBrush" TargetName="OuterBorder" Value="{StaticResource CheckedBorderBrush}"/>
                                <Setter Property="BorderBrush" TargetName="InnerBorder">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFE7CBAD" Offset="0"/>
                                            <GradientStop Color="#FFF7D7B5" Offset="0.1"/>
                                            <GradientStop Color="#FFFFD38C" Offset="0.36"/>
                                            <GradientStop Color="#FFFFC75A" Offset="0.36"/>
                                            <GradientStop Color="#FFFFEFA5" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="OuterBorder" Value="{StaticResource PressedBackgroundBrush}"/>
                                <Setter Property="BorderBrush" TargetName="OuterBorder" Value="{StaticResource PressedBorderBrush}"/>
                                <Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
                            </Trigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsChecked" Value="True"/>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="MiddleBorder">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#40FFFEFE" Offset="0"/>
                                            <GradientStop Color="#40FFFEFE" Offset="0.39"/>
                                            <GradientStop Color="#20FFCE68" Offset="0.39"/>
                                            <GradientStop Color="#20FFCE68" Offset="0.69"/>
                                            <GradientStop Color="#10FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Border CornerRadius="3" BorderThickness="1" BorderBrush="Gray" Background="WhiteSmoke">
        <Grid Margin="5,0,5,5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Thumb x:Name="_dragWidget" Height="10"
                   Template="{StaticResource ThumbControlTemplate}"
                   DragDelta="DragWidget_DragDelta"/>

            <StackPanel Grid.Row="1">
                <StackPanel Orientation="Horizontal">
                    <ComboBox x:Name="_cmbFontFamilies" IsEditable="True" Width="100"
                              SelectionChanged="FontFamily_SelectionChanged"
                              ToolTip="Font Family"/>

                    <ComboBox x:Name="_cmbFontSizes" IsEditable="True" Width="43"
                              SelectionChanged="FontSize_SelectionChanged"
                              ToolTip="Font Size"/>

                </StackPanel>

                <StackPanel Orientation="Horizontal" Margin="0,3,0,0">
                    <ToggleButton x:Name="_btnBold" Style="{StaticResource FormatBarToggleButtonStyle}"
                                Command="EditingCommands.ToggleBold" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                  ToolTip="Bold">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/Bold16.png" />
                    </ToggleButton>
                    <ToggleButton x:Name="_btnItalic" Style="{StaticResource FormatBarToggleButtonStyle}"
                                  Command="{x:Static EditingCommands.ToggleItalic}" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                  ToolTip="Italic">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/Italic16.png" />
                    </ToggleButton>
                    <ToggleButton x:Name="_btnUnderline" Style="{StaticResource FormatBarToggleButtonStyle}"
                                  Command="{x:Static EditingCommands.ToggleUnderline}" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                  ToolTip="Underline">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/Underline16.png" />
                    </ToggleButton>

                    <Separator />

                    <RadioButton x:Name="_btnAlignLeft" Style="{StaticResource FormatBarToggleButtonStyle}"
                                 Command="{x:Static EditingCommands.AlignLeft}" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                 ToolTip="Align Left">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/LeftAlign16.png" />
                    </RadioButton>
                    <RadioButton x:Name="_btnAlignCenter" Style="{StaticResource FormatBarToggleButtonStyle}"
                                 Command="{x:Static EditingCommands.AlignCenter}" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                 ToolTip="Align Center">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/CenterAlign16.png" />
                    </RadioButton>
                    <RadioButton x:Name="_btnAlignRight" Style="{StaticResource FormatBarToggleButtonStyle}"
                                 Command="{x:Static EditingCommands.AlignRight}" CommandTarget="{Binding ElementName=_window, Path=Target}"
                                 ToolTip="Align Right">
                        <Image Source="/xamRichTextEditorOfficeFormatToolbar;component/Images/RightAlign16.png" />
                    </RadioButton>

                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>

</UserControl>

Now, we need to make sure we are populating the font names and sizes, as well as updating the state of the buttons whenever the IRichTextFormatBar.UpdateVisualState method is called.

///<summary>
/// Interaction logic for RichTextFormatBar.xaml
///</summary>
publicpartialclassRichTextFormatBar : UserControl, IRichTextFormatBar
{
    bool _updatingVisualState;

    #region Properties

    publicstaticdouble[] FontSizes
    {
        get
        {
            returnnewdouble[] {
                3.0, 4.0, 5.0, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5,
                10.0, 10.5, 11.0, 11.5, 12.0, 12.5, 13.0, 13.5, 14.0, 15.0,
                16.0, 17.0, 18.0, 19.0, 20.0, 22.0, 24.0, 26.0, 28.0, 30.0,
                32.0, 34.0, 36.0, 38.0, 40.0, 44.0, 48.0, 52.0, 56.0, 60.0, 64.0, 68.0, 72.0, 76.0,
                80.0, 88.0, 96.0, 104.0, 112.0, 120.0, 128.0, 136.0, 144.0
                };
        }
    }

    publicstaticreadonlyDependencyProperty TargetProperty = DependencyProperty.Register("Target", typeof(XamRichTextEditor), typeof(RichTextFormatBar));
    publicXamRichTextEditor Target
    {
        get { return (XamRichTextEditor)GetValue(TargetProperty); }
        set { SetValue(TargetProperty, value); }
    }

    #endregion//Properties

    #region Ctor

    public RichTextFormatBar()
    {
        InitializeComponent();

        _cmbFontFamilies.ItemsSource = Fonts.SystemFontFamilies.ToList().Select(x => x.Source);
        _cmbFontSizes.ItemsSource = FontSizes;
    }

    #endregion//Ctor

    #region Events

    privatevoid DragWidget_DragDelta(object sender, DragDeltaEventArgs e)
    {
        ProcessMove(e);
    }

    privatevoid FontFamily_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count == 0 || _updatingVisualState)
            return;

        var font = e.AddedItems[0];
        Target.Selection.ApplyFont(new Infragistics.Documents.RichText.RichTextFont(font.ToString()));
    }

    privatevoid FontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count == 0 || _updatingVisualState)
            return;

        var size = (double)e.AddedItems[0];
        Target.Selection.ApplyFontSize(size);
    }

    #endregion//Events

    #region Methods

    ///<summary>
    /// Processes the dragging of the RichTextFormatBar
    ///</summary>
    privatevoid ProcessMove(DragDeltaEventArgs e)
    {
        AdornerLayer layer = AdornerLayer.GetAdornerLayer(Target);
        UIElementAdorner<Control> adorner = layer.GetAdorners(Target)[0] asUIElementAdorner<Control>;
        adorner.SetOffsets(adorner.OffsetLeft + e.HorizontalChange, adorner.OffsetTop + e.VerticalChange);
    }

    ///<summary>
    /// Updates the visual state of the buttons and other tools of the RichTextFormatBar
    ///</summary>
    publicvoid UpdateVisualState()
    {
        _updatingVisualState = true;

        DocumentSpan documentSpan = Target.Selection == null ? newDocumentSpan(0, 0) : Target.Selection.DocumentSpan;
        var settings = Target.Document.GetCommonCharacterSettings(documentSpan);
        UpdateSelectedFontFamily(settings);
        UpdateSelectedFontSize(settings);

        UpdateBoldState(settings);
        UpdateItalicState(settings);
        UpdateUnderlineState(settings);

        UpdateParagraphAlignmentState(documentSpan);

        _updatingVisualState = false;
    }

    ///<summary>
    /// Updates the selected item in the font family list.
    ///</summary>
    void UpdateSelectedFontFamily(CharacterSettings settings)
    {
        if (settings.FontSettings != null)
        {
            _cmbFontFamilies.SelectedValue = (settings.FontSettings.Ascii.HasValue && !string.IsNullOrWhiteSpace(settings.FontSettings.Ascii.Value.Name)) ? settings.FontSettings.Ascii.Value.Name : "Arial";
        }
    }

    ///<summary>
    /// Updates the selected item in the font list.
    ///</summary>
    void UpdateSelectedFontSize(CharacterSettings settings)
    {
        _cmbFontSizes.SelectedValue = settings.FontSize.HasValue ? settings.FontSize.Value.Points : 12.0;
    }

    ///<summary>
    /// Updates the state of the bold button
    ///</summary>
    void UpdateBoldState(CharacterSettings settings)
    {
        UpdateToggleButtonCheckedState(_btnBold, settings.Bold);
    }

    ///<summary>
    /// Updates the state of the italic button
    ///</summary>
    void UpdateItalicState(CharacterSettings settings)
    {
        UpdateToggleButtonCheckedState(_btnItalic, settings.Italics);
    }

    ///<summary>
    /// Updates the state of the underline button
    ///</summary>
    void UpdateUnderlineState(CharacterSettings settings)
    {
        if (settings.UnderlineType.HasValue)
            UpdateToggleButtonCheckedState(_btnUnderline, settings.UnderlineType.Value != UnderlineType.None);
    }

    ///<summary>
    /// Updates the state of the paragraph alignment buttons
    ///</summary>
    void UpdateParagraphAlignmentState(DocumentSpan documentSpan)
    {
        ParagraphSettings paragraphSettings = Target.Document.GetCommonParagraphSettings(documentSpan);
        if (paragraphSettings.ParagraphAlignment.HasValue)
        {
            var value = paragraphSettings.ParagraphAlignment.Value;
            switch (value)
            {
                caseParagraphAlignment.Start:
                    {
                        UpdateToggleButtonCheckedState(_btnAlignLeft, true);
                        break;
                    }
                caseParagraphAlignment.Center:
                    {
                        UpdateToggleButtonCheckedState(_btnAlignCenter, true);
                        break;
                    }
                caseParagraphAlignment.End:
                    {
                        UpdateToggleButtonCheckedState(_btnAlignRight, true);
                        break;
                    }
            }
        }
    }

    ///<summary>
    /// Updates the visual state of a toggle button.
    ///</summary>
    ///<param name="button">The button.</param>
    ///<param name="formattingProperty">The formatting property.</param>
    ///<param name="expectedValue">The expected value.</param>
    void UpdateToggleButtonCheckedState(ToggleButton button, bool? value)
    {
        button.IsChecked = value.HasValue ? value.Value : false;
    }

    #endregion//Methods
}

Now that we have all that finished, we need to find a way to attach this cool new mini toolbar to any xamRichTextEditor instance.  Luckily, we are experienced WPF developers and now the best mechanism to attach objects to a control is to use either a Behavior, or an AttachedProperty.  Well, for this example, we will use an Attached property to attach our RichTextFormatBarManager object to a xamRichTExtEditor instance.  You might have already noticed this property defined in the RichTextFormatBarManager class.  The AttachedProperty is called FormatBar.  So how do we use all this code we wrote?  Simple!  Create a View, don’t forget to add a namespace for our toolbar stuff, and then attached a new toolbar instance to a xamRichTExtEditor using the FormatBar AttachedProperty.  Like this:

<Window x:Class="xamRichTextEditorOfficeFormatToolbar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ig="http://schemas.infragistics.com/xaml"
        xmlns:local="clr-namespace:xamRichTextEditorOfficeFormatToolbar"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <ig:XamRichTextEditor>
            <local:RichTextBoxFormatBarManager.FormatBar>
                <local:RichTextFormatBar />
            </local:RichTextBoxFormatBarManager.FormatBar>
        </ig:XamRichTextEditor>

    </Grid>
</Window>

Now run the application, and start typing some text.  Highlight some text and BAM; the rich text mini toolbar appears.  Now you can start applying various rich text formatting options to the selected text.

xamRichTextEditor Office inspired rich text format mini toolbar

That’s all there is to it.  Download the source code, and start playing around with it to make it fit your application needs.  Be sure to let me know if this was useful to you, and I always love to hear about how my samples are used in the real world.  As always, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

Releasing Version 3 of Indigo Studio w/ Reusable Custom UI Elements

$
0
0

We are super excited to finally release reusable design elements! We call them Screenparts, which quite literally means reusable parts of your screen.

After we released version 2, the Indigo Studio team has continued to enhance version 2 through updates. And this continues to be our model; consistently adding value to the product you purchased. If our perpetual licensing model was not clear before, it should be clearer now. All our users who purchased an Indigo Studio license for version 2 get a free upgrade to version 3! And that means you can update and use screenparts as of today.

Learn more about how screenparts are related to screens and storyboards

Five things you should know about Screenparts

In this post I will discuss some of the core capabilities offered with Screenparts. In other words, the new and shiny bits!

1. Easily Create New Screenparts

Screenparts are designed pretty much exactly like screens. Instead of screen, select Screenpart from the new menu. You can also right-click on the project tab and create one from the context menu. Once you have the Screenpart designer fired up, add UI elements to the design surface to design your Screenpart.

The approach described above implies that you know upfront what needs to be reusable (i.e., Screenpart). But we imagine the following workflow to be equally, if not more, common. You are in the thick of designing your screens . You finish one (e.g. Screen A) and proceed to create a new screen (e.g., Screen B) as a result of navigate to interaction. And right then you realize that there are UI elements that you customized on screen A, which you also need on Screen B. Of course you can copy and paste these elements, but that entails a maintenance burden during design iteration.

Creating and Editing Screenparts

Instead of copying and pasting directly, select the UI elements you need, and Convert to Screenpart first. This automatically adds the selected elements to the Screenpart tab in your toolbox. At the same time this replaces the selected UI elements with a Screenpart instance. Copy paste this instance instead. With this approach, you can change the source Screenpart to update all its instances on different screens. Maintenance burden be gone!

Watch Video on Creating and Customizing Screenparts

2. You can customize Screenpart Instances

Any time you add a Screenpart to a screen, Indigo creates an instance of the source Screenpart. This approach provides you with complete creative control on how the Screenpart instance looks and behaves on a particular screen. Want to change the color, size or position of something? Simply double click to edit the instance and make changes you desire. You can just as easily reset it to match the source Screenpart.

Editing Screenpart Instance

3. Design Screenparts to behave like Interactive Widgets

You can package visuals and interactions to be reusable as screenparts. Indigo Studio achieves this with the help of screenpart states which are created on the source screenpart. Design Screenpart states exactly like you do for screens. When you run the prototype, users will be able to interact with the interactions contained inside screenpart. For example, simulating a creating a new account experience inside a sign in window.

Watch Video on Screenparts as Interactive Widgets

4. Organizing your Screenparts with Categories

Right-Clicking on screenparts in your screenpart tab reveals the context menu. Use the add/edit screenpart category option to create new categories or add screenparts to existing categories. You can also add a screenpart to multiple categories.

Watch video on Organizing Screenparts

5. Exporting/Sharing Screenpart Libraries

Once you have a nice little screenpart library created, you can use it on other projects you have. Select the screenparts you need in the project home, and export. Export as Indigo Files & Assets and point the export location to a different Indigo Studio Project. If you have any images inside your screenpart, we include them in the assets folder.

When you create and save Screenparts, we automatically create a new subfolder under your project folder called "Screenparts." This should make it easier for you to locate all the screenparts in your project. You can of course filter your project home/gallery view to show just screenparts.

You can also create a zip file to email this library to someone on your team. For now, each project will need its own screenpart library to work correctly. As in, it should be available inside the folder for the Indigo project you are working on.

Watch video on Exporting Screenparts

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

  • If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
  • If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option. 
     Checking for Updates

Starting a New Trial for Version 3

If you have tried version 2 in the past, and used up your 30-day trial, you can still start a new trial for this major version for another 30 days! You can do this in the following two ways:

  • If you have days remaining in your 30-day trial period for the current version (e.g., version 2, update 5), use the check for update option inside the app. You will be able to start a fresh trial for the next major version (e.g., Version 3)
  • If you have used up the 30 day trial for the previous major version (e.g., Version 2), simply download and install Indigo Studio from our website (http://indigo.infragistics.com). This will also allow you to start a new trial.

If you already own an Indigo Studio License for a specific version, you can trial the latest version and then go back to my licensed version.

As explained in our perpetual license model, there is a good chance that version 3 is a free upgrade. We check this for you when you try to update from inside the app and will inform you accordingly.

If your license does not allow a free upgrade, you can still start a new trial for the latest version! When your 30-day period runs out, simply install the older version again. You can grab the installer for the version you own from my keys/downloads section on our website. You won't even have to re-enter your license key in most cases.

Please note: Screenparts are exclusive to Indigo Studio version 3 and above, so if you go back to an older version, screens that use Screenparts will not be compatible.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

iOS Quick Tip: Take a ScreenShot at Different Resolutions

$
0
0
I've talked about all the tricks you can do with images before , even about how to take screen shots of a particular UIView. However, today i'm going to dive into that just a little bit more and show you how you can take that screen shot at different resolutions. Basically, not much will be different from our basic screen shot method: +(UIImage*)screenShotOf:(UIView*)view { UIGraphicsBeginImageContext(view.frame.size); [view.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *...(read more)

Relating Screenparts to Storyboards and Screens in Indigo Studio

$
0
0

Screenpart was always a critical piece of our prototyping vision for Indigo Studio. Ever since we decided to build Indigo Studio, screenpart was always there, sharing the stage with storyboards and screens. The following graphic tries to summarize the inter-relationship:

Relating storyboard, screen and screenpart

We love the UX process, and it exists for a reason. As designers, what we discover first is the story-of-use and stories that are desired. I tend to agree with Thomas Erickson's explanation. He explains it quite well, especially the part about story-gathering as an early step in the design process. Furthering this view, I have always seen stories as not bounded by the application, but more about how the application interacts in the real world. We design it such that the application (prototype) participates in this story, and in doing so contributes to a better overall experience. And the only way we know this happens is by evaluating the prototypes we create with users, learning and iterating. We need to validate whether we are indeed building the right experience, and hence Indigo Studio for Interaction Prototyping!

Storyboard

In Indigo Studio, storyboard is one way to represent a broad vision for your prototype. It blends UI prototypes (screens) inside a real world context (scenes). More literally, you can add UI screens that you designed as a step in your story or add it inside any scene that shows a device context. The toolbox on the storyboard designer shows two tabs consisting of scenes and screens to help depict stories.

Storyboard Designer

Screen

Screens, as we have defined it, are used to design your wireframes, pages, windows, pop-ups--whatever you want to call your UI-Views. These serve as the building block for your prototype. And if you are familiar with Indigo Studio, you can also create states of a particular screen when you add an interaction. And by using screen states, you never have to re-draw or maintain all your UI-views. All you need is to design the changes you would like to see based on the user interaction. To support designing UI-Screens, the toolbox on the screen-designer shows two tabs, UI Elements and Screenparts.

Screen Designer

Screenpart

Screenparts, as we mentioned before are reusable parts of your screens. These increase your efficiency, by letting you create custom UI elements once, and then reuse them on any other screen in your project. You can bundle up reusable interactions as well as visuals, and even use them as masters. The toolbox on the Screenpart-designer shows the UI elements, which you can use to create a Screenpart.

Learn more about using Screenparts

Screenpart Designer

Prototyping using Indigo Studio

To summarize, Screenparts can be added inside screens, and screens can be added inside of storyboards. And once this is done, you can continue to make changes to the screen to automatically update the storyboard, or make changes to the source Screenpart and automatically update the Screens.

Indigo Studio does not force you use to adopt a particular design workflow. By this we mean that you can take any of the three paths offered in the NEW menu. You can start designing any of the three--storyboard, screen or screenpart. Even better if you create these just when you need them in your workflow. As you design screens, these automatically show up in the storyboard designer toolbox. As you design screenparts, these automatically show up under the screenparts tab in your screen-designer. We aspire to help keep you focused on your design story and your prototype. Design bits when you need them!

I hope this explanation along with the graphic above helps relate the three members in Indigo Studio, and their reason to exist. Now go design something!

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

  • If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
  • If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option. Checking for Updates

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

Ignite UI + AngularJS: Now in Preview

$
0
0

We are excited to announce that AngularJS support for Ignite UI is now available in a preview state!

You can work with the running samples as well as get your hand on the code on GitHub. We'd love to have you clone the code and tell us what you think.

Before you get started, here's a quick primer on what's happening when you use these directives.

Using the Directives

You can now use Ignite UI controls in your Angular pages and interact with the controls as Angular directives. For instance, in order to use the igGrid you can use the following syntax to declare a very bare-bones grid on the page:

...where northwind is an object array that exists on the controller's $scope and could be a result of an async request, but in our samples its just local data for now. The resulting grid looks something like this:

As the Angular application is loaded, the directives are recognized and processed allowing you to declare a grid with this simple syntax. So by declaring the control this way, the grid is instantiated and the current scope's northwind member is set to the grid's data source.

Now the above example is borderline interesting, but what about something a bit more involved which sets up some custom columns and uses some advanced features? This is the markup used in the grid sample:

Here you can see how even a relatively complex grid is created in a highly-readable fashion using custom HTML syntax - all thanks to the directive. Notice how you have full flexibility to define all the same custom column settings and feature values as you would had you created the grid in traditional jQuery code or via the MVC wrappers.

Full Two-Way Data Binding

One of the most compelling features of Angular itself is the two-way data binding based off POJOs. As you can see in the running sample, the igGrid (and combo, etc.) supports full two-way databinding even while features like sorting, filtering, paging and more are enabled on the grid.

The data binding implemented for Ignite UI supports both keeping in sync changes in the UI reflected on the model, as well as from the model to the UI. Beyond just keeping the data in sync, when changes in the model occur, the UI is updated at specific points without having to re-render the entire page. This approach is quicker, more efficient and a bit more sophisticated than what is offered by other third-party control vendors for their Angular support.

Available Directives

There are directives available for many of the Ignite UI controls. Here's the full list with associated links to the running samples:

General Notes

Just a few things to keep in mind:

  • In the past some of our work with Angular required you to use a fork of Angular, but our solution now works with out-of-the-box Angular
  • The code is currently in a preview state, so expect to see some odd behavior for a little while. We'd love to hear your feedback so we know how to better direct our efforts.

iOS Quick Tip: Adding a Custom Font to a Project

$
0
0
Apple supports a bunch of fonts, and in each version of iOS it seems like they keep adding more. However, sometimes a custom font gives you that unique look that can help your App stand out from the crowd. Today i'm going to show you how to add your custom font to your project. 1. Drag your ttf font file into your project. 2. Within the Project Navigator, select your newly added font file and look over at the Utilities window on the right of xcode. Then make sure "Target Membership"...(read more)

Developer News - What's IN with the Infragistics Community? (4/28-5/5)

$
0
0

It's super hard to keep up with the news every week, especially in an industry like ours where everything changes so rapidly.

If you missed out the past week because you were busy in your own world, here are the top five articles from the Infragistics Social Network, as selected by your fellow Infragistics Community Members!

1. Why iOS notifications are ruining my marriage (and UX solutions)(Hacking UI)

2. How to be a Great Software Developer(Peter Nixey)

3. State Machines in F# and C#(Without the Loop)

4. Seven Things Your Boss Needs to Know About UX(UX Magazine)

5. Top 6 List of Programming Top 10 Lists(Coding Horror)

And there you have it! Enjoy!

iOS - Objective-C - IGGridView Slide an Individual Cell to Reveal a Custom Menu

$
0
0
The IGGridView has a few different options for allowing you to slide a row and reveal a menu . However, what if you're not using a row based grid, and instead have a cell based grid, maybe something like this: A sliding row gesture wouldn't really work there. But instead of using a context menu, it'd be pretty awesome to be able to slide a single cell out of the way and display a menu. So... how hard is this going to be? Well, actually its pretty simple. We just need to create a custom...(read more)

Getting Started with the Infragistics xamSpreadsheet CTP

$
0
0

With the most recent release of Infragistics WPF 14.1, we announced the availability of a new xamSpreadsheet control as a CTP (Community Technology Preview).  Since this announcement, I have been getting a number of question regarding how to even get started using the control.  Since it’s a CTP control, it has no documentation or samples, and things can be a little hard to figure out.  So let’s take a quick look at the most basic task of the xamSpreadsheet, and that is loading an Excel document.

Start by creating a new WPF application, and be sure to target .NET 4.0 or above.  Now, the first thing you need to know is where to find this new control.  In the past, Infragistics would release CTP controls as a separate download.  Not anymore!  We now include the CTP controls in the Visual Studio toolbox.  This makes it easier for you to get the control and start playing with it.  So, in order to use the xamSpreadsheet in your application, simply find it in the Visual Studio toolbox titled “Infragistics 14.1  WPF”.

image

Once you have located the xamSpreadsheet control in the toolbox, simply drag it on to your design surface.  Immediately, you will see a control that resembles Microsoft Excel render in the Visual Studio Designer

image

In the XAML markup, let’s give our xamSpreadsheet instance a  name so that we can reference it in the code-behind.

<Window x:Class="xamSpreadsheetCtp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ig="http://schemas.infragistics.com/xaml"
        Title="MainWindow" Height="925" Width="1100">
    <Grid>
        <ig:XamSpreadsheet x:Name="_spreadsheet" />
    </Grid>
</Window>

Open up the code-behind, and let’s add some code to load an Excel file.  Since the xamSpreadsheet is built on top of our Excel Library, we will need to have an instance of a Workbook object to give the xamSpreadsheet control.

publicpartialclassMainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Loaded += MainWindow_Loaded;
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        using (var stream = File.Open(Path.Combine(System.Environment.CurrentDirectory, "sample.xlsx"), FileMode.Open))
        {
            _spreadsheet.Workbook = Workbook.Load(stream);
        }
    }
}

I added an event handler to the Loaded event of the Window.  In this handler, I am simply opening a file, that I have included in the Visual Studio Solution, using the File.Open method.  This method returns a stream, which will then be used by the static Workbook.Load method in order to instantiate a Workbook object instance.  Once this instance is created, it is assigned to the xamSpreadSheet.Workbook property.  This is what causes the excel document to be rendered in the control.

image

As you can see, the Excel file is loaded from disk, into the xamSpreadsheet control.  Now, you will immediately notice that there is no selection or editing in the control right now.  So, this is really more of a viewer in it’s current state.  Any modifications to the file, such as merging cells, fonts, styles, etc., will need to be done on the Workbook object itself.  Of course this will change.  We are hard at work making sure we deliver the best editing experience for when the control is officially released in the up coming 14.2 release.

Now is the time for you to share your thought son what features it should have, and how they should work.  For example, maybe you want data binding support.  How should this work?  You have a voice; now is the time to use it!  That’s all there is to it.  Download the source code, and start playing around with it .  As always, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

iOS Quick Tip: Find a Number from within an NSString

$
0
0
If you have a string representation of a number, NSString has a few helper methods that make it easy to grab a number. But what happens when you have a string made up of letters and numbers, and you just want the number? First lets look at how you get a number from a string that is just made up of digits: @"12" NSString* val = @"12"; NSInteger number = val.integerValue; @"3.14" NSString* val = @"3.14"; CGFloat number = val.floatValue; Now lets see how you can...(read more)

Infragistics Silverlight Release Notes – April: 14.1 Service Release

$
0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Infragistics Silverlight 2014 Volume 1 Service Release

PDF - Infragistics Silverlight 2014 Volume 1 (Build 14.1.20141.2009)
Excel - Infragistics Silverlight 2014 Volume 1 (Build 14.1.20141.2009)

Viewing all 2460 articles
Browse latest View live