The One With

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