Rating control size

8 posts, 1 answers
  1. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 12 Aug 2015 Link to this post

    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 

     

     

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Aug 2015 Link to this post

    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
  3. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 16 Aug 2015 in reply to Ves Link to this post

    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

     

  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 19 Aug 2015 Link to this post

    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
  5. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 24 Aug 2015 in reply to Pavel R. Pavlov Link to this post

     

    Hi Pavel

    thanks for helping me. Using a simple test program like yours, I'm able to get the same results as you. But if I use a data template like the following one, the size always stays the same:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <telerikInput:RadRating Value="3" >
            <telerikInput:RadRating.FilledIconContentTemplate>
                <DataTemplate>
                    <SymbolIcon Symbol="SolidStar" Foreground="#FF5CBE02" Margin="0,3,0,0" />
                </DataTemplate>
            </telerikInput:RadRating.FilledIconContentTemplate>
            <telerikInput:RadRating.EmptyIconContentTemplate>
                <DataTemplate>
                    <SymbolIcon Symbol="SolidStar" Foreground="#2B4C66" Margin="0,3,0,0" />
                </DataTemplate>
            </telerikInput:RadRating.EmptyIconContentTemplate>
        </telerikInput:RadRating>
    </Grid>

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

    Kind regards,

    Joerg

     

  6. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 24 Aug 2015 in reply to Pavel R. Pavlov Link to this post

    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

     

  7. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 27 Aug 2015 Link to this post

    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
  8. Wolfshund
    Wolfshund avatar
    50 posts
    Member since:
    Feb 2007

    Posted 27 Aug 2015 in reply to Ves Link to this post

    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

     

Back to Top