The One With

July 2009 - Posts

• Silverlight Windows, Dialogs and more from AgCore

  Complex controls like AgDataGrid are made up of small little parts. Often this parts are generic enough and can be reused by the user code. We introduced AgCore in 9.1 as a shared library for all our controls. In 9.2 we are surfacing some of what’s inside. Windows and Dialogs A window can be created either in XAML or in code and can be displayed modeless or as modal dialog. xmlns:dxc="clr-namespace:DevExpress.AgCore;assembly=DevExpress.AgCore.v9.2" <dxc:AgWindow x:Name="window" Title="Title">     <sys:String>Content</sys:String> </dxc:AgWindow>   private void Button_Click(object sender, RoutedEventArgs e) {     window.Show(); } private void Button_Click(object sender, RoutedEventArgs e) {     window.ShowDialog(); } private void Button_Click(object sender, RoutedEventArgs e) {     AgWindow window = new AgWindow() { Title = "Title", Content="Content" };     window.Show(); }   When a window is shown as modal, a background veil (AgVeil) with no HitTest will be created under it, giving that modality effect. Dialogs and MessageBoxes <dxc:AgDialog x:Name="userNameDlg" Title="Enter Name" Width="300" HorizontalContentAlignment="Stretch">     <TextBox dxc:AgStyleManager.IsStyled="True" x:Name="userName" Margin="20"/> </dxc:AgDialog>   private void Button_Click(object sender, RoutedEventArgs e) {     userName.Text = "[Your Name]";     userNameDlg.ShowDialog(() => {         // Do something with user input...     }); }   or     AgDialog dlg = new AgDialog() { Title = "Confirmation...", Content = "Delete current record?" }; dlg.ShowDialog(() => {     PerformDelete(); }); Sample data entry form:     xmlns:dxl="clr-namespace:DevExpress.AgLayoutControl;assembly=DevExpress.AgLayoutControl.v9.2" xmlns:dxr="clr-namespace:DevExpress.XtraRichEdit;assembly=DevExpress.AgRichEdit.v9.2" <dxc:AgDialog x:Name="dataForm" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"               Width="840" Height="600" Title="New Contact" >     <dxl:LayoutControl VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Orientation="Vertical">         <dxl:LayoutGroup View="GroupBox" Orientation="Vertical" Header="Info">             <dxl:LayoutItem Label="Full Name:" VerticalAlignment="Top">                 <dxe:TextEdit x:Name="fullNameEdit" EditValue="{Binding FullName}"></dxe:TextEdit>             </dxl:LayoutItem>             <dxl:LayoutItem Label="Home Phone:" VerticalAlignment="Top">                 <dxe:TextEdit x:Name="homePhoneEdit"  EditValue="{Binding HomePhone}">                     <dxe:TextEdit.Mask>                         <dxe:MaskProperties MaskType="Simple" EditMask="(999)000-00-00"/>                     </dxe:TextEdit.Mask>                 </dxe:TextEdit>             </dxl:LayoutItem>             <dxl:LayoutItem Label="Cell Phone:" VerticalAlignment="Top">                 <dxe:TextEdit x:Name="cellPhoneEdit" EditValue="{Binding CellPhone}"></dxe:TextEdit>             </dxl:LayoutItem>             <dxl:LayoutItem Label="DOB:" VerticalAlignment="Top">                 <dxe:DateEdit x:Name="dobEdit"></dxe:DateEdit>             </dxl:LayoutItem>             <dxl:LayoutItem Label="Group:" VerticalAlignment="Top">                 <dxe:ComboBoxEdit x:Name="groupEditEdit" EditValue="{Binding CellPhone}">                     <dxe:ComboBoxEdit.Items>                         <sys:String>Family</sys:String>                         <sys:String>Friends</sys:String>                         <sys:String>Co-Workers</sys:String>                     </dxe:ComboBoxEdit.Items>                 </dxe:ComboBoxEdit>             </dxl:LayoutItem>         </dxl:LayoutGroup>         <dxl:LayoutGroup View="GroupBox" Header="Notes" VerticalAlignment="Stretch">             <dxre:RichEdit x:Name="richEdit" ActiveViewType="Draft">             </dxre:RichEdit>         </dxl:LayoutGroup>     </dxl:LayoutControl> </dxc:AgDialog> Applying the look and feel To help you style standard controls too look and feel like the controls from DevExpress (AgDataGrid, AgMenu, AgRichEdit etc…) we have introduced a new helper class AgSyleManager. All you have to do is choose the look and feel (Visual Style) Buttons   <Button Content="Standard Button"></Button> <Button Content="DX Button" dxc:AgStyleManager.StyleType="Button"></Button> <Button Content="DX ToolButton" dxc:AgStyleManager.StyleType="ToolButton"></Button> In most cases it is enough to just set the AgStyleManager.IsStyled property. The AgStyleManager will then discover the control type (if supported) and apply the default DevExpress template.  <Button Content="DX Button" dxc:AgStyleManager.IsStyled="true"> ListBox <ListBox dxc:AgStyleManager.StyleType="ListBox"></ListBox> ComboBox   <ComboBox dxc:AgStyleManager.StyleType="ComboBox"/> CheckBox <CheckBox Content="Standard CheckBox"/> <CheckBox dxc:AgStyleManager.IsStyled="True" Content="DX CheckBox"/>     TextBox     <TextBox Text="Standard TextBox"/> <TextBox dxc:AgStyleManager.StyleType="TextBox" Text="DX TextBox"/> Slider   <Slider Width="150"/> <Slider dxc:AgStyleManager.StyleType="Slider"/>   ScrollBar     <ScrollBar Orientation="Horizontal"/> <ScrollBar dxc:AgStyleManager.StyleType="ScrollBar" Orientation="Horizontal"/> Cheers, Azret Posted Jul 16 2009, 05:02 PM by Azret Botash (DevExpress) with 8 comment(s)

• Silverlight Data Editors and Mask Edits in 9.2

  The 9.2 release introduces a lot of new controls and features to our Silverlight suite. In this release we are formally introducing the concept of editors, both as standalone and as embeddable. A lot of work has been done to merge our exiting in-place edits from the AgDataGrid and our editors from WPF to create a sound framework from which we can derive things like TextEdits, DateEdits, ComboBoxes etc. BaseEdit An abstract control from which all other editors derive. BaseEdit provides the basic look and feel an abstraction for Display and Edit templates (recall the ColumnType templates in the AgDataGrid, but now at a much lower level) support for *validation* and an ErrorPresenter * BaseEdit cannot will be used directly. Use it only to create a custom and specialized editors. CheckEdit   <dxe:CheckEdit></dxe:CheckEdit> DateEdit <dxe:DateEdit></dxe:DateEdit> ComboEdit   <dxe:ComboBoxEdit>     <dxe:ComboBoxEdit.Items>         <sys:String>Item 1</sys:String>         <sys:String>Item 2</sys:String>         <sys:String>Item 3</sys:String>         <sys:String>Item 4</sys:String>         <sys:String>Item 5</sys:String>     </dxe:ComboBoxEdit.Items>            </dxe:ComboBoxEdit>   ButtonEdit <dxe:ButtonEdit></dxe:ButtonEdit> <dxe:ButtonEdit>     <dxe:ButtonEdit.Buttons>         <dxe:ButtonInfo GlyphKind="Regular" IsLeft="True"/>     </dxe:ButtonEdit.Buttons> </dxe:ButtonEdit> TextEdit   <dxe:TextEdit></dxe:TextEdit> <dxe:TextEdit>     <dxe:TextEdit.Mask>         <dxe:MaskProperties MaskType="DateTime"/>     </dxe:TextEdit.Mask> </dxe:TextEdit>   <dxe:TextEdit>     <dxe:TextEdit.Mask>         <dxe:MaskProperties MaskType="Simple" EditMask="(999)000-0000"/>     </dxe:TextEdit.Mask> </dxe:TextEdit> TextEdit and it’s descendants (All ButtonEdit, ComboEdit etc..) supports Masking. For for editing and displaying purposes. Supported masks range from the very simple DateTime and Numeric to the very complex powered by a Regular Expression of your choosing. Simple Masks   <dxe:MaskProperties MaskType="Simple" EditMask="(999)000-00-00"/> // US Phone Number <dxe:MaskProperties MaskType="Simple" EditMask="99/99/00"/> // Short Date <dxe:MaskProperties MaskType="Simple" EditMask="90:00:00 &gt;LL"/> // Long Time <dxe:MaskProperties MaskType="Simple" EditMask="90:00"/> // Short Time <dxe:MaskProperties MaskType="Simple" EditMask="999"/> // 3 Digit Phone Ext. <dxe:MaskProperties MaskType="Simple" EditMask="000-00-0000"/> // Social Security Number <dxe:MaskProperties MaskType="Simple" EditMask="00000-9999"/> // Long Zip Code <dxe:MaskProperties MaskType="Simple" EditMask="00000"/> // Short Zip Code Numeric Masks <dxe:MaskProperties MaskType="Numeric" EditMask="c"/> // Currency <dxe:MaskProperties MaskType="Numeric" EditMask="#,##0.00;&lt;&lt;#,##0.00&gt;&gt;"/> // Negative Number <dxe:MaskProperties MaskType="Numeric" EditMask="n"/> // Number <dxe:MaskProperties MaskType="Numeric" EditMask="d8"/> // 8 digits <dxe:MaskProperties MaskType="Numeric" EditMask="p"/> // Percent (with decimals) <dxe:MaskProperties MaskType="Numeric" EditMask="P"/> // Percent Date and Time Masks   <dxe:MaskProperties MaskType="DateTime" EditMask="f"/> // Full <dxe:MaskProperties MaskType="DateTime" EditMask="MM/dd/yyyy h:m:s t"/> // Custom <dxe:MaskProperties MaskType="DateTime" EditMask="R"/> // RFC 1123 <dxe:MaskProperties MaskType="DateTime" EditMask="u"/> // Universal <dxe:MaskProperties MaskType="DateTime" EditMask="M"/>  // Month and Day <dxe:MaskProperties MaskType="DateTime" EditMask="Year: yyyy"/> // Year <dxe:MaskProperties MaskType="DateTime" EditMask="t"/> // Time Only <dxe:MaskProperties MaskType="DateTime" EditMask="d, dddd"/> // Day and Day of the Week Regular Masks   <dxe:MaskProperties MaskType="Regular" EditMask="(\d?\d?\d?)\d\d\d-\d\d-\d\d"/> // Phone Number <dxe:MaskProperties MaskType="Regular" EditMask="\d?\d?/\d\d/\d\d"/> // Short Date <dxe:MaskProperties MaskType="Regular" EditMask="\d?\d:\d\d:\d\d >[PA]M"/> // Long Time <dxe:MaskProperties MaskType="Regular" EditMask="\d?\d:\d\d"/> // Short Time RegEx Masks <dxe:MaskProperties MaskType="RegEx" EditMask="((10|11|12|[1-9]):[0-5]\d:[0-5]\d(am|pm))|((2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9])"> // Time <dxe:MaskProperties MaskType="RegEx" EditMask="((\+\d|8)?\(\d{3}\))?\d{3}-\d\d-\d\d"/> // Phone Number <dxe:MaskProperties MaskType="RegEx" EditMask="([1-9]|10|11|12)/(0?[1-9]|[12]\d|30|31)/\d{2}\d{2}?"> // Short Date <dxe:MaskProperties MaskType="RegEx" EditMask="([01]?[0-9]|2[0-3]):[0-5]\d"/> // Short Time <dxe:MaskProperties MaskType="RegEx" EditMask="\d{3}-\d{2}-\d{4}"/> // Social Security TextEdit and AgDataGrid   <dxg:AgDataGrid>     <dxg:AgDataGrid.Columns>         <dxg:AgDataGridColumn FieldName="CellPhone">             <dxg:AgDataGridColumn.EditSettings>                 <dxes:TextEditSettings>                     <dxes:TextEditSettings.Mask>                         <dxe:MaskProperties MaskType="Simple" EditMask="(999)000-00-00"/>                     </dxes:TextEditSettings.Mask>                 </dxes:TextEditSettings>             </dxg:AgDataGridColumn.EditSettings>         </dxg:AgDataGridColumn>     </dxg:AgDataGrid.Columns> </dxg:AgDataGrid> Cheers, Azret Posted Jul 15 2009, 05:54 PM by Azret Botash (DevExpress) with 10 comment(s)