Example

• Feb 21, 2023
• 5 minutes to read

This example demonstrates cases of the DXBinding, DXCommand, and DXEvent markup extensions.

View Example: Use DXBinding, DXCommand, and DXEvent Extensions

BasicExpressionsView.xaml

<UserControl x:Class="DXBindingExample.View.BasicExpressionsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:BasicExpressionsViewModel}">

    <StackPanel Orientation="Vertical">
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="ViewModel Properties" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="IntValue:" Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'IntValue', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="DoubleValue:" Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'DoubleValue', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="StringValue:" Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'StringValue', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="BooleanValue:" Style="{StaticResource descriptionStyle}"/>
            <CheckBox IsChecked="{DXBinding 'BooleanValue', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Arithmetic Operators" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: 'IntValue+DoubleValue'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'IntValue+DoubleValue', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="DXBinding Expr: 'StringValue+DoubleValue.ToString()'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'StringValue+DoubleValue.ToString()', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Comparison and Relational Operators " Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: 'IntValue eq(==) DoubleValue'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'IntValue eq DoubleValue', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="DXBinding Expr: 'IntValue gt(>) DoubleValue'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'IntValue gt DoubleValue', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Logical Operators " Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: 'BooleanValue ? IntValue : DoubleValue'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding 'BooleanValue ? IntValue : DoubleValue', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
    </StackPanel>
</UserControl>

RelativeSourcesView.xaml

<UserControl x:Class="DXBindingExample.View.RelativeSourcesView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:RelativeSourcesViewModel}">
    <StackPanel Orientation="Vertical">
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="ElementName Binding" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '@e(slider).Value'." Style="{StaticResource descriptionStyle}"/>
            <Slider x:Name="slider" Minimum="0" Maximum="100" Value="50" Margin="4,2,4,2"/>
            <TextBox Text="{DXBinding '@e(slider).Value', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Self Binding" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '@s.Width'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '@s.Width', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}" Width="80" HorizontalAlignment="Left"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="FindAncestor Binding" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '@a($UserControl).DataContext.Value'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '@a($UserControl).DataContext.Value', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <StackPanel.Resources>
                <sys:Int32 x:Key="resourceValue">42</sys:Int32>
            </StackPanel.Resources>
            <TextBlock Text="StaticResource Binding" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '@r(resourceValue)'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '@r(resourceValue)', Mode=OneTime}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
    </StackPanel>
</UserControl>

StaticPropertiesView.xaml

<UserControl x:Class="DXBindingExample.View.StaticPropertiesView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:StaticPropertiesViewModel}">

    <StackPanel Orientation="Vertical">
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Binding to Attached Property" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '@e(tb).($v:AttachedPropertiesHelper.AttachedTitle)'." Style="{StaticResource descriptionStyle}"/>
            <TextBlock x:Name="tb" Text="{DXBinding '@s.($v:AttachedPropertiesHelper.AttachedTitle)'}" Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '@e(tb).($v:AttachedPropertiesHelper.AttachedTitle)', UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Binding to Static Property" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Text="DXBinding Expr: '$int.MaxValue'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '$int.MaxValue', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="DXBinding Expr: '$v:StaticPropertiesHelper.StaticObject.Value'." Style="{StaticResource descriptionStyle}"/>
            <TextBox Text="{DXBinding '$v:StaticPropertiesHelper.StaticObject.Value', Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
    </StackPanel>
</UserControl>

BindingToMethodView.xaml

<UserControl x:Class="DXBindingExample.View.BindingToMethodView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:BindingToMethodViewModel}">
    <StackPanel Orientation="Vertical">
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Binding To Function"  Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Style="{StaticResource descriptionStyle}">
                Function: int Sum(int x, int y) { return x + y; }
                <LineBreak/>
                DXBinding Expr: 'Sum($int.Parse(@e(x).Text), $int.Parse(@e(y).Text))'.
            </TextBlock>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="X: "/>
                <TextBox x:Name="x" Text="1" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="Y: "/>
                <TextBox x:Name="y" Text="2" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="Res: "/>
                <TextBox Text="{DXBinding 'Sum($int.Parse(@e(x).Text), $int.Parse(@e(y).Text))', FallbackValue=0, Mode=OneWay}" IsReadOnly="True" Style="{StaticResource valueStyle}"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</UserControl>

TwoWayView.xaml

