Syncfusion WinUI Desktop Controls Demos

https://github.com/syncfusion/winui-demos
Admin
A comprehensive collection of demo applications showcasing Syncfusion WinUI controls including...
Tokens:255,240
Snippets:1,636
Trust Score:10
Update:1 day ago
Show doc for...
Tokens:
Raw
### Define NewYearTemplate DataTemplate

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/DatePicker/ItemTemplateSelector_xaml.txt

Defines a DataTemplate resource named 'NewYearTemplate' that displays a TextBlock bound to DisplayText and a Path icon with a tooltip. The Path uses a StaticResource 'newYear' for its Data and binds Fill to the templated parent's Foreground.

```XAML
<DataTemplate x:Key="NewYearTemplate">
    <Grid ToolTipService.ToolTip="NewYear">
          <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Text="{Binding DisplayText}" />
          <Path
                    Width="18"
                    Height="18"
                    Margin="3"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Data="{StaticResource newYear}"
                    Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                    Stretch="Uniform" />
    </Grid>                   
</DataTemplate>
```

--------------------------------

### ComboBoxViewModel with GroupBy for Vegetable Categories

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/Grouping_cs.txt

Defines a ViewModel that populates an ObservableCollection of Vegetable items and groups them by Category using LINQ GroupBy. The grouped result is assigned to the Vegetables property for binding in a ComboBox.

```csharp
// View Model

public class ComboBoxViewModel : NotificationObject
{
    public ComboBoxViewModel()
    {
        this.PopulateVegetablesData();
    }

    public object Vegetables { get; set; }

    private void PopulateVegetablesData()
    {
        var vegetables = new ObservableCollection<Vegetable>();
        vegetables.Add(new Vegetable
        {
            Name = "Cabbage",
            Category = "Leafy and Salad",
        });
        vegetables.Add(new Vegetable
        {
            Name = "Chickpea",
            Category = "Beans",
        });

        ...

        this.Vegetables = vegetables.GroupBy(item => item.Category);
    }
}
```

--------------------------------

### Override SelectTemplateCore for SfRatingItem

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/Rating/pathtemplateselector_cs.txt

Override SelectTemplateCore to return a selected or unselected DataTemplate based on the SfRatingItem's IsSelected property. Returns null if the item is not an SfRatingItem.

```csharp
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
   SfRatingItem ratingItem = item as SfRatingItem;
   if (ratingItem == null)
       return null;
   if (ratingItem.IsSelected)
       return SelectedTemplate;
   return UnselectedTemplate;
}
```

--------------------------------

### Define SpecialDaysItemTemplateSelector with templates

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/DatePicker/ItemTemplateSelector_xaml.txt

Declares a SpecialDaysItemTemplateSelector resource named 'selector' and assigns NewYearTemplate and ArmyDayTemplate (and others) to it. The ellipsis '.....' indicates additional template assignments not shown.

```XAML
<local:SpecialDaysItemTemplateSelector x:Key="selector"
                                       NewYearTemplate="{StaticResource NewYearTemplate}"
                                       ArmyDayTemplate="{StaticResource ArmyDayTemplate}"
                                       ..... 
                                       />
```

--------------------------------

### ViewModel with BlackoutSpecificDates for Calendar

Source: https://github.com/syncfusion/winui-demos/blob/master/calendar/Assets/Cal/BlackoutDates_cs.txt

Defines a ViewModel that exposes a DateTimeOffsetCollection named BlackoutSpecificDates, populated in the constructor with three specific dates (April 4, 11, and 28, 2021) to be blacked out in a calendar. The ellipsis (...) indicates additional dates may be added.

```csharp
public class ViewModel
{       
    public DateTimeOffsetCollection BlackoutSpecificDates { get; set; }

    public ViewModel()
    {
        BlackoutSpecificDates = new DateTimeOffsetCollection();
        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 4)));
        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 11)));
        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 28)));
        ...
    }
}
```

--------------------------------

### TimeItemTemplateSelector class for TimePicker item templates

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/TimePicker/ItemTemplateSelector_cs.txt

Defines a DataTemplateSelector that returns a specific template based on the hour value when the DateTimeField is Hour12. The switch cases for hours 2 and 5 return the groupMeetingTemplate and alarmTemplate resources respectively; other cases are omitted with an ellipsis. The method falls back to the base implementation for other items. Note that the code references dateTimeField which is not defined in this snippet.

```csharp
public class TimeItemTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if(dateTimeField.Field==DateTimeField.Hour12)
        {
            switch (dateTimeField.DateTime.Value.Hour)
            {
                case 2:
                    return Application.Current.Resources["groupMeetingTemplate"] as DataTemplate;
                case 5:
                    return Application.Current.Resources["alarmTemplate"] as DataTemplate;
                ...
            }
        }
    }

    return base.SelectTemplateCore(item, container);
}
```

--------------------------------

### Apply ItemTemplateSelector to SfDatePicker

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/DatePicker/ItemTemplateSelector_xaml.txt

Sets the ItemTemplateSelector property of an SfDatePicker to the 'selector' resource defined earlier, enabling custom templates for special days.

```XAML
<editors:SfDatePicker ItemTemplateSelector="{StaticResource selector}"/>
```

--------------------------------

### SfSegmentedControl with ItemTemplate and SelectedIndex

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/SegCtrl/defaultsegmented_xaml.txt

XAML example for a Syncfusion SfSegmentedControl bound to a Days collection, with a custom ItemTemplate displaying the Name property and an initial SelectedIndex of 2.

```XAML
<syncfusion:SfSegmentedControl 
    x:Name="calendar"
    Margin="100" 
    HorizontalAlignment="Center"
    VerticalAlignment="Center" 
    SelectedIndex="2" 
    ItemsSource="{Binding Days}">
    <syncfusion:SfSegmentedControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Name}"
                           VerticalAlignment="Center" 
                           HorizontalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl>
```

