Rating control size

[Wolfshund]

Hi Telerik team,

I can't find documentation on how to scale or size the rating control. For example, if I put the rating control in a Stack panel the control gets clipped on certain height values, mostly less than 15 pixels. Looks like the controls height is fixed size? Any thoughts.

Thanks, kind regards,

Joerg 

 

 

[Ves]

Hi Wolfshund,

The control is scaled according the value of FontSize. You can decrease its value if you need the control to fit in a small area.

Best regards,
Ves
Telerik

[Wolfshund]

Hi Ves,

thank you very much for you reply, but I don't get it to work properly. Still to big. Here is a part of that code:

 

<Grid Grid.Column="2" Margin="15, 0, 0, 0">
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <TextBlock Text="{Binding Title}" FontSize="15" Foreground="#9A1D20" FontWeight="Bold" Grid.Row="0" TextWrapping="Wrap"/>
      <StackPanel Orientation="Horizontal" Grid.Row="1">
          <TextBlock Text="Author: " FontSize="12" FontWeight="Bold" Foreground="#B0ADAD"/>
          <TextBlock Text="{Binding Author}" FontSize="12" Foreground="Black" Margin="5,0,0,0" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Grid.Row="2">
          <TextBlock Text="Rating: " FontSize="12" FontWeight="Bold" Foreground="#B0ADAD" Margin="0,2,0,0"/>
          <telerikInput:RadRating x:Name="BookRating" Value="{Binding Rating}" IsReadOnly="True" FontSize="8">
              <telerikInput:RadRating.FilledIconContentTemplate>
                  <DataTemplate>
                      <SymbolIcon Symbol="SolidStar" Foreground="#FF5CBE02" Margin="5,0,0,0" />
                  </DataTemplate>
              </telerikInput:RadRating.FilledIconContentTemplate>
              <telerikInput:RadRating.EmptyIconContentTemplate>
                  <DataTemplate>
                      <SymbolIcon Symbol="SolidStar" Foreground="#2B4C66" Margin="5,0,0,0" />
                  </DataTemplate>
              </telerikInput:RadRating.EmptyIconContentTemplate>
          </telerikInput:RadRating>
      </StackPanel>
  </Grid>

I also include a screenshot. Thank you very much.

Kind regards,

Joerg

 

[Pavel R. Pavlov]

Hello Wolfshund,

Have you tried setting the FontSize to even smaller value?

I tried to set it to 4 and the control gets smaller. You can see the code and the results I get on our side on the following picture:



If further lowering the FontSize property does not take affect on your side I would like to ask you to try to reproduce the same behavior in a small repro project and send it over along with exact steps to reproduce the issue on our side. This is the only way to investigate the reasons behind and further assist you on your way.

Regards,
Pavel R. Pavlov
Telerik

[Wolfshund]

Hi Pavel,

 using a small test program like yours, I was able to get the same results as you from the screenshot above. But if I start to use a data template/content template for styling the control like in the following code, the size will not be affected at all:

01.<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
02.    <telerikInput:RadRating Value="3" >
03.        <telerikInput:RadRating.FilledIconContentTemplate>
04.            <DataTemplate>
05.                <SymbolIcon Symbol="SolidStar" Foreground="#FF5CBE02" Margin="0,3,0,0" />
06.            </DataTemplate>
07.        </telerikInput:RadRating.FilledIconContentTemplate>
08.        <telerikInput:RadRating.EmptyIconContentTemplate>
09.            <DataTemplate>
10.                <SymbolIcon Symbol="SolidStar" Foreground="#2B4C66" Margin="0,3,0,0" />
11.            </DataTemplate>
12.        </telerikInput:RadRating.EmptyIconContentTemplate>
13.    </telerikInput:RadRating>
14.</Grid>

Looks like I have to change both the ContentTemplates, but I don't know how.

Thanks for your help.

Kind regards,

Joerg

 

[Ves]

Hi Joerg,

Thank you for the additional details. The behavior you see is caused by the usage of SymbolIcon. The symbol's size is fixed, hence the control appearing clipped. There are several approaches here:
 - You can use ScaleTransform to alter the size of the SymbolIcon
 - You can use a TextBlock with Text="" instead, then you can set its FontSize.
 - You can wrap the SymbolIcon control within a ViewBox and set ViewBox's dimensions.

Best regards,
Ves
Telerik

[Wolfshund]

Hi Ves,

thank you very much for your help. I went to used a ViewBox as you advised and everything is working well know!

Kind regards,

Joerg