<UserControl x:Class="DXBindingExample.View.TwoWayView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:TwoWayViewModel}">
    <StackPanel Orientation="Vertical">
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Example #1" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Style="{StaticResource descriptionStyle}">
                DXBinding Expr: 'FirstName + ` ` + LastName'.
                <LineBreak/>
                DXBinding BackExpr: 'FirstName = @v.Split(` `[0])[0]; LastName = @v.Split(` `[0])[1];'.
            </TextBlock>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="FirstName: "/>
                <TextBox Text="{DXBinding FirstName, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="LastName: "/>
                <TextBox Text="{DXBinding LastName, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="FullName: "/>
                <TextBox 
                    Text="{DXBinding 
                                Expr='FirstName + ` ` + LastName', 
                                BackExpr='FirstName = @v.Split(` `[0])[0]; LastName = @v.Split(` `[0])[1];',
                                FallbackValue='', Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                    Style="{StaticResource valueStyle}"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="Example #2" Style="{StaticResource headerDescriptionStyle}"/>
            <TextBlock Style="{StaticResource descriptionStyle}">
                Function: int Sum(int x, int y) { return x + y; }
                <LineBreak/>
                DXBinding Expr: 'Sum($int.Parse(@e(x).Text), $int.Parse(@e(y).Text))'.
                <LineBreak/>
                DXBinding BackExpr: '@e(x).Text = $int.Parse(@v); @e(y).Text = 0;'.
            </TextBlock>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="X: "/>
                <TextBox x:Name="x1" Text="1" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="Y: "/>
                <TextBox x:Name="y1" Text="2" Style="{StaticResource valueStyle}"/>
                <TextBlock Text="Res: "/>
                <TextBox 
                    Text="{DXBinding 
                                Expr='Sum($int.Parse(@e(x1).Text), $int.Parse(@e(y1).Text))', 
                                BackExpr='@e(x1).Text = $int.Parse(@v); @e(y1).Text = 0;',
                                FallbackValue=0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                    Style="{StaticResource valueStyle}"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</UserControl>

CommandView.xaml

<UserControl x:Class="DXBindingExample.View.CommandView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:CommandViewModel}">

    <StackPanel Orientation="Vertical">
        <TextBlock Text="Command Binding" Style="{StaticResource headerDescriptionStyle}"/>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="MessageBox Title:" Style="{StaticResource descriptionStyle}"/>
            <TextBox x:Name="title" Text="MessageBox" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="MessageBox Message:" Style="{StaticResource descriptionStyle}"/>
            <TextBox x:Name="message" Text="Command Executed!" Style="{StaticResource valueStyle}"/>
            <TextBlock Text="Is Command Enabled" Style="{StaticResource descriptionStyle}"/>
            <CheckBox x:Name="isEnabled" IsChecked="True" Style="{StaticResource valueStyle}"/>
        </StackPanel>
        <StackPanel Style="{StaticResource groupPanelStyle}">
            <TextBlock Text="DXCommand Execute: '$MessageBox.Show(@e(message).Text, @e(title).Text)'." Style="{StaticResource descriptionStyle}"/>
            <TextBlock Text="DXCommand CanExecute: '@e(isEnabled).IsChecked'." Style="{StaticResource descriptionStyle}"/>
            <Button Content="Show MessageBox" HorizontalAlignment="Left" Style="{StaticResource valueStyle}"
                    Command="{DXCommand 
                                Execute='$MessageBox.Show(@e(message).Text, @e(title).Text)',
                                CanExecute='@e(isEnabled).IsChecked'}"/>
        </StackPanel>
    </StackPanel>
</UserControl>

EventView.xaml

<UserControl x:Class="DXBindingExample.View.EventView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:v="clr-namespace:DXBindingExample.View"
             xmlns:vm="clr-namespace:DXBindingExample.ViewModel"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             d:DataContext="{dxmvvm:ViewModelSource vm:EventViewModel}">

    <UserControl.Resources>
        <sys:String x:Key="loadedBindingStringFormat" xml:space="preserve">This message is shown with this binding:&#13;{0}</sys:String>
        <sys:String x:Key="loadedBinding">Loaded="{DXEvent '$MessageBox.Show(`text`, Title)'}"</sys:String>
        <sys:String x:Key="clickBindingStringFormat" xml:space="preserve">This message is shown with this binding:&#13;{0}</sys:String>
        <sys:String x:Key="clickBinding">Click="{DXEvent '$MessageBox.Show(`text`, Title)'}"</sys:String>
    </UserControl.Resources>
    <StackPanel Orientation="Vertical" Loaded="{DXEvent '$MessageBox.Show($string.Format(@r(loadedBindingStringFormat), @r(loadedBinding)), Title)'}">
        <Button Content="Show Message" Style="{StaticResource valueStyle}" HorizontalAlignment="Left"
                Click="{DXEvent '$MessageBox.Show($string.Format(@r(clickBindingStringFormat), @r(clickBinding)), Title)'}"/>
    </StackPanel>
</UserControl>