--------------------------------

### SfMaskedTextBox with ErrorType=None and ErrorContent

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/MaskedTextBox/errortype_xaml.txt

Configures a masked text box for email input with a regex mask, disables built-in error display (ErrorType=None), and sets custom error content. The ValueChanging event handler is used to validate and show the custom error.

```XAML
<syncfusion:SfMaskedTextBox x:Name="errorTypeMaskTextBox" 
    Header="Email" 
    MaskType="RegEx" 
    Mask="[a-z0-9._%-]+@[a-z0-9]+\.[a-z]{2,3}" 
    Margin="0,10,0,0"
    Width="200"
    ValueChanging="errorTypeMaskTextBox_ValueChanging"
    ErrorContent = "Caps not allowed in the mail id"
    ErrorType="None"/>
```

--------------------------------

### CustomSearch class implementing IAutoCompleteFilterBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/AutoComplete/CustomSearch_cs.txt

Defines a custom filter behavior for SfAutoComplete that fetches Google suggestions asynchronously. The constructor calls GetGoogleSuggestions with 'test' as a sample query. GetMatchingItemsAsync is invoked by the autocomplete control and passes the filter text to GetGoogleSuggestions. Returns an empty list for null/whitespace queries, null on HTTP errors, and a list of suggestion strings otherwise.

```csharp
public class CustomSearch : IAutoCompleteFilterBehavior
{
     public CustomSearch()
     {
        GetGoogleSuggestions("test");
     }

     public Task<object> GetMatchingItemsAsync(SfAutoComplete source, AutoCompleteFilterInfo filterInfo)
     {
        return GetGoogleSuggestions(filterInfo.Text);
     }

     private async Task<object> GetGoogleSuggestions(string query)
     {
        if (string.IsNullOrEmpty(query) || string.IsNullOrWhiteSpace(query))
        {
           return new List<string>();
        }

        string xmlSuggestions;
        using (HttpClient client = new HttpClient())
        {
            try
            {
                var searchQuery = String.Format("https://www.google.com/complete/search?gl=us&hl=en&pws=0&output=toolbar&q={0}", query);
                xmlSuggestions = await client.GetStringAsync(searchQuery);
            }
            catch
            {
                return null;
            }
        }

        XDocument doc = XDocument.Parse(xmlSuggestions);
        var suggestions = doc.Descendants("CompleteSuggestion").Select(
                                         item => item.Element("suggestion").Attribute("data").Value);

        return suggestions.ToList();
     }
}
```

--------------------------------

### Handle RibbonGalleryItem pointer enter and exit events

Source: https://github.com/syncfusion/winui-demos/blob/master/ribbon/Assets/Ribbon/Ribbongallerypreview_cs.txt

Use these event handlers to update the view model's FontSize and FontWeight when the pointer enters or exits a RibbonGalleryItem. On pointer enter, the source item is cast from e.Source; on pointer exit, the selected item is retrieved from the RibbonGallery's SelectedItem. Both handlers update the same view model properties.

```csharp
private void OnItemPointerEnter(object sender, RibbonRoutedEventArgs e)
 {      
    RibbonGalleryItem selecteditem = (e.Source) as RibbonGalleryItem;
    if (selecteditem != null)
      {
        viewModel.FontSize = selecteditem.FontSize;
        viewModel.FontWeight = selecteditem.FontWeight;
      }
 }
```

```csharp
private void OnItemPointerExit(object sender, RibbonRoutedEventArgs e)
 {
   RibbonGalleryItem selecteditem = (RibbonGalleryItem)(sender as RibbonGallery).SelectedItem;
   if (selecteditem != null)
     {
        viewModel.FontSize = selecteditem.FontSize;
        viewModel.FontWeight = selecteditem.FontWeight;
     }
 }
```

--------------------------------

### Generate minute/second items in 5-minute intervals

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/TimePicker/TimePickerMinutesInterval_xaml.txt

Helper method that returns an ObservableCollection of strings representing minutes or seconds in increments of 5 (0, 5, 10, ... 55). Values below 10 are zero-padded unless the format pattern indicates a non-padded representation. Uses NumberFormatInfo for culture-invariant formatting.

```C#
/// <summary>
/// Get the ItemsSource for minute or second column.
/// </summary>
/// <returns>Return the ItemsSource for minute or second column.</returns>
private static ObservableCollection<string> GetMinutesOrSeconds(string pattern)
{      
    ObservableCollection<string> minutes = new ObservableCollection<string>();
    NumberFormatInfo provider = new NumberFormatInfo();
    for (int i = 0; i < 60; i = i + 5)
    {
        if (i > 9 || pattern == "%s" || pattern == "{second.integer}" || pattern == "%m" || pattern == "{minute.integer}")
        {
            minutes.Add(i.ToString(provider));
        }
        else
        {
            minutes.Add("0" + i.ToString(provider));
        }      
    }

    return minutes;
 }
```

--------------------------------

### RadialAxis_LabelPrepared event handler for compass labels

Source: https://github.com/syncfusion/winui-demos/blob/master/radialgauge/Assets/RadialGauge/BackgroundContent.cs.txt

Handles the LabelPrepared event of a radial axis to customize label text. Replaces '90' with 'E', '0' with 'N', '180' with 'S', '270' with 'W', and hides the label for '360' by setting it to an empty string. Used in the RadialGauge demo to display compass directions.

```csharp
private void RadialAxis_LabelPrepared(object sender, LabelPreparedEventArgs e)
{
    if (e.LabelText == "90")
    {
        e.LabelText = "E";
    }
    else if (e.LabelText == "360")
    {
        e.LabelText = string.Empty;
    }
    else
    {
        if (e.LabelText == "0")
        {
            e.LabelText = "N";
        }
        else if (e.LabelText == "180")
        {
            e.LabelText = "S";
        }
        else if (e.LabelText == "270")
        {
            e.LabelText = "W";
        }
    }
}
```

