How to style the RadListPicker control / Expression Blend 2012

5 posts, 0 answers
  1. Alex
    Alex avatar
    12 posts
    Member since:
    Mar 2012

    Posted 13 Jan 2013 Link to this post

    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.
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 14 Jan 2013 Link to this post

    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.
  3. DevCraft banner
  4. Alex
    Alex avatar
    12 posts
    Member since:
    Mar 2012

    Posted 14 Jan 2013 Link to this post

    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.
  5. Alex
    Alex avatar
    12 posts
    Member since:
    Mar 2012

    Posted 15 Jan 2013 Link to this post

    I just saw that the popup header background is forced to gray (Background="{StaticResource PhoneChromeBrush}") in the template, so it cannot be changed in a Setter of the PopupHeaderStyle.

    I manage to use and modify the template you gave in the first place, so my problem is solved :)

    Thanks.
  6. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 16 Jan 2013 Link to this post

    Hi Jean-Alexis,

    Thanks for writing back.

    Good to know that you've managed to find a solution.

    We will consider this thread closed.

    Do not hesitate to let us know in case you have further questions or need assistance.

    Regards,
    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.
Back to Top
DevCraft banner