HeightRequest has no effect

[Mike Rowley]

I am trying to size a ratings control to 30px high, it is in a grid row 30px high and HeightRequest="30" but it still expands beyond the grid space.

Here is the DataTemplate I am trying to get into an AIAssistView ResponseTemplate

            <DataTemplate x:Key="responseTemplate">

                <Grid RowDefinitions="*,30" ColumnDefinitions="40,40,*,40,40">

                    <Border Grid.Row="0" Grid.ColumnSpan="5" Padding="0" Background="Transparent" Stroke="{AppThemeBinding Light={StaticResource szDark-BorderColor}, Dark={StaticResource szDark-BorderColor}}" StrokeThickness="0" HorizontalOptions="Fill">

                        <Border.StrokeShape>

                            <RoundRectangle CornerRadius="10" />

                        </Border.StrokeShape>

                        <Label x:Name="responseLabel" Text="{Binding Text}" TextType="Html" FontSize="14" Padding="10" LineBreakMode="WordWrap" HorizontalOptions="Fill" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{AppThemeBinding Light={StaticResource szDark-TextColor}, Dark={StaticResource szDark-TextColor}}" />

                    </Border>

                    <ImageButton Grid.Row="1" Grid.Column="0" Source="{Binding PlayIcon, Source={x:Static services:ConfigSettingsManager.Settings}}" Command="{Binding CopyCommand, Source={x:Static local:App.AIChatVM}}" CommandParameter="{Binding .}" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center" />

                    <ImageButton Grid.Row="1" Grid.Column="1" Source="{Binding RetryIcon, Source={x:Static services:ConfigSettingsManager.Settings}}" Command="{Binding RetryCommand, Source={x:Static local:App.AIChatVM}}" CommandParameter="{Binding .}" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center" />

                    <sfinputs:SfRating Grid.Row="1" Grid.Column="2" ItemCount="5" ValueChanged="SfRating_ValueChanged" Precision="Standard" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="30" />

                    <ImageButton Grid.Row="1" Grid.Column="4" Source="{Binding PlayIcon, Source={x:Static services:ConfigSettingsManager.Settings}}" Command="{Binding PlayResponseCommand, Source={x:Static local:App.AIChatVM}}" CommandParameter="{Binding .}" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center" />

                </Grid>

            </DataTemplate>

Any suggestions?

Attachment: Screenshot_20250109191754_713d6dbd.zip

[Kamalesh Periyasamy]

Hi Mike

Thank you for reaching out to us. we have reviewed your query, to resolve the issue of the SfRating control exceeding the grid row height, you can use the ItemSize property instead of the HeightRequest property. The HeightRequest might only affect the overall control size and not the rating items. By setting ItemSize, you can directly control the size of the rating items, ensuring the control fits within the 30px height of the grid row.

<sfinputs:SfRating Grid.Row="1"

                    Grid.Column="2"

                    ItemCount="5"

                    ValueChanged="SfRating_ValueChanged"

                    Precision="Standard"

                    HorizontalOptions="Center"

                    VerticalOptions="Center"

                    HeightRequest="30"

                    ItemSize="30"/>

For your reference, we’ve prepared a sample with the necessary code changes, which we’ve attached below. Please try this solution and let us know if you encounter any further issues.

Regards,

Kamalesh P

Attachment: RatingSample_(2)_31547b15.zip

[Mike Rowley]

Excellent, that was exactly what I needed.  Thank you!

[Preethi Rajakandham]

Hi Mike,

You are welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R