UniformGrid Coming to WinRT and Silverlight Controls

by Avatar Bill Henning (Actipro) - 1 comment
Thursday, May 1, 2014 at 7:12am

PostBannerWinRTControlsDevNotes

We've been working on some new controls and while developing one in particular that we'll post about next time, we had a need for a UniformGrid panel.  The UniformGrid panel is already available in native WPF, but isn't available in WinRT/XAML or Silverlight. 

For the next maintenance releases of our WinRT/XAML and Silverlight controls, we rolled our own UniformGrid that has the same properties as the WPF version, making it easy to reuse code across platforms.

Features

The UniformGrid automatically lays out items in a grid such that the row and column counts are the same, and each item in the panel has the same size.

UniformGrid2x2

In this screenshot, the panel has four items in it.  Thus a 2x2 grid is created to display them all.

UniformGrid3x3

In this screenshot, we have seven items so a larger grid is necessary.  A 3x3 grid is used instead.

You also have the option to specify a certain number of rows or columns that should be used.

UniformGrid2Columns

In this screenshot, we have specified that two columns should be used.  The panel therefore creates a 2x4 grid (two columns and four rows).  Note that regardless of layout, items always appear in the same size.

You can see that UniformGrid provides for a lot of interesting layout scenarios, especially when you tell it a certain number of rows or columns to use.

Summary

The UniformGrid panel will be available in the next maintenance release of our WinRT/XAML and Silverlight Shared Libraries and is licensed for use by any of our customers of those control platforms.

Our next blog post will show off another new control coming to our XAML platforms that makes use of this new panel.

TaskDownload TaskLiveDemo TaskBuyNow

RadialSlider Control

by Avatar Bill Henning (Actipro)
Friday, March 21, 2014 at 9:08am

20141ProductNotesBlogPostBanner

The 2014.1 versions of our WPF, Silverlight, and WinRT/XAML controls were released last week and all contain several handy components in them, such as the RingSlice control we talked about several days ago.

In today's post, I'd like to show off the new RadialSlider control.

What is RadialSlider?

The RadialSlider control allows for quick selection of a degree value, which can easily be converted to some form of scalar value.  The control uses an embedded CircularThumb control, but is otherwise transparent.  It is meant to be used in conjunction with the RingSlice control and have that control render the slider's value UI.

RadialSliderBounds   RadialSliderCorner

Radial sliders function just like normal linear sliders however instead of moving the slider thumb in a straight line, the thumb can move in a circular fashion around the slider's center point.  This sort of UI allows for additional precision when compared to linear sliders, especially with touch interaction.

RadialSliderSegmented   RadialSliderWarningLevel

RadialSlider supports minimum/maximum ranges, infinite wrapping mode, customizable thumb styles, and more. 

RadialSliderRange   RadialSliderCustomStyle

Combine two RadialSlider controls on top of each other to enable range-based selection.

Real World Usage Scenario

RadialSlider and RingSlice controls can be used to create radial input controls such as in this sample (included in our download), which mimics a countdown timer in the Windows Alarms app:

RadialSlider

The end user simply grabs the thumbs, either via touch or mouse, and drags in a circular fashion to alter the values.  The RingSlice controls that render the current values track with the dragged thumb.

Summary

The RadialSlider control is available in our WPF, Silverlight, and WinRT/XAML Shared Libraries and is licensed for use by any of our customers of those control platforms.  Download v2014.1 and check it out!

TaskDownload TaskLiveDemo TaskBuyNow

RingSlice Control

by Avatar Bill Henning (Actipro)
Tuesday, March 18, 2014 at 9:32am

20141ProductNotesBlogPostBanner

The 2014.1 versions of our WPF, Silverlight, and WinRT/XAML controls were released last week and all contain several handy components in them.  One that I'd like to talk in more detail about today is the RingSlice control.

What is RingSlice?

The RingSlice control renders a portion (or the entire circle) of a ring shape.  Its start/end angles, radius, thickness, and other stroke properties can be set.

RingSliceFullRing   RingSliceEndCaps

In the screenshots above, we see a RingSlice rendering a full ring and another showing how end caps can be customized.

RingSliceDash1   RingSliceDash2   RingSliceDash3   RingSliceDash4

In the screenshots above, we see how the same RingSlice control can have different stroke settings applied to it to provide dash effects.

Real World Usage Scenarios

Other very interesting composite controls can be created by using the RingSlice control together with other controls.

RingSliceProgress

The screenshot above shows how four RingSlice controls are used to surround a TextBlock and make a segmented progress indicator.  The fill of each RingSlice can be changed as progress occurs, so that the current step is reflected.

RingSliceGraph

Finally, this screenshot shows the radial graph of a numeric value.  Simply animate the end angle of the RingSlice to create a dynamic presentation of the data.

Summary

