Select the first item by default

[David]

I have the following code, that when executing I always see the 3 items selected by default, I only want the first to appear, is there any way? thanks

<buttons:SfChipGroup x:Name="cg_Tipo" Type="Choice" ChoiceMode="Single" HorizontalOptions="Center">

                <buttons:SfChipGroup.Items>

                    <buttons:SfChip x:Name="cp_1" Text="1" BorderWidth="2" BorderColor="Black" CornerRadius = "5"  />

                    <buttons:SfChip x:Name="cp_2" Text="2" BorderWidth="2" BorderColor="Black" CornerRadius = "5" />

                    <buttons:SfChip x:Name="cp_3" Text="3" BorderWidth="2" BorderColor="Black" CornerRadius = "5" />

                </buttons:SfChipGroup.Items>

            </buttons:SfChipGroup>

[Yuvaraj Palanisamy]

Hi David, 

 

Greetings from syncfusion. 

 

As your requirement is to select first chip item by default. On adding SfChip as item to the SfChipGroup, it shows the default behavior of the chip. Hence need to customize each chip item by adding the BackgroundColor for the Chip and SelectedChipBackgroundColor, ChipBackgroundColor for the ChipGroup. 

 

Please check the code snippet below.  

<buttons:SfChipGroup x:Name="chip" Type="Choice" ChoiceMode="Single"  

                                 SelectedChipBackgroundColor="Green" ChipBackgroundColor="Brown"   

                                 HorizontalOptions="Center">  

         <buttons:SfChipGroup.Items>  

                    <buttons:SfChip x:Name="chip1" Text="1" BackgroundColor="Brown"                      BorderWidth="2" BorderColor="Black" CornerRadius="5"/>  

                    <buttons:SfChip x:Name="chip2" Text="2" BackgroundColor="Brown" BorderWidth="2" BorderColor="Black" CornerRadius="5"/>  

                    <buttons:SfChip x:Name="chip3" Text="3" BackgroundColor="Brown" BorderWidth="2" BorderColor="Black" CornerRadius="5"/>  

 

        </buttons:SfChipGroup.Items>  

 </buttons:SfChipGroup>  

For first item to be selected, need to add below code, 

  

chip.SelectedItem = chip.Items[0];  

 

Or we also can possible to add chip items using ItemSource property.  

    

<ContentPage.BindingContext>  

        <viewModel: ViewModel x:Name="viewModel"/>  

</ContentPage.BindingContext>  

  

<buttons:SfChipGroup x:Name="chip" Type="Choice" ChoiceMode="Single"  

                                 SelectedChipBackgroundColor="Green" ChipBackgroundColor="Brown"   

                                 HorizontalOptions="Center" ItemsSource="{Binding list}"/>              

   

chip.SelectedItem = viewModel.list[0];  

   

public class ViewModel   

{  

   public ViewModel()  

      {  

         list = new ObservableCollection<string>()  

         {  

             "1", "2", "3", "4"  

         };  

      }  

}  

 

Regards, 

Yuvaraj.