UWP: text in ItemTemplate does not break line

[DANILO LONGONI]

Dear Team,

we're having a bit of a problem with SfComboBox: we have a combobox with an ItemTemplate that shows a dot and a text. These texts can be of a variable length and some of those can be very long. In these particular cases we put the LineBreakMode for breaking the text if it overflows, so that the user can see the full text. This works on Android, but for UWP the text still overflows the window screen making it impossible to read.

Did I miss something while creating the ItemTemplate? Is this an old bug already fixed? We're using this version: 17.4.0.47

Here you can find the xaml:

<combobox:SfComboBox x:Name="comboBox"

                            DataSource="{Binding Values}"

                            DisplayMemberPath="Text"

                            HeightRequest="40"

                            IsEnabled="{Binding IsEnabled}"

                            SelectedItem="{Binding SelectedValue}"

                            Watermark="{i18n:Translate Text=StringComboBoxWatermark}"

                            WatermarkColor="{StaticResource PlaceholderColor}"

                            Focused="comboBox_Focused"

                            IsVisible="{Binding IsVisible}">

            <combobox:SfComboBox.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="20" />

                            <ColumnDefinition Width="Auto" />

                        </Grid.ColumnDefinitions>

                        <Frame Grid.Column="0"

                                           Margin="5,0"

                                           Padding="0"

                                           BackgroundColor="{StaticResource DarkTextColor}"

                                           CornerRadius="5"

                                           HeightRequest="10"

                                           HorizontalOptions="Start"

                                           VerticalOptions="Center"

                                           WidthRequest="10" />

                        <Label Grid.Column="1"

                                           FontSize="12"

                                           HorizontalOptions="FillAndExpand"

                                           LineBreakMode="TailTruncation"

                                           MaxLines="2"

                                           Text="{Binding Text}"

                                           TextColor="{StaticResource DarkTextColor}"

                                           VerticalOptions="Center" />

                    </Grid>

                </DataTemplate>

            </combobox:SfComboBox.ItemTemplate>

        </combobox:SfComboBox>

[Suganya Sethuraman]

Hi DANILO,

Greetings from Syncfusion.

We have analyzed the reported issue and were able to reproduce the same. We have fixed this issue by setting WidthRequest for Label in ItemTemplate as shown in the code snippet below.

Code snippet 

        <combobox:SfComboBox 

            x:Name="comboBox" 

            AllowFiltering="True" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            HeightRequest="40" 

            IsEditableMode="True" 

            MultiSelectMode="None" 

            SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 

            SuggestionMode="Contains" 

            WidthRequest="300"> 

            <combobox:SfComboBox.ItemTemplate> 

                <DataTemplate> 

                    <Grid> 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition Width="20" /> 

                            <ColumnDefinition Width="Auto" /> 

                        </Grid.ColumnDefinitions> 

                        <Frame 

                            Grid.Column="0" 

                            Margin="5,0" 

                            Padding="0" 

                            BackgroundColor="Red" 

                            CornerRadius="5" 

                            HeightRequest="10" 

                            HorizontalOptions="Start" 

                            VerticalOptions="Center" 

                            WidthRequest="10" /> 

                        <Label 

                            Grid.Column="1" 

                            FontSize="12" 

                            HorizontalOptions="FillAndExpand" 

                            LineBreakMode="TailTruncation" 

                            MaxLines="2" 

                            Text="{Binding Name}" 

                            TextColor="Blue" 

                            VerticalOptions="Center" 

                            WidthRequest="300" /> 

                    </Grid> 

                </DataTemplate> 

            </combobox:SfComboBox.ItemTemplate> 

        </combobox:SfComboBox> 

Please have the sample for reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxSample_Truncate-1196731811

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.  

[DANILO LONGONI]

Hi Suganya,

thanks for your help, your solution definitely helped solving my problem.

But what if I have a SfComboBox with a dynamic width? I would like to have  a dynamic width on my Label that changes while resizing my window, since my ComboBox takes full width of the window. Is it possible to achieve? 

[Suganya Sethuraman]

Hi DANILO,

Thanks for the update.

We have analyzed your requirement. We have bound the width of SfComboBox to the width of Label in ItemTemplate as shown in the code snippet below.

Code snippet  

<combobox:SfComboBox 

            x:Name="comboBox" 

            AllowFiltering="True" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            HeightRequest="40" 

            IsEditableMode="True" 

            MaximumDropDownHeight="300" 

            MultiSelectMode="None" 

            SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 

            SizeChanged="comboBox_SizeChanged" 

            SuggestionMode="Contains"> 

            <combobox:SfComboBox.ItemTemplate> 

                <DataTemplate> 

                    <Grid> 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition Width="20" /> 

                            <ColumnDefinition Width="Auto" /> 

                        </Grid.ColumnDefinitions> 

                        <Frame 

                            Grid.Column="0" 

                            Margin="5,0" 

                            Padding="0" 

                            BackgroundColor="Red" 

                            CornerRadius="5" 

                            HeightRequest="10" 

                            HorizontalOptions="Start" 

                            VerticalOptions="Center" 

                            WidthRequest="10" /> 

                        <Label 

                            x:Name="label" 

                            Grid.Column="1" 

                            FontSize="12" 

                            HorizontalOptions="FillAndExpand" 

                            LineBreakMode="TailTruncation" 

                            MaxLines="2" 

                            Text="{Binding Name}" 

                            TextColor="Blue" 

                            VerticalOptions="Center" 

                            WidthRequest="{Binding Source={x:Reference comboBox}, Path=Width, Converter={StaticResource ComboBoxWidthConverter}}" /> 

                    </Grid> 

                </DataTemplate> 

            </combobox:SfComboBox.ItemTemplate> 

        </combobox:SfComboBox> 

Please have the modified sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Width-229954828  

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.  

[DANILO LONGONI]

Hi Suganya,

thank you so much for your help. Your solution helped me making it look like we wanted.

Regards

[Suganya Sethuraman]

Hi DANILO,

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Regards,
Suganya Sethuraman.