Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Implement Selection in the MVVM Style

  • 6 minutes to read

To implement a selection in the MVVM style, enable the selection feature using the ChartControl.SelectionMode property. Set this property to a value different from None.

Then, use the ChartControl.SelectedItem property to set or get a single selected view model object, or the ChartControl.SelectedItems property to set or get several view model objects.

<Window xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="720" Width="1280"
        x:Class="MVVM_Selection.MainWindow"
        dx:ThemeManager.Theme="Office2013">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <dxc:ChartControl Grid.Column="0" 
                          Margin="4,4,2,4"
                          SelectionMode="Single"
                          SelectedItem="{Binding Path=SelectedCountry, Mode=TwoWay}">
            <dxc:ChartControl.Palette>
                <dxc:Office2013Palette/>
            </dxc:ChartControl.Palette>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Top 10 Countries By Area"
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:ChartControl.Legend>
                <dxc:Legend HorizontalPosition="LeftOutside" 
                            VerticalPosition="Top"
                            Orientation="Vertical" IndentFromDiagram="2"/>
            </dxc:ChartControl.Legend>
            <dxc:SimpleDiagram2D>
                <dxc:PieSeries2D DataSource="{Binding Path=CountriesData}"
                                 ArgumentDataMember="Name"
                                 ValueDataMember="Area"
                                 LegendTextPattern="{}{A}">
                    <dxc:PieSeries2D.Model>
                        <dxc:BorderlessFlatPie2DModel/>
                    </dxc:PieSeries2D.Model>
                </dxc:PieSeries2D>
            </dxc:SimpleDiagram2D>
        </dxc:ChartControl>

        <dxc:ChartControl Grid.Column="1"
                          Margin="2,4,4,4">
            <dxc:ChartControl.Palette>
                <dxc:Office2013Palette/>
            </dxc:ChartControl.Palette>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="{Binding Path=SelectedCountry.Name, Mode=OneWay}"
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:XYDiagram2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.WholeRange>
                            <dxc:Range AutoSideMargins="False" SideMarginsValue="0"/>
                        </dxc:AxisX2D.WholeRange>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False"/>
                        </dxc:AxisY2D.WholeRange>
                        <dxc:AxisY2D.Title>
                            <dxc:AxisTitle Content="Population, millons"/>
                        </dxc:AxisY2D.Title>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
                <dxc:AreaSeries2D DataSource="{Binding Path=SelectedCountry.PopulationDynamics}"
                                  ArgumentDataMember="Year"
                                  ValueDataMember="Population"/>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>