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

[Solved] How to style the RadListPicker control / Expression Blend 2012

4 Answers 224 Views

ListPicker

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

This question is locked. New answers and comments are not allowed.

Alex asked on 13 Jan 2013, 07:27 PM

Hello,

I would like to change the default style of the RadListPicker instance in my page, especially the style of the full screen pop-up.

For that i'm trying to use Expression Blend 2012 like described here : http://www.telerik.com/help/windows-phone/radlistpicker-styles-and-templates-styling-radlistpicker.html

1. "In the 'Objects and Timeline' pane, select the RadListPicker control you want to style. From the menu choose Object -> Edit Style -> Edit a Copy. You will be prompted for the name of the style and where to be placed."

=> I don't have the "Edit style" menu item when I right-click on the RadListPicker (However I have this option for a Grid control, for instance).

2. "If you haven't generated the default style yet, you can choose Edit Template -> Edit a Copy. It will generate both the style and the template."

=> When I click on "Edit Template / Edit a copy" then nothing occurs. It works if I use the same steps on a RadTimePicker instead of a RadListPicker (a window is opened to name the template/style to generate).

Could you help me ? How can I use Expression Blend correctly ? Eventually could you provide me the XAML fragment I need ?

Thanks,

Alex.

4 Answers, 1 is accepted

answered on 14 Jan 2013, 07:48 AM

Hi Jean-Alexis Aufauvre,

Here is a copy of the Control Template of RadListPicker:

<Style x:Key="PopupHeaderStyle" TargetType="ContentControl">

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>

<Setter Property="Margin" Value="24,55,0,35"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

</Style>

<ListPicker:SelectionModeToBooleanConverter x:Key="SelectionModeToBooleanConverter"/>

<Style x:Key="RadListPickerStyle1" TargetType="telerikInput:RadListPicker">

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Top"/>

<Setter Property="HeaderStyle">

<Setter.Value>

<Style TargetType="ContentControl">

<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>

<Setter Property="Padding" Value="0, 0,0,7"/>

<Setter Property="HorizontalAlignment" Value="Left"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

<Setter Property="PopupHeaderStyle" Value="{StaticResource PopupHeaderStyle}"/>

<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>

<Setter Property="MinHeight" Value="44"/>

<Setter Property="BorderThickness" Value="3"/>

<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>

<Setter Property="ActionButtonVisibility" Value="Collapsed"/>

<Setter Property="ActionButtonStyle">

<Setter.Value>

<Style TargetType="PhoneTextBox:TextBoxSecondaryButton">

<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="PopupOpenAnimation">

<Setter.Value>

<telerik:RadTileAnimation Duration="0:0:.2" InitialDelay="0:0:.08" IsTranslationEnabled="False" InOutAnimationMode="In" PerspectiveAngleY="0" PerspectiveAngleX="90" SequentialMode="FirstToLast"/>

</Setter.Value>

</Setter>

<Setter Property="PopupCloseAnimation">

<Setter.Value>

<telerik:RadTileAnimation Duration="0:0:.2" IsTranslationEnabled="False" InOutAnimationMode="Out" PerspectiveAngleY="0" PerspectiveAngleX="90" SequentialMode="FirstToLast" SequentialItemDelay="0"/>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikInput:RadListPicker">

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="border">

<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="border">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PopupModeLabel">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Expanded">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="border">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundColor}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="border">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LayoutRoot">

<DiscreteObjectKeyFrame KeyTime="0" Value="0.3"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="border">

<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<ContentControl x:Name="HeaderPresenter" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Row="0" Style="{TemplateBinding HeaderStyle}"/>

<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CacheMode="BitmapCache" Grid.Row="1">

<Grid x:Name="mainLayout">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<telerikInput:RadListPickerItem x:Name="PopupModeLabel" HorizontalAlignment="Stretch" MinHeight="{TemplateBinding MinHeight}" Style="{TemplateBinding ItemStyle}" VerticalAlignment="Stretch"/>

<Canvas x:Name="ItemsParent"/>

<PhoneTextBox:TextBoxSecondaryButton x:Name="ActionButton" Grid.Column="1" MinWidth="38" MinHeight="38" Style="{TemplateBinding ActionButtonStyle}" Visibility="{TemplateBinding ActionButtonVisibility}"/>

</Grid>

</Border>

<telerikPrimitives:RadWindow x:Name="Popup" CloseAnimation="{TemplateBinding PopupCloseAnimation}" IsFullScreen="True" IsAnimationEnabled="{TemplateBinding IsAnimationEnabled}" OpenAnimation="{TemplateBinding PopupOpenAnimation}">

<telerikPrimitives:RadWindow.ApplicationBarInfo>

<telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">

<telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton"/>

<telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton"/>

</telerikPrimitives:ApplicationBarInfo>

</telerikPrimitives:RadWindow.ApplicationBarInfo>

<Grid Background="{StaticResource PhoneChromeBrush}" telerik:RadTileAnimation.ContainerToAnimate="{Binding ., ElementName=PopupList}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<ContentControl CacheMode="BitmapCache" ContentTemplate="{TemplateBinding PopupHeaderTemplate}" Content="{TemplateBinding PopupHeader}" Grid.Row="0" Style="{TemplateBinding PopupHeaderStyle}"/>

<telerikPrimitives:RadDataBoundListBox x:Name="PopupList" CheckModeDeactivatedOnBackButton="False" DisplayMemberPath="{TemplateBinding DisplayMemberPath}" IsCheckModeActive=

"{Binding SelectionMode, Converter={StaticResource SelectionModeToBooleanConverter}, RelativeSource={RelativeSource TemplatedParent}}"

telerik:InteractionEffectManager.IsInteractionEnabled="True" ItemContainerStyle="{TemplateBinding PopupItemStyle}" Grid.Row="1" Style="{TemplateBinding PopupStyle}"/>

</Grid>

</telerikPrimitives:RadWindow>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="PopupItemStyle">

<Setter.Value>

<Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">

<Setter Property="Padding" Value="24, 26, 0, 26"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="PopupStyle">

<Setter.Value>

<Style TargetType="telerikPrimitives:RadDataBoundListBox">

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>

<Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="CheckBoxStyle">

<Setter.Value>

<Style TargetType="telerikPrimitives:ItemCheckBox">

<Setter Property="VerticalAlignment" Value="Center"/>

<Setter Property="Margin" Value="0, 0, -18, 0"/>

</Style>

</Setter.Value>

</Setter>

</Style>

</Setter.Value>

</Setter>

</Style>

I hope this helps.

Greetings,
Deyan
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 14 Jan 2013, 01:36 PM

Thank you. I added the style you gave in the application resources of the app, but when I set the Style attribute of the RadListPicker control I get the following exception :

[MS.Internal.WrappedException] = {MS.Internal.WrappedException: Error HRESULT E_FAIL has been returned from a call to a COM component. ---> System.Exception: Error HRESULT E_FAIL has been returned from a call to a COM component.
at MS.Internal.XcpImports.CheckHResult(UInt32 hr)

=> Is it possible to debug that ?

The solution I found (which should work for me) is to only change the style of the popup adding the PopupStyle and PopupHeaderStyle attributes to the RadListPicker control.

But I have one last issue: I don't know how to change the header background of the popup (it's always gray, even when setting the background property) :

<Style x:Key="PopupHeaderStyle1" TargetType="ContentControl">

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>

<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>

<Setter Property="Margin" Value="24,55,0,35"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

</Style>

<Style x:Key="PopupStyle1" TargetType="telerikPrimitives:RadDataBoundListBox">

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>

<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="CheckBoxStyle">

<Setter.Value>

<Style TargetType="telerikPrimitives:ItemCheckBox">

<Setter Property="VerticalAlignment" Value="Center"/>

<Setter Property="Margin" Value="0, 0, -18, 0"/>

</Style>

</Setter.Value>

</Setter>

</Style>

Thanks again for your help,

Alex.