[Solved] Strange behavior?

[Wolfshund]

Hi Telerik team,

I'm using WP7 Controls Q3 2011.
When I drop a Listpicker control on to my page and test them either with emulator or device, first thing is, there are transparent, one can see other controls beneath the listpicker control, and the listpicker does no inline scroll, it just overlaps everthing beneath it. It doesn't behave like the listpicker in the Telerik WP7 examples.

Here is my code:

<P><phone:PhoneApplicationPage<BR>
x:Class="RadControlsWindowsPhoneApp1.MainPage"<BR>    xmlns="<A
href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation<;/A>"<BR>
xmlns:x="<A
href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml<;/A>"<BR>
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"<BR>
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"<BR>
xmlns:d="<A
href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008<;/A>"<BR>
xmlns:mc="<A
href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006<;/A>"<BR>
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"<BR>
FontFamily="{StaticResource PhoneFontFamilyNormal}"<BR>
FontSize="{StaticResource PhoneFontSizeNormal}"<BR>
Foreground="{StaticResource PhoneForegroundBrush}"<BR>
SupportedOrientations="Portrait"
Orientation="Portrait"<BR>    shell:SystemTray.IsVisible="True"
<BR>
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"></P>
<P> <!--LayoutRoot is the root grid where all page content is
placed--><BR> <Grid x:Name="LayoutRoot"
Background="Transparent"><BR>
<Grid.RowDefinitions><BR>
<RowDefinition
Height="Auto"/><BR>
<RowDefinition Height="*"/><BR>
</Grid.RowDefinitions></P>
<P>        <!--TitlePanel contains the
name of the application and page
title--><BR>        <StackPanel
x:Name="TitlePanel" Grid.Row="0"
Margin="12,17,0,28"><BR>
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
Style="{StaticResource
PhoneTextNormalStyle}"/><BR>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
Style="{StaticResource
PhoneTextTitle1Style}"/><BR>
</StackPanel></P>
<P>        <!--ContentPanel - place
additional content here--><BR>
<Grid x:Name="ContentPanel" Grid.Row="1"
Margin="12,0,12,0"><BR>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,26,0,0"
Text="TextBlock" VerticalAlignment="Top"
/><BR>
<TextBox Height="73" HorizontalAlignment="Left" Margin="0,48,0,0"
Text="TextBox" VerticalAlignment="Top" Width="460"
/><BR>
<telerikInput:RadListPicker x:Name="RadListpicker1" Header="List1"
Height="82" HorizontalAlignment="Left" Margin="12,141,0,0"
VerticalAlignment="Top" Width="434"
/><BR>
<telerikInput:RadListPicker x:Name="RadListpicker2" Header="List2"
Height="83" HorizontalAlignment="Left" Margin="12,241,0,0"
VerticalAlignment="Top" Width="434"
/><BR>
</Grid><BR> </Grid></P>
<P></phone:PhoneApplicationPage><BR></P>

 

And the C# code

<P>using System;<BR>using System.Collections.Generic;<BR>using
System.Linq;<BR>using System.Net;<BR>using System.Windows;<BR>using
System.Windows.Controls;<BR>using System.Windows.Documents;<BR>using
System.Windows.Input;<BR>using System.Windows.Media;<BR>using
System.Windows.Media.Animation;<BR>using System.Windows.Shapes;<BR>using
Microsoft.Phone.Controls;</P>
<P>namespace RadControlsWindowsPhoneApp1<BR>{<BR>    public
partial class MainPage : PhoneApplicationPage<BR>
{<BR>        //
Constructor<BR>        public
MainPage()<BR>
{<BR>
InitializeComponent();</P>
<P><BR>
List<string> Groups = new List<string>() { "System", "NonSystem",
"Offsite", "L40_Offsite", "none"
};<BR>
this.RadListpicker1.ItemsSource =
Groups;<BR>
List<string> Category = new List<string>() { "LTO2", "LTO4", "LTO5"
};<BR>
this.RadListpicker2.ItemsSource =
Category;<BR>        }<BR>
}<BR>}</P>

Maybe I missing something here.

[paul]

Hi,

I am also seeing this. I have two inline list pickers and both show other controls underneath the list pickers background when the picker is expanded.

[Todor]

Hi,

Joerg, please excuse us for the delayed answer.

In our examples, the ListPickers are placed in a Grid, just as yours, but each of them is in a different row, whose Height property is set to Auto. This way when the ListPicker is expanded, the height of the control changes and the other rows in the Grid go downwards. This is why the transparency is not visible in the examples and I recommend that you also use the auto height instead of the margins that you have set.

Paul, this should help you too, however if you have a different scenario, please share with us some more details on it, so I could help you accordingly.

Regards,
Todor
the Telerik team

[Wolfshund]

Hi Todor,

Thanks you very much for your help. I managed to solve the problem and as you said is was related to the control's height size and using only one grid row. Just one more quetion: How to change the Listpicker's header font color?

Kind regards,
Joerg

[Todor]

Hello Joerg,

To change the font color of the header of RadListPicker, you can use the HeaderStyle property and create a new style with TargetType set to "ContentControl". For example, to change the color to Red and keep the default header formatting, you can use this style:

<Style TargetType="ContentControl">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    <Setter Property="Padding" Value="0,0,0,8"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

It was a pleasure for me to assist you. Wish you a great day.

Regards,
Todor
the Telerik team