--------------------------------

### MultiSelection constructor initializes selected items

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/MultiSelectionBoxItemTemplate_cs.txt

Constructor for the MultiSelection class that initializes the component and adds two items from the VegetablesList to the customMultipleSelectionBox's SelectedItems collection.

```csharp
public MultiSelection()
{
   this.InitializeComponent();
   this.customMultipleSelectionBox.SelectedItems.Add(comboBoxViewModel.VegetablesList[1]);
   this.customMultipleSelectionBox.SelectedItems.Add(comboBoxViewModel.VegetablesList[2]);
}
```

--------------------------------

### CapitalCitySearchingBehavior class implementing IAutoCompleteSearchBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/AutoComplete/CustomFilter_cs.txt

Defines a custom search behavior for SfAutoComplete that highlights the first capital city in the filtered items. GetHighlightIndex returns the index of the first capital city, or 0 if none exist.

```csharp
public class CapitalCitySearchingBehavior : IAutoCompleteSearchBehavior
{
    public int GetHighlightIndex(SfAutoComplete source, AutoCompleteSearchInfo searchInfo)
    {
         var filteredCapitals = from CityInfo cityInfo in searchInfo.FilteredItems
                      where cityInfo.IsCapital
                      select searchInfo.FilteredItems.IndexOf(cityInfo);
            if (filteredCapitals.Count() > 0)
                return filteredCapitals.FirstOrDefault();

            return 0;
    }
}
```

--------------------------------

### Custom RadialAxis with GenerateVisibleLabels and ValueToCoefficient

Source: https://github.com/syncfusion/winui-demos/blob/master/radialgauge/Assets/RadialGauge/CustomScale.cs.txt

Defines a custom RadialAxis subclass that overrides GenerateVisibleLabels to create 9 custom labels and ValueToCoefficient to map values to coefficients with piecewise linear scaling. The ellipses (...) indicate omitted intermediate cases in the source.

```csharp
public class RadialAxisExt : RadialAxis
{
    public override List<AxisLabelData> GenerateVisibleLabels()
    {
        List<AxisLabelData> customLabels = new List<AxisLabelData>();
        for (int i = 0; i < 9; i++)
        {
            double value = CalculateLabelValue(i);
            AxisLabelData label = new AxisLabelData
            {
                Value = value,
                Text = value.ToString()
            };
            customLabels.Add(label);
        }

        return customLabels;
    }

    public override double ValueToCoefficient(double value)
    {
        if (value >= 0 && value <= 2)
        {
            return (value * 0.125) / 2;
        }
        else if (value > 2 && value <= 5)
        {
            return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
        }
        ...
        else if (value > 100 && value <= 150)
        {
            return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125);
        }
        else
        {
            return 1;
        }
    }

    double CalculateLabelValue(double value)
    {
        if (value == 0)
        {
            return 0;
        }
        else if (value == 1)
        {
            return 2;
        }
        else if (value == 2)
        {
            return 5;
        }
        ...
        else
        {
            return 150;
        }
    }
}
```

--------------------------------

### Apply SfShadow to a Button with theme-based background resources

Source: https://github.com/syncfusion/winui-demos/blob/master/shadow/Assets/Shadow/ShadowButton_xaml.txt

XAML snippet from the WinUI demo that wraps a Button in a Syncfusion SfShadow control. The shadow's BlurRadius, OffsetX, and OffsetY are bound to sliders named blurSlider, offsetX, and offsetY. The Button uses theme-specific SolidColorBrush resources (ButtonBackground, ButtonBackgroundPointerOver, ButtonBackgroundPressed) defined for Light and Dark themes.

```XAML
<Syncfusion:SfShadow x:Name="btnShadow" BlurRadius="{Binding ElementName=blurSlider,Path=Value}" 
      OffsetX="{Binding ElementName=offsetX,Path=Value}" 
      OffsetY="{Binding ElementName=offsetY,Path=Value}">
   <Button Height="50" Width="100" Content="Button" 
     Background="{ThemeResource ButtonBackground}" CornerRadius="5" >
       <Button.Resources>
         <ResourceDictionary>
           <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
               <SolidColorBrush x:Key="ButtonBackground" Color="#ffffff"/>
               <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#f0f0f0"/>
               <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#ffffff"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
               <SolidColorBrush x:Key="ButtonBackground" Color="#2a2a2a"/>
               <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#3a3a3a"/>
               <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#2a2a2a"/>
            </ResourceDictionary>
           </ResourceDictionary.ThemeDictionaries>
          </ResourceDictionary>
        </Button.Resources>                            
   </Button>
</Syncfusion:SfShadow>
```

--------------------------------

### Handle TimeFieldPrepared to customize minute and second columns

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/TimePicker/TimePickerMinutesInterval_xaml.txt

Event handler for TimeFieldPrepared that sets a custom ItemsSource for the Minute and Second columns using GetMinutesOrSeconds. The handler checks the column field and format before assigning the source.

```C#
private void OnTimeFieldPrepared(object sender, Syncfusion.UI.Xaml.Editors.DateTimeFieldPreparedEventArgs e)
{
   if (e.Column.Field == DateTimeField.Minute || e.Column.Field == DateTimeField.Second)
   {
      e.Column.ItemsSource = GetMinutesOrSeconds(e.Column.Format);
   }
}
```

--------------------------------

### RadialAxis_LabelPrepared event handler for custom gauge labels

Source: https://github.com/syncfusion/winui-demos/blob/master/radialgauge/Assets/RadialGauge/CustomLabels.cs.txt

