We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to changed Item DataTemplate in xaml ?


I am able to change the MarkerTemplateSelector in the code-behind as shown in the sample app But how can I check this only on xaml side without wrriting background code ?

I want to start a different DataTemplate when StepStatus.Active is and a different template when StepStatus.Inactive. Now I can do as floows. But is there a way to check it only froum xaml ?

public override DataTemplate SelectTemplate(object item, DependencyObject container)


StepViewItem stepViewItem = item as StepViewItem;

if (stepViewItem != null)


ItemsControl itemsControl = ItemsControl.ItemsControlFromItemContainer(stepViewItem);

int index = itemsControl.ItemContainerGenerator.IndexFromContainer(stepViewItem);

StepStatus stepStatus = stepViewItem.Status;

stepViewItem.MarkerWidth = 30;

stepViewItem.MarkerHeight = 30;

if (stepStatus == StepStatus.Active)


return stepViewItem.FindResource("ActiveStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Inactive && index == 0)


return stepViewItem.FindResource("InActiveFirstStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Inactive && index == 1)


return stepViewItem.FindResource("InActiveSecondStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Inactive && index == 2)


return stepViewItem.FindResource("InActiveThirdStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Inactive && index == 3)


return stepViewItem.FindResource("InActiveFourthStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Indeterminate && index == 0)


return stepViewItem.FindResource("IndeterminateFirstStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Indeterminate && index == 1)


return stepViewItem.FindResource("IndeterminateSecondStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Indeterminate && index == 2)


return stepViewItem.FindResource("IndeterminateThirdStepTemplate") as DataTemplate;


else if (stepStatus == StepStatus.Indeterminate && index == 3)


return stepViewItem.FindResource("IndeterminateFourthStepTemplate") as DataTemplate;



return null;


            <syncfusion:SfStepProgressBar x:Name="MarkerCustomization"




                                          MarkerTemplateSelector="{StaticResource customShapeTemplate}"



                                          ItemsSource="{Binding StepperItems}"



                    <Style TargetType="syncfusion:StepViewItem">

                        <Setter Property="SecondaryContentTemplate"

                                Value="{StaticResource SecondaryContentTemplate}" />

                        <Setter Property="ContentTemplate"

                                Value="{StaticResource ContentTemplate}" />




1 Reply

HD Hemalatha Duraisamy Syncfusion Team February 10, 2023 06:41 PM UTC

The MarkerTemplateSelector is a type of DataTemplateSelector. The DataTemplateSelector used this SelectedTemplate override method only, and we have changed the DataTemplate of the same object. We have created the sample based on that and please find the sample link below,

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/circularProgress1532357113

If you want to write the below code snippet in xaml side? It is not possible to write the following code snippet in xaml. To create a class that inherit from DataTemplateSelector and override the SelectedTemplate method. Only on that override method could be updated the DataTemplate based on the step view status. It is a behaviour that has been updated on the Microsoft website as well. Please visit the Microsoft Developer Network (MSDN) website link,

MSDN link: https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datatemplateselector?view=windowsdesktop-7.0#remarks

We have bind the MarkerTemplateSelector in xaml page, please find the code snippet below,

Live Chat Icon For mobile
Up arrow icon