This is a migrated thread and some comments may be shown as answers.

Rating control size

6 Answers 15 Views
Rating
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Wolfshund
Top achievements
Rank 2
Wolfshund asked on 12 Aug 2015, 06:22 AM

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 

 

 

6 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 14 Aug 2015, 02:30 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Wolfshund
Top achievements
Rank 2
answered on 17 Aug 2015, 01:44 AM

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

 

0
Pavel R. Pavlov
Telerik team
answered on 19 Aug 2015, 01:23 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Wolfshund
Top achievements
Rank 2
answered on 24 Aug 2015, 06:41 AM

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

 

0
Accepted
Ves
Telerik team
answered on 27 Aug 2015, 06:20 AM
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="&#xE0B4;" 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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Wolfshund
Top achievements
Rank 2
answered on 28 Aug 2015, 01:24 AM

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

 

Tags
Rating
Asked by
Wolfshund
Top achievements
Rank 2
Answers by
Ves
Telerik team
Wolfshund
Top achievements
Rank 2
Pavel R. Pavlov
Telerik team
Share this question
or