How to change color of shapes of based on some condition at runtime

[Prashant Srivastava]

Hi Team,

I have set ItemsSource for Map and want to set two different color on shapes of countries based on some condition. I already tried the below url but it did not help me.

https://help.syncfusion.com/uwp/map/shapes-color-customization

[Eswaran Thirugnanasambandam]

Hi Prashant Srivastava, 

 

Thanks for contacting Syncfusion support. 

 

Your requirement can be achieved using RangeColorMapping. We have prepared a sample based on your requirement in which, based on the country population we have displayed color for different countries. The code snippet is provided below: 

 

<syncfusion:ShapeFileLayer ItemsSource="{Binding Countries}" Uri="MapsGettingStarted_Sample.Assets.ShapeFiles.world1.shp" ShapeIDPath="NAME" ShapeIDTableField="NAME" LabelPath="NAME" FontSize="10"> 

                    <syncfusion:ShapeFileLayer.ItemsTemplate> 

                        <DataTemplate> 

                            <Grid Opacity="0.75"> 

                                <TextBlock Text="{Binding Data.NAME}" 

                                       FontSize="14" Margin="10 5"/> 

                            </Grid> 

                        </DataTemplate> 

                    </syncfusion:ShapeFileLayer.ItemsTemplate> 

                    <syncfusion:ShapeFileLayer.ShapeSettings> 

                        <syncfusion:ShapeSetting ShapeValuePath="Population" ShapeColorValuePath="Population"> 

                            <syncfusion:ShapeSetting.FillSetting> 

                                <syncfusion:ShapeFillSetting AutoFillColors="False"> 

                                    <syncfusion:ShapeFillSetting.ColorMappings> 

                                        <syncfusion:RangeColorMapping To="1500000000" From="750000000" Color="Red"/> 

                                        <syncfusion:RangeColorMapping To="750000000" From="0" Color="Green"/> 

                                        <syncfusion:RangeColorMapping To="0" From="0" Color="Yellow"/> 

 

                                    </syncfusion:ShapeFillSetting.ColorMappings> 

                                </syncfusion:ShapeFillSetting> 

                            </syncfusion:ShapeSetting.FillSetting> 

                        </syncfusion:ShapeSetting> 

                    </syncfusion:ShapeFileLayer.ShapeSettings> 

                </syncfusion:ShapeFileLayer> 

 

 

Image:  

 

 

 

Please get the sample from the below link. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfMaps161812-1764793941  

 

Please check the sample and let us know if you have any other concerns. 

 

Regards, 

Eswaran