Handles the LabelPrepared event to replace numeric axis labels with compass direction abbreviations. Replaces "80" and "0" with "N", and "70" with "NW". The ellipsis (...) indicates omitted code for other label replacements.

```csharp
private void RadialAxis_LabelPrepared(object sender, LabelPreparedEventArgs e)
{
    if (e.LabelText == "80" || e.LabelText == "0")
    {
        e.LabelText = "N";
    }
    ...
    else if (e.LabelText == "70")
    {
        e.LabelText = "NW";
    }
}
```

--------------------------------

### CitySearchingBehavior implementing IComboBoxSearchBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/CityFilteringBehaviour_cs.txt

Defines a custom search behavior for SfComboBox that highlights a specific city based on the country of the first filtered item. GetHighlightIndex returns the index of the matching city (e.g., Delhi for India, Washington for USA) or 0 if no match. The code is truncated in the source with '.......' indicating omitted parts.

```csharp
public class CitySearchingBehavior : IComboBoxSearchBehavior
{
    public int GetHighlightIndex(SfComboBox source, ComboBoxSearchInfo searchInfo)
    {
        List<int> list = new List<int>();

        CityInfo firstitem = searchInfo.FilteredItems[0] as CityInfo;
        if (firstitem.CountryName == "India")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "Delhi"
                          select searchInfo.FilteredItems.IndexOf(item));
        }
        else if (firstitem.CountryName == "USA")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "Washington"
                          select searchInfo.FilteredItems.IndexOf(item));
        }
        else if (firstitem.CountryName == "England")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "London"
                          select searchInfo.FilteredItems.IndexOf(item));
        }
        else if (firstitem.CountryName == "Canada")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "Ottawa"
                          select searchInfo.FilteredItems.IndexOf(item));
        }
        else if (firstitem.CountryName == "Indonesia")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "Jakarta"
                          select searchInfo.FilteredItems.IndexOf(item));
        }
        else if (firstitem.CountryName == "Germany")
        {
            list.AddRange(from CityInfo item in searchInfo.FilteredItems
                          let filterItem = this.GetStringFromMemberPath(item, "CityName")
                          where filterItem == "Berlin"
                          select searchInfo.FilteredItems.IndexOf(item));
        }

        return list.Count > 0 ? list[0] : 0;
    }

    .......
}
```

--------------------------------

### CustomAsyncFilter: IAutoCompleteFilterBehavior implementation

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/AutoComplete/CustomAsyncFilter_cs.txt

Implements IAutoCompleteFilterBehavior to provide custom async filtering for SfAutoComplete. Cancels and disposes any previous CancellationTokenSource before creating a new one, then runs a task that generates a list of 100 items by appending numbers 1-99 to the filter text. The cancellation token is passed to Task.Run to support cancellation of in-flight operations.

```csharp
public class CustomAsyncFilter : IAutoCompleteFilterBehavior
{
   /// <summary>
   /// Gets the cancellation token source.
   /// </summary>
   CancellationTokenSource cancellationTokenSource;

   public async Task<object> GetMatchingItemsAsync(SfAutoComplete source, AutoCompleteFilterInfo filterInfo)
   {
       if (this.cancellationTokenSource != null)
       {
          this.cancellationTokenSource.Cancel();
          this.cancellationTokenSource.Dispose();
       }

       this.cancellationTokenSource = new CancellationTokenSource();
       CancellationToken token = this.cancellationTokenSource.Token;

       return await Task.Run(() =>
       {
          List<string> list = new List<string>();
          for (int i = 1; i < 100; i++)
          {
              list.Add(filterInfo.Text + i);
          }

          return list;
       }, token);                                                 
   }
}
```

--------------------------------

### CitySearchingBehavior implementing IComboBoxSearchBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/CityFilteringBehavior_cs.txt

Custom search behavior for SfComboBox that highlights the first capital city in the filtered items. Returns the index of the first capital city, or 0 if none exist.

```C#
public class CitySearchingBehavior : IComboBoxSearchBehavior
{
    public int GetHighlightIndex(SfComboBox source, ComboBoxSearchInfo searchInfo)
    {
        var filteredCapitals = from CityInfo cityInfo in searchInfo.FilteredItems
                               where cityInfo.IsCapital
                               select searchInfo.FilteredItems.IndexOf(cityInfo);
        if (filteredCapitals.Count() > 0)
            return filteredCapitals.FirstOrDefault();

        return 0;
    }
}
```

--------------------------------

### CitySearchingBehavior class overriding GetHighlightIndex

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/CitySearchingBehaviour_cs .txt

Custom ComboBoxSearchBehavior that highlights a specific city based on the country of the first filtered item. Overrides GetHighlightIndex to return the index of a predefined city (e.g., Delhi for India, Washington for USA) when the first filtered item's CountryName matches, otherwise returns 0. Includes a helper GetStringFromMemberPath to read property values via reflection.

```C#
class CitySearchingBehavior : ComboBoxSearchBehavior
  {
        protected override int GetHighlightIndex(ComboBoxSearchSettings searchSettings)
        {
            List<int> list = new List<int>();

            CityInfo firstitem = searchSettings.FilteredItems[0] as CityInfo;
            if (firstitem.CountryName == "India")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "Delhi"
                              select searchSettings.FilteredItems.IndexOf(item));

            }
            if (firstitem.CountryName == "USA")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "Washington"
                              select searchSettings.FilteredItems.IndexOf(item));

            }
            if (firstitem.CountryName == "England")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "London"
                              select searchSettings.FilteredItems.IndexOf(item));

            }
            if (firstitem.CountryName == "Canada")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "Ottawa"
                              select searchSettings.FilteredItems.IndexOf(item));

            }
            if (firstitem.CountryName == "Indonesia")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "Jakarta"
                              select searchSettings.FilteredItems.IndexOf(item));

            }
            if (firstitem.CountryName == "Germany")
            {

                list.AddRange(from CityInfo item in searchSettings.FilteredItems
                              let filterItem = this.GetStringFromMemberPath(item, "CityName")
                              where filterItem == "Berlin"
                              select searchSettings.FilteredItems.IndexOf(item));

            }

            if (list.Count > 0)
            {
                return list[0];
            }
            else
            {
                return 0;
            }
        }
        private string GetStringFromMemberPath(object item, string path)
        {
            string value = item.ToString();
            if (!string.IsNullOrEmpty(path))
            {
                value = item.GetType()?.GetRuntimeProperty(path)?.GetValue(item).ToString();
            }
            return value;
        }
 }
```

