Text looks blurry

21 posts, 0 answers
  1. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 06 Mar 2010 Link to this post

    Hello,
    I am using some text blocks in a coverflow and the text looks a bit blurry. Here is the code, and I have attached a picture. Am I doing something wrong?

    Thanks =) (the row definition in the Grid is Auto)

    Everything is looking blurry actually image included. edit: I can't seem to add another file while in an edit (on this forum)...if you want to see a comparision of the image in the control compared to looking at nativley i can post it seperatly.

    2nd Edit. So when I put the image in picture viewer next to the control running in the browser I can see that the CoverFlow is stretching both the text and the image slightly.   

    3rd Edit: Looking at in expression, I can see that the size of the RadCoverFlowItem is:
    Auto Width 109.962890625
    Auto Height 52.363639831543

    Setting these to 110 x 52 does make the text seem clearer but now when I run the program, the cover flow item is just showing the image blown up inside that space and obiterating any text...

    Edit 4: So I have been studying your example and when I explicity set the size of the RadCoverFlowItem it seems to help. Though when explicity setting the size, you must set the image stretch to 'none'. As a matter of fact it seems that if the size has the same proportions it looks the best, but still the text is blurry. I will post another picture.





     

     

                        <Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" CornerRadius="5" Margin="10,0,0,0">  
                            <Grid> 
                                <tn:RadExpander x:Name="rexCust"  Foreground="White" FontWeight="Bold" Background="{StaticResource BorderBlack}">  
                                    <tn:RadExpander.Header> 
                                        <TextBlock Text="Customer Locations" Style="{StaticResource ExpanderHeader}"></TextBlock> 
                                    </tn:RadExpander.Header> 
                                    <tn:RadExpander.Content> 
                                        <StackPanel> 
                                            <teknav:RadCoverFlow CameraViewpoint="Center" 
                                                                 Margin="10"  DistanceBetweenItems="40" IsReflectionEnabled="False"   
                                                                 HorizontalAlignment="Left">  
                                                <teknav:RadCoverFlowItem > 
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/els_64.png" Height="64" Width="64"/>  
                                                        <TextBlock HorizontalAlignment="Center" Text="Jack Shepard"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="P.914-860-5453"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="C.914-860-5453"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
                                                <teknav:RadCoverFlowItem> 
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/els_64.png" Height="64" Width="64"/>  
                                                        <TextBlock Text="Kate Austin" HorizontalAlignment="Center"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="P.914-999-9999"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="C.914-999-9999"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
                                                <teknav:RadCoverFlowItem> 
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/els_64.png" Height="64" Width="64"/>  
                                                        <TextBlock Text="John Locke" HorizontalAlignment="Center"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="P.914-860-5453"></TextBlock> 
                                                        <TextBlock HorizontalAlignment="Center" Text="C.914-860-5453"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
     
                                            </teknav:RadCoverFlow> 
     
                                        </StackPanel> 
                                       
                                    </tn:RadExpander.Content> 
                                </tn:RadExpander> 
                            </Grid> 
                        </Border> 
  2. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 06 Mar 2010 Link to this post

    Other pictures for above post:
  3. DevCraft banner
  4. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 06 Mar 2010 Link to this post

    Just another picture..took the image out to make sure this it is not the issue. You can see compared to the other text (this was taken from expression blend) that the coverflow is blurry.
  5. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 06 Mar 2010 Link to this post

    Here is the other picture and how I have it in the xaml. Again, seems explicity setting the size of the Coverflow item has helped. Though if you look at the picture I attached, you will see the text now looks sort of strange. broken.

          <teknav:RadCoverFlow CameraViewpoint="Top" Foreground="Black" 
                               Margin="10"  DistanceBetweenItems="50" IsReflectionEnabled="False">  
                <teknav:RadCoverFlowItem Height="100" Width="130">  
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/contact.png" Stretch="None"/>  
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="Kate Austin"></TextBlock> 
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="P.999-999-9999"></TextBlock> 
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="C.999-999-9999"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
                                                <teknav:RadCoverFlowItem Height="100" Width="130">  
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/contact.png" Stretch="None"/>  
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="Jack Shepard" ></TextBlock>  
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="P.914-999-9999"></TextBlock> 
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="C.914-999-9999"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
                                                <teknav:RadCoverFlowItem Height="100" Width="130">  
                                                    <StackPanel> 
                                                        <Image Source="/images/flow/site.png" Stretch="None"/>  
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="WeSuite LLC"></TextBlock> 
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="16 Maiden Lane"></TextBlock> 
                                                        <TextBlock Style="{StaticResource TextBasicStyle}" Text="New Rochelle, NY 10635"></TextBlock> 
                                                    </StackPanel> 
                                                </teknav:RadCoverFlowItem> 
                                            </teknav:RadCoverFlow> 
  6. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 06 Mar 2010 Link to this post

    Sorry for all the posts Telerik, but I cannot add files in a post edit.

    Here is another comparison picture. First half the RadCoverFlowItem has a width of 200, 2nd half width of 250. (Both height of 100).

  7. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 07 Mar 2010 Link to this post

    Sorry, had to give another example. This is driving me crazy and wish I could find the resolution so I can move on. The file attached is out of expression blend. Look at the clarity of the text in the RadExpander, then how blurry the text is on the coverflow.
  8. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 08 Mar 2010 Link to this post

    Just wanted to give you guys one last example photo from blend.

    I hope that we can get an answer on this soon. We need to choose what control set we are going with for our webapps.
  9. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2010 Link to this post

    I think I may understand what might possibly be happening.

    Look at this:

      <teknav:RadCoverFlow Height="200"  Grid.Column="1" x:Name="rcvCustInfo" CameraViewpoint="Top" Foreground="White" Margin="5,0,5,0"  DistanceBetweenItems="60" IsReflectionEnabled="False">  
            <teknav:RadCoverFlowItem Height="100" Width="200" MouseLeftButtonDown="RadCoverFlowItem_MouseLeftButtonDown">  
                      <StackPanel> 
                          <Image Source="/images/flow/contact.png" Stretch="None"/>  
                          <TextBlock Style="{StaticResource TextBasicStyle}" Text="Kate Austin"></TextBlock> 
                          <TextBlock Style="{StaticResource TextBasicStyle}" Text="P.999-999-9999"></TextBlock> 
                          <TextBlock Style="{StaticResource TextBasicStyle}" Text="C.999-999-9999"></TextBlock> 
                      </StackPanel> 
            </teknav:RadCoverFlowItem> 
     <teknav:RadCoverFlowItem Height="100" Width="200">  
     </teknav:RadCoverFlow> 

    With this, it looks clear. If I change the height of the RadCoverFlow to let's say 199 or below, everything looks blurry. Could it possibly be the control is saving space somehow for the reflection? Say 2x the Height of the biggest CoverFlowItem?
  10. Hristo Borisov
    Admin
    Hristo Borisov avatar
    298 posts

    Posted 11 Mar 2010 Link to this post

    Hi Michael,

    There seems to be a small issue with the calculation of our engine, it looks like the engine returns width and height that are not on exact pixels, such as 205.5 or 205.1 instead of 205. That is why, the items look blurry. We are aware of this issue, and we will do our best to include a fix for it with our next Service Pack release. Please excuse us for the inconvenience and we look forward to resolving your issue.

    Thank you for contacting us and do not hesitate to contact us again.

    Greetings,
    Hristo Borisov
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  11. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 02 Apr 2010 Link to this post

    Thank you for putting so much time into this.  I appreciate your diligence.  I will pass on this information to the people I work for.

    Thanks again.

    mark
  12. Michael
    Michael avatar
    23 posts
    Member since:
    Mar 2009

    Posted 04 Apr 2010 Link to this post

    Hi,

    Any idea on when exactly this will be fixed? We are using the cover flow in an application we plan on releasing in May.

    Thanks,
    Michael
  13. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 08 Apr 2010 Link to this post

    Hi guys,

    We will provide some improvements with the upcoming service pack next week, but I am afraid that the control will not render the text perfectly. We will do our best to fix the problem with some of the internal builds after the SP, before the end of April.

    Kind regards,
    Valeri Hristov
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  14. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 11 Jan 2011 Link to this post

    Hi,

    Are there any changes on the issue? Cause I use controls v. 2010.3.1110.1040, but still have text blurring.

    Regards,
    Juliana
  15. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 11 Jan 2011 Link to this post

    Hello Juliana,

    You could try setting CameraViewPoint=Center - this should fix the blurry text if you are using a relatively new version of RadCoverFlow.

    Best wishes,
    Valeri Hristov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  16. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 11 Jan 2011 Link to this post

    Hello Valeri ,

    Thanks for answer. It's better but less then perfect. Is there anything else I can do to improve text displaying?

    Best Regards,
    Juliana
  17. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 17 Jan 2011 Link to this post

    Probably something else is wrong - on our First Look example the text seems to be ok. Can you open a new support ticket and send us a simple project that can be used to observe the problem?

    Regards,
    Valeri Hristov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  18. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 17 Jan 2011 Link to this post

    Hello Valeri,

    I think I solved my problem. After setting width and height in ItemTemplate and changing parent container of coverflow from StackPanel to Grid + CameraViewPoint=Center, it looks ok.

    Regards,
    Juliana
  19. Nathaniel
    Nathaniel avatar
    68 posts
    Member since:
    Nov 2010

    Posted 06 Jul 2011 Link to this post

    I have a control which contains a RadGridView inside a cover flow.  The text in the RadGridView looks very blurry.  I set the CameraViewPoint = Center, but that did not help.  Any fix for this in the next release?
  20. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 07 Jul 2011 Link to this post

    Hi Nathaniel,

    Make sure coverflow is not hosted inside StackPanel. Also try to declare coverflow.ItemTemplate to set item's width and height like

    <telerik:RadCoverFlow.ItemTemplate>
    <DataTemplate>
    <Border CornerRadius="5" BorderThickness="1" BorderBrush="White"
    Width="276" Height="296"/>
    </telerik:RadCoverFlow.ItemTemplate>
    </DataTemplate>

    or maybe in your case
    <telerik:RadCoverFlow.ItemTemplate>
    <DataTemplate>
    <telerik:RadGridView Width="276" Height="296"/>
    </telerik:RadCoverFlow.ItemTemplate>
    </DataTemplate>

    HTH,
    Juliana
  21. Kelly
    Kelly avatar
    73 posts
    Member since:
    Apr 2011

    Posted 19 Apr 2012 Link to this post

    Hello,

    I'm using 2012.1.221.1050. Inside a CoverFlow, I put a User Control, which is made up of a grid containing a RadPropertyGrid. Sizes are hard-coded in the DataTemplate, there is no StackPanel involved, and CameraViewpoint is set to Center. The text in the PropertyGrid is still blurred. Any further suggestions?

    Thank you,

    KO
  22. Boyan
    Admin
    Boyan avatar
    758 posts

    Posted 25 Apr 2012 Link to this post

    Hello Kelly,

    What I can advice you is to play a little bit with the fixed size of the DataTemplate. Very small differences in the size of your UserControl may result in greatly improved clarity of the text.

    Regards,
    Boyan
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner