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>