--------------------------------

### Customize thumb template with ellipses and tooltip style

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/RangeSlider/ThumbColorCustomization.xaml.txt

Configures a SfRangeSlider with a custom ThumbStyle that replaces the default thumb with two ellipses (outer ring and inner fill) and includes a placeholder for a custom ToolTipStyle. The RangeStart and RangeEnd use substitution values.

```XAML
<slider:SfRangeSlider RangeStart="$(thumbColorRangeSliderRangeStartSubstitute)"
                      RangeEnd="$(thumbColorRangeSliderRangeEndSubstitute)"
                      ToolTipFormat="N0"
                      ThumbOverlayRadius="10"
                      ThumbBackground="#00b3ce"
                      ...>

    <slider:SfRangeSlider.ThumbStyle>
        <Style TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <Ellipse Height="{TemplateBinding Height}"
                                     Width="{TemplateBinding Width}"
                                     Fill="WhiteSmoke"
                                     Stroke="{TemplateBinding Background}"
                                     StrokeThickness="2" />
                            <Ellipse Height="12"
                                     Width="12"
                                     Fill="{TemplateBinding Background}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </slider:SfRangeSlider.ThumbStyle>

    <slider:SfRangeSlider.ToolTipStyle>
        ...
    </slider:SfRangeSlider.ToolTipStyle>
</slider:SfRangeSlider>
```

--------------------------------

### Apply BlackoutWeekendTemplate to blackout dates in DatePicker

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/DatePicker/BlackoutDateTemplate_cs.txt

Handles the ItemPrepared event to apply a custom template to day cells that fall on blackout dates. Checks that the field is Day and the date is contained in BlackoutDates before setting the ContentTemplate.

```csharp
private void OnDateFieldItemPrepared(object sender, Syncfusion.UI.Xaml.Editors.DateTimeFieldItemPreparedEventArgs e)
{
    if (this.BlackoutPicker == null)
    {
        return;
    }        

    var blackoutDates = this.BlackoutPicker.BlackoutDates;
    if (blackoutDates != null && e.ItemInfo != null && e.ItemInfo.Field == Syncfusion.UI.Xaml.Editors.DateTimeField.Day &&
        e.ItemInfo.DateTime.Value != null &&  blackoutDates.Any() && blackoutDates.Contains(e.ItemInfo.DateTime.Value.Date))
    {
        e.Element.ContentTemplate = this.Resources["BlackoutWeekendTemplate"] as DataTemplate;
    }        
}
```

--------------------------------

### Bind SfBadge to ListView item count

Source: https://github.com/syncfusion/winui-demos/blob/master/notification/Assets/Notification/BadgeWithListView_xaml.txt

Displays a badge with the unread message count for each item in a ListView. The SfBadge control is bound to the UnreadMessageount property of the data item, while the item name is shown in a ContentPresenter. Requires a data context with MailItems collection and properties ItemName and UnreadMessageount.

```XAML
<ListView ItemsSource="{Binding MailItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Grid.Column="0" Content="{Binding ItemName}"/>
                <syncfusion:SfBadge Grid.Column="1" Content="{Binding UnreadMessageount}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```

--------------------------------

### Bind SfAvatarView GroupSource to ListView ItemsSource

Source: https://github.com/syncfusion/winui-demos/blob/master/avatarview/Assets/AvatarView/groupview_xaml.txt

Use SfAvatarView with ContentType="Group" inside a ListView to display grouped avatars. Bind GroupSource to a collection of people and set member paths for initials, background color, initials color, and image source. Requires a ListViewCollection for the ListView ItemsSource and a PeopleCollection with properties Name, BackgroundColor, InitialColor, and ImagePath.

```XAML
<ListView ItemsSource="{Binding ListViewCollection}">
    <syncfusion:SfAvatarView ContentType="Group" 
                             InitialsMemberPath="Name"  
                             GroupSource="{Binding PeopleCollection}" 
                             BackgroundColorMemberPath="BackgroundColor"
                             InitialsColorMemberPath="InitialColor"
                             ImageSourceMemberPath="ImagePath"/>
</ListView>
```

--------------------------------

### Override SelectTemplateCore for SfRating ViewTemplateSelector

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/Rating/viewtemplateselector_cs.txt

Custom ViewTemplateSelector for SfRating that returns SelectedTemplate when the rating item matches the current rating value, otherwise returns UnselectedTemplate. Casts the container to SfRating and the item to SfRatingItem, returning null if the item is not an SfRatingItem.

```csharp
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
   SfRating Rating = container as SfRating; 
   SfRatingItem RatingItem = item as SfRatingItem; 
   if(RatingItem == null)
      return null;
   if(RatingItem.IsSelected) 
      if (Rating.Items.IndexOf(RatingItem)+1 == (Rating.Value)) 
          return SelectedTemplate; 
   return UnselectedTemplate; 
}
```

--------------------------------

### musicShapePointer_ValueChanging event handler

Source: https://github.com/syncfusion/winui-demos/blob/master/lineargauge/Assets/LinearGauge/VolumeSettingsDemo.xaml.cs.txt

Handles the ValueChanging event of a shape pointer in a linear gauge. Cancels the change when the new value is <= 0 and updates a FontIcon glyph based on the value.

```csharp
private void musicShapePointer_ValueChanging(object sender, ValueChangingEventArgs e)
{
    string glyph;
    if (e.NewValue <= 0)
    {
        glyph = "\uED30";
        e.Cancel = true;
    }
    else
    {
        glyph = "\uED33";
    }

    if (this.musicFontIcon.Glyph != glyph)
    {
        this.musicFontIcon.Glyph = glyph;
    }
}
```

--------------------------------

### LogarithmicSlider class overriding SfSlider label and value conversion methods

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/SLogarithmicRange.xaml.cs.txt

Custom SfSlider subclass that displays labels at powers of 10 and maps slider factors to/from a logarithmic scale. Overrides GenerateVisibleLabels, ValueToFactor, and FactorToValue using a base-10 logarithm; labelsCount is set from the generated label list and used in the factor conversions.

```csharp
public class LogarithmicSlider : SfSlider
{
    int labelsCount;

    public override List<SliderLabelInfo> GenerateVisibleLabels()
    {
        List<SliderLabelInfo> labelInfos = new List<SliderLabelInfo>();
        int minimum = (int)LogBase(this.Minimum, 10);
        int maximum = (int)LogBase(this.Maximum, 10);
        for (int i = minimum; i <= maximum; i++)
        {
            double value = Math.Floor(Math.Pow(10, i)); // logBase  value is 10
            SliderLabelInfo label = new SliderLabelInfo()
            {
                Value = value,
                Text = value.ToString()
            };
            labelInfos.Add(label);
        }

        labelsCount = labelInfos.Count;
        return labelInfos;
    }

    private double LogBase(double value, int baseValue)
    {
        return Math.Log(value) / Math.Log(baseValue);
    }

    public override double ValueToFactor(double value)
    {
        return LogBase(value, 10) / (labelsCount - 1);
    }

    public override double FactorToValue(double factor)
    {
        return Math.Pow(Math.E, factor * (labelsCount - 1) * Math.Log(10));
    }
}
```

--------------------------------

### SelectTemplateCore override for SfRating image templates

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/Rating/imagetemplateselector_cs.txt

Overrides SelectTemplateCore to return SadTemplate when the rating item is selected and its index matches the current rating value, otherwise returns SadUnselectedTemplate. Used with SfRating's ItemTemplateSelector to display different images for selected and unselected rating items.

```C#
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{ 
   SfRating rating = container as SfRating; 
   SfRatingItem ratingItem = item as SfRatingItem; 
   if(ratingItem == null)
      return null;
   if(ratingItem.IsSelected) 
      if (rating.Items.IndexOf(ratingItem)+1 == (rating.Value)) 
          return SadTemplate; 
   return SadUnselectedTemplate; 
}
```

--------------------------------

### Configure SfRangeSlider with Divider and Color Customization

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/RangeSlider/DivColorCustomization.xaml.txt

Configures an SfRangeSlider with dividers, labels, and custom colors for the active/inactive track, thumb, divider stroke, and thumb overlay. Uses substituted values for RangeStart and RangeEnd, and includes placeholder ThumbStyle and ToolTipStyle sections.

```XAML
<slider:SfRangeSlider RangeStart="$(dividerColorRangeSliderRangeStartSubstitute)"
                      RangeEnd="$(dividerColorRangeSliderRangeEndSubstitute)"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      Interval="20"
                      StepFrequency="20"
                      ShowLabels="True"
                      ToolTipFormat="N0"
                      ThumbOverlayRadius="10"
                      ThumbBackground="#A542F0"
                      DividerStroke="#A542F0"
                      DividerStrokeThickness="2"
                      ActiveTrackFill="#A542F0"
                      InactiveTrackFill="#66A542F0"
                      ThumbOverlayFill="#9b28ee"
                      FontWeight="SemiBold"
                      LabelOffset="10">

    <slider:SfRangeSlider.ThumbStyle>
        ...
    </slider:SfRangeSlider.ThumbStyle>

    <slider:SfRangeSlider.ToolTipStyle>
        ...
    </slider:SfRangeSlider.ToolTipStyle>
</slider:SfRangeSlider>
```

--------------------------------

### Define Thumb Background Brushes for PointerOver and Pressed States

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/ThumbColorCustomization.xaml.txt

Defines SolidColorBrush resources for the slider thumb's pointer-over and pressed background colors. These keys are used by the SyncfusionSliderThumbBackgroundPointerOver and SyncfusionSliderThumbBackgroundPressed theme resources.

```XAML
<SolidColorBrush x:Key="SyncfusionSliderThumbBackgroundPointerOver">#00bedb</SolidColorBrush>
<SolidColorBrush x:Key="SyncfusionSliderThumbBackgroundPressed">#00abc4</SolidColorBrush>
```

--------------------------------

### CustomNumberConverter class implementing IValueConverter

Source: https://github.com/syncfusion/winui-demos/blob/master/notification/Assets/Notification/BadgeContentTemplate_cs.txt

Converts a numeric badge value to a shortened string: returns the number if <= 99, '99+' for 100-999, and a 'K' suffix for numbers below 99999. The ellipsis indicates omitted logic for larger numbers.

```csharp
    public class CustomNumberConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (int.TryParse(value.ToString(), out int number))
            {
                if (number <= 99)
                {
                    return value;
                }
                else if (number <= 999)
                {
                    return "99+";
                }
                else if(number < 99999)
                {
                    return (number / 1000).ToString("0.#") + "K";
                }
                ...
            }
        }
    }
```

--------------------------------

### SfTimePicker with TimeFieldPrepared event handler

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/TimePicker/TimePickerMinutesInterval_xaml.txt