The RingSlice control is available in our WPF, Silverlight, and WinRT/XAML Shared Libraries and is licensed for use by any of our customers of those control platforms.  Download v2014.1 and check it out!

TaskDownload TaskLiveDemo TaskBuyNow

WPF, Silverlight, and WinRT/XAML v2014.1 Released

by Avatar Bill Henning (Actipro)
Wednesday, March 12, 2014 at 10:37am

BlogPostBanner

The 2014.1 versions of our WPF, Silverlight, and WinRT/XAML controls have been released and are now available for download.

Major new features are described below.  See the announcement posts for the detailed list of enhancements and updates, including many items not listed below:

ProductHeadingWPFDocking

Metro themes have been dramatically refined and updated in this version, mostly in the area of Docking/MDI.  Updated UI includes subtle border lines, new auto-hide tab appearance, title bar gripper decorations, and more.

DockingMetro

Metro themes will now not show images on tabs by default, and have changed auto-hide tabs to require a click (instead of hover) to open.  These updates match Visual Studio 2013 behavior.

We've added new events for the auto-hide popup (flyout) that fire when it is opened or closed.  The popup is also now displayed using a faster default animation speed.

When the DockSite.AutoHidePopupOpensOnMouseHover property is false, clicks on auto-hide tabs are required to toggle the auto-hide popup opened and closed.

ProductHeadingWPFPropertyGrid

New built-in property editors for FontFamily, FontStretch, FontStyle, and FontWeight type properties have been added.

PropertyGridFontFamily

ProductHeadingWPFRibbon

New key tip specific theme resources have been added and key tips in Metro themes now render more like Office 2013.

CheckBox-based menu items now are capable of supporting tri-state display.

ProductHeadingGenericSyntaxEditor

Delimiter auto-completion logic for insertion and subsequent scope tracking has been greatly improved.  Delimiter indent provider can now optionally support square braces.

Added a new property that allows SyntaxEditor to measure itself based on text contents.  This works great for smaller documents in both multi-line and single-line modes.

SyntaxEditorAutoSize

Updated single-line mode to support word wrap, which is very useful when combined with the new view line measuring option.

SyntaxEditorSingleLineWrapped

Bookmark indicators now support an IsEnabled state.

LipsumGenerator class added to support generation of "lorem ipsum" placeholder text.

Changed block indent mode to retain whitespace after the caret when Enter is pressed.

.NET Languages Add-on

Numerous improvements to the VB language's handling of identifiers and variable declarations that don't include a type.

Web Languages Add-on

Added IntelliPrompt completion for keywords and symbols to the JavaScript language.

JavaScriptCompletion

Added a new advanced JSON language that can be used to view/edit JSON files, along with a new related QuickStart.

JsonLanguage

Updated JavaScript language to support multi-line strings via backslash continuation.

ProductHeadingWPFThemes

Many improvements to Metro themes (mostly in the Docking/MDI area described above), and improved WindowChrome (and RibbonWindow) rendering when maximized.

ProductHeadingGenericShared

WPF/Silverlight Only

Added the RadialSlider control, which is a circular slider that can be used to input any scalar value.

RadialSliderIntro

Added the RingSlice control, which renders a portion of a ring at designated angles and radius.

RingSliceProgressIndicator

Added the CircularThumb control, which is a thumb gripper with a circular shape and arrow adornment.

Added three samples for new Shared Library controls.

WinRT/XAML Only

Added the AppBarHint control, which is a visual hint to users that app bars exist on a page, and can be tapped to toggle them open. 

AppBarHint

Added a related QuickStart.

ProductHeadingMisc

Sample Browser (WPF/Silverlight only)

Added the ability to toggle description sidebar on some samples.

TaskDownload TaskLiveDemo TaskBuyNow

AppBarHint Control for WinRT/XAML

by Avatar Bill Henning (Actipro)
Friday, February 28, 2014 at 1:39pm

BlogPostBanner

We're including a helpful new control in the upcoming 2014.1 version of our WinRT/XAML Controls:  The AppBarHint control.

What is an App Bar Hint?

The AppBarHint control makes it easy to inject an ellipses (three dot) area at the bottom of an Windows Store app page that can be tapped by the end user to display the page's app bars.  Here's a screenshot showing what it looks like:

AppBarHint

Just dock the AppBarHint at the bottom of the page, set a background, and that's all there is to it.  The control automatically opens the app bars when it is tapped.

AppBarHint is also a ContentControl so that custom content can be inserted to the left of the ellipses if desired.

Real-World Usage

We already use the AppBarHint control in our free Code Writer app.  You can see it here in the lower left.

CodeWriterAppBarHint

In this usage scenario, we insert the line/column information as content within the AppBarHint control.  Then when the user taps anywhere inside of the green hint, the app bars display.

Summary

This new control will be available when the 2014.1 version of our WinRT/XAML Controls versions are released in March.

TaskDownload TaskLiveDemo TaskBuyNow