Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

842969-Update the README.md file, renamed IsChecked as IsSelected, and remove the chip text color #1

Merged
merged 1 commit into from
Aug 29, 2023
Merged

842969-Update the README.md file, renamed IsChecked as IsSelected, and remove the chip text color #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions ChipGroup-GettingStarted/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,11 @@
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="ChipTextColor" Value="Black" />
<Setter Property="ChipBackground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="ChipTextColor" Value="White" />
<Setter Property="ChipBackground" Value="#512dcd" />
</VisualState.Setters>
</VisualState>
Expand All @@ -36,10 +34,10 @@
InputTransparent="True"
BackgroundColor="Transparent">
<chip:SfChip.Triggers>
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsChecked}" Value="True">
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="True">
<Setter Property="TextColor" Value="White"/>
</DataTrigger>
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsChecked}" Value="False">
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="False">
<Setter Property="TextColor" Value="Red"/>
</DataTrigger>
</chip:SfChip.Triggers>
Expand Down
4 changes: 2 additions & 2 deletions ChipGroup-GettingStarted/MainPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ private void OnSelectionChanged(object sender, Syncfusion.Maui.Core.Chips.Select
{
if (e.AddedItem != null)
{
(e.AddedItem as Language).IsChecked = true;
(e.AddedItem as Language).IsSelected = true;
}

if (e.RemovedItem != null)
{
(e.RemovedItem as Language).IsChecked = false;
(e.RemovedItem as Language).IsSelected = false;
}
}

Expand Down
10 changes: 5 additions & 5 deletions ChipGroup-GettingStarted/Model.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@ public string Name
set;
}

private bool isChecked = false;
private bool isSelected = false;

public event PropertyChangedEventHandler PropertyChanged;

public bool IsChecked
public bool IsSelected
{
get { return isChecked; }
get { return isSelected; }
set
{
isChecked = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsChecked"));
isSelected = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsSelected"));
}
}
}
Expand Down
168 changes: 167 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,168 @@
# How-to-remove-the-indicator-icon-from-.NET-MAUI-SfChipGroup
The sample demonstrates how to remove the indicator icon from .NET MAUI chip group [SfChipGroup]
This sample explains how to remove the selection indicator icon in the .NET MAUI ChipGroup (SfChipGroup) when ChipType is Filter.

### Steps

### Step 1: Enable the ChipType as a Filter for multiple selections

To select multiple chips in the ChipGroup, set the ChipType property to “Filter”. This configuration allows users to choose more than one chip within the group.

XAML
```
<chip:SfChipGroup ChipType="Filter">
...
</chip:SfChipGroup>
```
### Step 2: Remove the Selection indicator icon of ChipGroup:

You can remove the indicator icon from the .NET MAUI ChipGroup by using the ItemTemplate property. Inside this template, add the Chip control as the content. It will show the language names only.

XAML
```
<chip:SfChipGroup x:Name="chipGroup"
ChipType="Filter">
<chip:SfChipGroup.ItemTemplate>
<DataTemplate>
<chip:SfChip Text="{Binding Name}" />
</DataTemplate>
</chip:SfChipGroup.ItemTemplate>
</chip:SfChipGroup>
```
### Step 3: Added the Visual States for the Selected Chip Background

To set the background color for the selected chips, you can use the visual states for the chip group as given below. Also, set the chip’s BackgroundColor of SfChip to transparent, because we have dynamically changed the ChipBackground of ChipGroup items using Visual States. Additionally, Setting InputTransparent as false in Chip to disables inputs, and its children should receive input.

XAML
```
<chip:SfChipGroup x:Name="chipGroup"
ChipType="Filter">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="ChipBackground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="ChipBackground" Value="#512dcd" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<chip:SfChipGroup.ItemTemplate>
<DataTemplate>
<chip:SfChip InputTransparent="True"
BackgroundColor="Transparent">
...
</chip:SfChip>
</DataTemplate>
</chip:SfChipGroup.ItemTemplate>
</chip:SfChipGroup>
```
### Step 4: Change the Selected chip TextColor

Add the DataTriggers to change the TextColor of the Chip based on the IsSelected property from the Language class. You can set the value for the IsSelected property in the SelectionChanged Event.

XAML
```
<chip:SfChipGroup x:Name="chipGroup"
ChipType="Filter"
ItemsSource="{Binding Languages}"
SelectionChanged="OnSelectionChanged">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="ChipBackground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="ChipBackground" Value="#512dcd" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<chip:SfChipGroup.ItemTemplate>
<DataTemplate>
<chip:SfChip Text="{Binding Name}"
InputTransparent="True"
BackgroundColor="Transparent">
<chip:SfChip.Triggers>
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="True">
<Setter Property="TextColor" Value="White"/>
</DataTrigger>
<DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="False">
<Setter Property="TextColor" Value="Red"/>
</DataTrigger>
</chip:SfChip.Triggers>
</chip:SfChip>
</DataTemplate>
</chip:SfChipGroup.ItemTemplate>
</chip:SfChipGroup>
```
### SelectionChanged Event

private void OnSelectionChanged(object sender, Syncfusion.Maui.Core.Chips.SelectionChangedEventArgs e)
{
if (e.AddedItem != null)
{
(e.AddedItem as Language).IsSelected= true;
}

if (e.RemovedItem != null)
{
(e.RemovedItem as Language).IsSelected= false;
}
}
### Populate chip items
```
public class Language : INotifyPropertyChanged
{
public string Name
{
get;
set;
}

private bool isSelected= false;

public event PropertyChangedEventHandler PropertyChanged;

public bool IsSelected
{
get { return isSelected; }
set
{
isSelected= value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsSelected"));
}
}
}
```
```
public class ViewModel
{
public ObservableCollection<Language> Languages { get; set; }

public ViewModel()
{
this.Languages = new ObservableCollection<Language>();

Languages.Add(new Language() { Name = "C#" });
Languages.Add(new Language() { Name = "Python" });
Languages.Add(new Language() { Name = "Java" });
Languages.Add(new Language() { Name = "Js" });
}
}
```
## Requirements to run the demo

* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) or [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/)

## Troubleshooting

### Path too long exception

If you are a facing path too long exception when building this example project, close Visual Studio rename the repository to short, and build the project.