XAML declaration of a SfTimePicker with EditMode set to None and the TimeFieldPrepared event wired to OnTimeFieldPrepared. The picker is centered with a minimum width of 180.

```XAML
<editors:SfTimePicker
  MinWidth="180"
  HorizontalAlignment="Center"
  VerticalAlignment="Center"
  EditMode="None"
  TimeFieldPrepared="OnTimeFieldPrepared" />
```

--------------------------------

### CityFilteringBehavior implementing IComboBoxFilterBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/CityFilteringBehavior_cs.txt

Custom filtering behavior for SfComboBox that matches items by CountryName or CityName using a case-insensitive StartsWith comparison. Returns indices of matching CityInfo items.

```C#
public class CityFilteringBehavior : IComboBoxFilterBehavior
{
    public List<int> GetMatchingIndexes(SfComboBox source, ComboBoxFilterInfo filterInfo)
    {
        List<int> filteredlist = new List<int>();
        List<CityInfo> CityItems = source.Items.OfType<CityInfo>().ToList(); 

        filteredlist.AddRange(from CityInfo item in CityItems
                        where item.CountryName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase) ||
                                   item.CityName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase)
                             select CityItems.IndexOf(item));
        return filteredlist;
    }                                       
}
```

--------------------------------

### Define Slider Track Corner Radius and Fill Brushes

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/TrackStyleCustomization.xaml.txt

Defines resource keys for active/inactive track corner radii and pointer-over/pressed fill brushes. The corner radius values are used by the slider's track rendering, and the brushes override the default track colors on pointer states.

```XAML
<x:Double x:Key="SyncfusionSliderActiveTrackCornerRadius">5</x:Double>
<x:Double x:Key="SyncfusionSliderInactiveTrackCornerRadius">2.5</x:Double>

<SolidColorBrush x:Key="SyncfusionSliderActiveTrackFillPointerOver"
                 Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SyncfusionSliderActiveTrackFillPressed"
                 Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SyncfusionSliderInactiveTrackFillPointerOver"
                 Color="{ThemeResource SystemAltHighColor}" />
<SolidColorBrush x:Key="SyncfusionSliderInactiveTrackFillPressed"
                 Color="{ThemeResource SystemAltHighColor}" />
```

--------------------------------

### Customize SfSlider Thumb and ToolTip Styles

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/ThumbColorCustomization.xaml.txt

Configures an SfSlider with a custom thumb template and tooltip style. The thumb is rendered as two ellipses with a white fill and a stroke using the thumb background, and the tooltip style is customized (details omitted).

```XAML
<slider:SfSlider Value="$(thumbColorSliderValueSubstitute)"
                 ThumbBackground="#00b3ce"
                 ToolTipFormat="N0"
                 ThumbOverlayRadius="10"
                 ThumbOverlayFill="#00c4ce"
                 ...>
    <slider:SfSlider.ThumbStyle>
        <Style TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <Ellipse Height="{TemplateBinding Height}"
                                     Width="{TemplateBinding Width}"
                                     Fill="WhiteSmoke"
                                     Stroke="{TemplateBinding Background}"
                                     StrokeThickness="2" />
                            <Ellipse Height="12"
                                     Width="12"
                                     Fill="{TemplateBinding Background}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </slider:SfSlider.ThumbStyle>

    <slider:SfSlider.ToolTipStyle>
        ...
    </slider:SfSlider.ToolTipStyle>
</slider:SfSlider>
```

--------------------------------

### CityFilteringBehaviour implementing IComboBoxFilterBehavior

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/CityFilteringBehaviour_cs.txt

Defines a custom filter behavior for SfComboBox that matches items by CountryName or CityName using StartsWith with CurrentCultureIgnoreCase. The GetMatchingIndexes method returns indices of matching CityInfo items, avoiding duplicates when both country and city match. Requires CityInfo type with CountryName and CityName properties.

```csharp
public class CityFilteringBehaviour : IComboBoxFilterBehavior
{
    public List<int> GetMatchingIndexes(SfComboBox source, ComboBoxFilterInfo filterInfo)
    {
       List<int> filteredlist = new List<int>();
       List<CityInfo> CityItems = source.Items.OfType<CityInfo>().ToList();

       filteredlist.AddRange(from CityInfo item in CityItems
                             let filterItem = this.GetStringFromMemberPath(item, "CountryName")
                             where filterItem.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase)
                             select CityItems.IndexOf(item));

       filteredlist.AddRange(from CityInfo item in CityItems
                            let filterItem = this.GetStringFromMemberPath(item, "CityName")
                            let index= CityItems.IndexOf(item)
                            where filterItem.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase) && !filteredlist.Contains(index)
                            select CityItems.IndexOf(item));
       return filteredlist;
    }      

    private string GetStringFromMemberPath(object item, string path)
    {
       string value = item.ToString();
       if (!string.IsNullOrEmpty(path))
       {
          value = item.GetType()?.GetRuntimeProperty(path)?.GetValue(item).ToString();
       }

       return value;
    }                                                     
}
```

--------------------------------

### Customize Slider Dividers with DividerTemplate

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/DivTemplateCustomization.xaml.txt

Configures a SfSlider to show dividers with custom height, width, stroke, and stroke thickness. The DividerTemplate uses a Rectangle bound to the slider's divider properties, allowing full visual customization of the divider appearance.

