SilverVlad

May 2010 - Posts

• Silverlight Layout Control: Design-time Support in Visual Studio 2010 - v2010 vol 1

  Now that Visual Studio 2010 is released you can start using its Silverlight designer. And, of course, we don't stay behind. So starting from v2010.1 AgLayoutControl fully supports Visual Studio 2010 in addition to Blend. I'm not going to describe features that we supported before in Blend and now in Visual Studio - I will talk about new functionality. General Enhancements When you drop a LayoutControl on the design surface you will see a hint message, that I hope will help some of you to move forward: Before, when you dropped a LayoutItem on a LayoutControl, a TextBox was created as content of this LayoutItem. Now our TextEdit is used instead. I think it looks better (matches our default theme) and it's more functional (masks come first to mind) than a standard TextBox: Notice that instead of the old default "LayoutItem" text the control's name is used for the LayoutItem's Label. I hope this will help you with the initial orientation in the layout you're building. Now in addition to selecting LayoutItem itself you can also select it's child: no need to turn customization mode off or use object tree anymore. Note however, that if you started to drag LayoutItem's child you will be dragging LayoutItem itself - this is done for your convenience. Another thing that will make UI building a little faster and easier for you - you can drop an input control on a LayoutControl and a LayoutItem will be automatically created for it: Supported input control types for this feature are: TextBox, ComboBox, ListBox, PasswordBox, Slider and all our editors except CheckEdit. Tabbed and Collapsible Groups Support Before, when you dropped a new LayoutGroup on a LayoutControl/LayoutGroup, it was created with View = GroupBox. Now that we have tabbed groups this behavior changed a little: if you drop a new group on a tabbed group (View = Tabs) then the new group's View will be Group (which is the default value for the View property). The new group will be represented as a tab: If you drop a regular control on a tabbed group, it will be shown on a new tab inside this group and the LayoutControl.TabHeader attached property will be assigned for it. You can use this property to define the tab header value for this control (it works for LayoutGroup too, but LayoutGroup has the Header property which is more convenient): There is an alternative way to add a new LayoutGroup/tab to a tabbed group - via the context menu: You can also use this menu to change the position of the active tab inside a tabbed group. Clicking on a tab of a tabbed group will change the active tab and select a child control associated with it: This is especially useful when the tab's child control is a LayoutGroup with View = Group because it doesn't have a lot of UI space by itself to click on. If you have a collapsible group (View = GroupBox, IsCollapsible = True) you can click on the collapse/expand button to collapse/expand this group. The IsCollapsed property value will be changed accordingly: Even with tabbed and collapsible groups in your LayoutControl you can still drag&drop controls inside it as easily as before: between groups, between/from/into tabs, into collapsed groups. Tabbed and collapsible groups make layout more complicated (some controls are not immediately visible), but it's not a problem - LayoutControl will make selected control visible by activating its parent tabs and expanding its parent collapsed groups: I hope all these improvements will make you more productive in building UI and the design-time experience will become more pleasant for you. Posted May 17 2010, 04:42 PM by Vlad Filyakov (DevExpress) with 2 comment(s) Filed under: AgLayoutControl, Layout Control, Silverlight, v2010.1

• Silverlight Layout Control: Tabbed and Collapsible Groups - v2010 vol 1

  Coming in DXperience v2010 vol 1 are two big new features of AgLayoutControl: tabbed groups and collapsible groups. Tabbed Groups Before you could make LayoutGroup look like an invisible (lookless) container or like a group box: Now, just by changing one property, you can turn it into a tabbed group: Notice that every child of the tabbed LayoutGroup is now represented by a separate tab. The SelectedTabIndex property can be used to determine and set the active tab index. There are two ways to define a tab's header: Header and HeaderTemplate properties - can be used for LayoutGroup that is a child of a tabbed group. TabHeader and TabHeaderTemplate attached properties - can be used for any type of control (including LayoutGroup) that is a child of a tabbed group. I used the Header property for the first child (LayoutGroup) of my tabbed group and the TabHeader property for the second one (LayoutItem):         <lc:LayoutControl Name="layoutControl1">             <lc:LayoutGroup Header="Information" Name="layoutGroup1" View="Tabs" VerticalAlignment="Top">                 <lc:LayoutGroup Orientation="Vertical" Header="Personal Information">                     <lc:LayoutItem Label="First Name:" Name="layoutItem1">                         <dxe:TextEdit Name="textEdit1" />                     </lc:LayoutItem>                     <lc:LayoutItem Label="Last Name:" Name="layoutItem2">                         <dxe:TextEdit Name="textEdit2" />                     </lc:LayoutItem>                     <lc:LayoutItem Label="Age:" Name="layoutItem4">                         <dxe:TextEdit Name="textEdit4" />                     </lc:LayoutItem>                 </lc:LayoutGroup>                 <lc:LayoutItem Label="Address:" Name="layoutItem3" LabelPosition="Top"                                VerticalAlignment="Stretch" lc:LayoutControl.TabHeader="Contact Information">                     <dxe:TextEdit Name="textEdit3" />                 </lc:LayoutItem>             </lc:LayoutGroup>         </lc:LayoutControl> Our DXTabControl is used internally to visually represent a tabbed group. You can use the TabsStyle and TabStyle properties of LayoutGroup to customize the look of this tab control and its tabs. Changing the same properties of LayoutControl will affect all tabbed groups inside this LayoutControl. <lc:LayoutGroup Header="Information" Name="layoutGroup1" View="Tabs" VerticalAlignment="Top"> <lc:LayoutGroup.TabsStyle> <Style TargetType="dx:DXTabControl"> <Setter Property="View"> <Setter.Value> <dx:TabControlMultiLineView HeaderLocation="Right"/> </Setter.Value> </Setter> </Style> </lc:LayoutGroup.TabsStyle> And of course you can drag&drop controls inside a tab, from the tab and to the tab from any other LayoutGroup. This functionality is available at both design-time and runtime (via the customization mode). Collapsible Groups Now you can add the collapsing capability to any LayoutGroup represented as a group box (View = GroupBox). One property makes this happen: IsCollapsible = True. Another property - IsCollapsed - allows you to collapse/expand a group:   I hope these new features of LayoutControl will allow you to build complex UI even easier than before. Posted May 11 2010, 05:40 PM by Vlad Filyakov (DevExpress) with 12 comment(s) Filed under: AgLayoutControl, Layout Control, Silverlight, v2010.1