How to change the checked symbol ?

[Aprile Salvatore]

Hi, I want to change a checked symbol. I want customize this. Is possible add a different image?

If no is possible to change the dimension ?

the control is this:

   <syncButton:SfCheckBox Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="10,0,0,-5"  IsChecked="{Binding AcceptCheckBox1}" 

                                       Style="{StaticResource AcceptCheckBox}"  Text="{Binding CurrentResources[lblAcceptPrivacy]}" FontFamily="MontserratRegular" >

                </syncButton:SfCheckBox>

The style is this:

    <Style x:Key="AcceptCheckBox" TargetType="syncButton:SfCheckBox">

        <Setter Property="WidthRequest" Value="50"></Setter>

        <Setter Property="CornerRadius" Value="15"></Setter>

        <Setter Property="FontSize" Value="16" />

        <Setter Property="TickColor" Value="{StaticResource CheckBoxCheckedColor}"></Setter>

        <Setter Property="CheckedColor" Value="{StaticResource CheckBoxBackgroundColor}"></Setter>

        <Setter Property="TextColor" Value="{StaticResource CheckBoxBackgroundColor}"></Setter>

        <Setter Property="ControlSize" >

            <Setter.Value>

                <OnPlatform x:TypeArguments="x:Double">

                    <On Platform="Android" Value="50"/>

                    <On Platform="iOS" Value="30"/>

                </OnPlatform>

            </Setter.Value>

        </Setter>

    </Style>

[Yuvaraj Palanisamy]

Hi Aprile Salvatore, 

 

Greetings from Syncfusion.  

  

Currently we don’t have support to customize the SfCheckBox`s Box with custom icon, so we have prepared the custom solution using SfButton to achieve your requirement and the sample will be downloaded from below link.  

   

Sample: https://www.syncfusion.com/downloads/support/forum/163952/ze/SimpleSample2018610896  

 

Change the button icon at Visual state manager will help to achieve your requirement by below.  

  

Code snippet:  

<StackLayout Padding="5" Orientation="Horizontal" Grid.Row="1" Grid.Column="0">  

                    <buttons:SfButton Text="" x:Name="buttonB" FontFamily="{StaticResource FontIcon}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="Blue" WidthRequest="30" HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Start" FontSize="13" FontAttributes="Bold" IsCheckable="True" BackgroundColor="Transparent" BorderColor="Black" BorderWidth="2"  >  

                        <VisualStateManager.VisualStateGroups>  

                            <VisualStateGroup x:Name="CommonStates">  

                                <VisualState x:Name="Checked">  

                                    <VisualState.Setters>  

                                        <Setter Property="TextColor" Value=" White" />  

                                        <Setter Property="Text" Value="&#xE717949;" />  

                                        <Setter Property="BackgroundColor" Value="Black" />  

                                    </VisualState.Setters>  

                                </VisualState>  

   

                                <VisualState x:Name="Unchecked">  

                                    <VisualState.Setters>  

                                        <Setter Property="TextColor" Value="Black" />  

                                        <Setter Property="BackgroundColor" Value="White" />  

   

                                    </VisualState.Setters>  

                                </VisualState>  

                            </VisualStateGroup>  

                        </VisualStateManager.VisualStateGroups>  

                    </buttons:SfButton>  

                    <Label Text="Combo 2" VerticalOptions="Center" HorizontalOptions="Start" VerticalTextAlignment="Center" FontAttributes="Bold"/>  

                    <StackLayout.GestureRecognizers>  

                        <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="{x:Reference buttonB}"/>  

                    </StackLayout.GestureRecognizers>  

                </StackLayout>  

 

Please let us know if you have any concern.  

  

Regards,  

Yuvaraj.