```XAML
<slider:SfSlider Value="$(dividerTemplateSliderValueSubstitute)"
                 ShowDividers="True"
                 DividerHeight="10"
                 ToolTipFormat="N0"
                 DividerWidth="10"
                 DividerStroke="#FF5722"
                 DividerStrokeThickness="2"
                 ...
                 Interval="20"
                 ThumbOverlayRadius="10"
                 StepFrequency="20"
                 ActiveTrackHeight="5"
                 InactiveTrackHeight="5">

    <slider:SfSlider.DividerTemplate>
        <DataTemplate>
            <Rectangle Height="{Binding DividerHeight}"
                       Width="{Binding DividerWidth}"
                       Fill="{ThemeResource SystemAltHighColor}"
                       Stroke="{Binding DividerStroke}"
                       StrokeThickness="{Binding DividerStrokeThickness}" />
        </DataTemplate>
    </slider:SfSlider.DividerTemplate>
    
    <slider:SfSlider.ThumbStyle>
        ...
    </slider:SfSlider.ThumbStyle>

    <slider:SfSlider.ToolTipStyle>
        ...
    </slider:SfSlider.ToolTipStyle>
</slider:SfSlider>
```

--------------------------------

### LogarithmicRangeSlider class overriding SfRangeSlider methods

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/RangeSlider/RSLogarithmicRange.xaml.cs.txt

Custom SfRangeSlider subclass that generates logarithmic labels and maps values to/from factors using base 10. Overrides GenerateVisibleLabels, ValueToFactor, and FactorToValue to provide a logarithmic scale for the range slider.

```csharp
public class LogarithmicRangeSlider : SfRangeSlider
{
    int labelsCount;

    public override List<SliderLabelInfo> GenerateVisibleLabels()
    {
        List<SliderLabelInfo> labelInfos = new List<SliderLabelInfo>();
        int minimum = (int)LogBase(this.Minimum, 10);
        int maximum = (int)LogBase(this.Maximum, 10);
        for (int i = minimum; i <= maximum; i++)
        {
            double value = Math.Floor(Math.Pow(10, i)); // logBase  value is 10
            SliderLabelInfo label = new SliderLabelInfo()
            {
                Value = value,
                Text = value.ToString()
            };
            labelInfos.Add(label);
        }

        labelsCount = labelInfos.Count;
        return labelInfos;
    }

    private double LogBase(double value, int baseValue)
    {
        return Math.Log(value) / Math.Log(baseValue);
    }

    public override double ValueToFactor(double value)
    {
        return LogBase(value, 10) / (labelsCount - 1);
    }

    public override double FactorToValue(double factor)
    {
        return Math.Pow(Math.E, factor * (labelsCount - 1) * Math.Log(10));
    }
}
```

--------------------------------

### Customize Day Column Format in DateTimeFieldPrepared

Source: https://github.com/syncfusion/winui-demos/blob/master/datetime/Assets/DatePicker/CustomFormatString_cs.txt

Handles the DateTimeFieldPrepared event to customize the Day column's format and item template. Sets the format to 'ddd dd' and assigns a custom DataTemplate from resources.

```csharp
private void OnDateFieldPrepared(object sender, Syncfusion.UI.Xaml.Editors.DateTimeFieldPreparedEventArgs e)
{
    if (e.Column != null && e.Column.Field == Syncfusion.UI.Xaml.Editors.DateTimeField.Day)
    {
       e.Column.Format = "ddd dd";
       e.Column.ItemTemplate = this.Resources["CustomFormatTemplate"] as DataTemplate;
    }        
}
```

--------------------------------

### Group SfComboBox items using CollectionViewSource and GroupStyle

Source: https://github.com/syncfusion/winui-demos/blob/master/editor/Assets/ComboBox/Grouping_xaml.txt

Defines a CollectionViewSource bound to a Vegetables collection with IsSourceGrouped=True, then binds an SfComboBox to its View. A GroupStyle with a HeaderTemplate displays the group key as a TextBlock header.

```XAML
<CollectionViewSource x:Name="Vegetables" Source="{Binding Vegetables}" IsSourceGrouped="True"/>

<editors:SfComboBox ItemsSource="{x:Bind Vegetables.View, Mode=OneWay}">
    <editors:SfComboBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Key}" VerticalAlignment="Center"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </editors:SfComboBox.GroupStyle>
</editors:SfComboBox>
```

--------------------------------

### Configure SfSlider with Custom Track Styles

Source: https://github.com/syncfusion/winui-demos/blob/master/sliders/Assets/Slider/TrackStyleCustomization.xaml.txt

Configures an SfSlider with custom active and inactive track styles, along with properties for value, range, ticks, labels, and tooltip. The ActiveTrackStyle and InactiveTrackStyle are set to the SliderTrackStyle resource, and the ThumbStyle is customized in the placeholder.

```XAML
<slider:SfSlider Value="$(trackStyleSliderValueSubstitute)"
                 Width="500"
                 Minimum="-20"
                 Maximum="20"
                 Interval="10"
                 ToolTipFormat="N0"
                 ActiveTrackHeight="15"
                 InactiveTrackHeight="10"
                 ShowLabels="True"
                 ShowTicks="True"
                 MinorTicksPerInterval="0"
                 ThumbOverlayRadius="10"
                 ActiveTrackStyle="{StaticResource SliderTrackStyle}"
                 InactiveTrackStyle="{StaticResource SliderTrackStyle}">
    ...
    <slider:SfSlider.ThumbStyle>
        ...
    </slider:SfSlider.ThumbStyle>
</slider:SfSlider>
```

--------------------------------

### Cancel ValueChanging when new value is below 50

Source: https://github.com/syncfusion/winui-demos/blob/master/lineargauge/Assets/LinearGauge/HeightCalculatorDemo.xaml.cs.txt

Handles the ValueChanging event of a shape pointer in a WinUI LinearGauge. Cancels the change if the new value is less than 50, preventing the pointer from moving below that threshold.

```csharp
private void shapePointer_ValueChanging(object sender, ValueChangingEventArgs e)
{
    if (e.NewValue < 50)
    {
        e.Cancel = true;
    }
}
```
Tokens:
Raw