Text looks blurry

[Michael]

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>

[Michael]

Other pictures for above post:

[Michael]

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.

[Michael]

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>

[Michael]

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).

[Michael]

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.

[Michael]

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.

[Michael]

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?

[Hristo Borisov]

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.

[mark baer]

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

[Michael]

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

[Valeri Hristov]

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.

[Juliana]

Hi,

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

Regards,
Juliana

[Valeri Hristov]

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

[Juliana]

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

[Valeri Hristov]

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

[Juliana]

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

[Nathaniel]

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?

[Juliana]

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

[Kelly]

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

[Boyan]

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