[Solved] Remove margin in popup header

[Edouard]

Hi,

I'm using the ListPicker without header text. I want the first item of the list to be at the top of the screen. Currently there is a 55 px Margin, but I don't know how to remove it.

Which Template to edit, and which values to replace ?

Thanks,

[Deyan]

Hello Edouard,

Thanks for contacting us and excuse us for the delay with our answer.

I am sending you all styles related to the RadListPicker control. You can modify them as you require and use them in your project:

<Style x:Key="HeaderStyle" TargetType="ContentControl">
    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    <Setter Property="Padding" Value="0,0,0,8"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

<Style x:Key="PopupHeaderStyle" TargetType="ContentControl">
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="Margin" Value="24, 55, 0, 0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>

<Style TargetType="local:RadListPicker">
    <Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
    <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    <Setter Property="PopupHeaderStyle" Value="{StaticResource PopupHeaderStyle}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
    <Setter Property="MinHeight" Value="46"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
    <Setter Property="PopupOpenAnimation">
        <Setter.Value>
            <telerikCore:RadTileAnimation PerspectiveAngleY="0"
                                          IsTranslationEnabled="False"
                                          PerspectiveAngleX="90"
                                          InOutAnimationMode="In"
                                          SequentialMode="FirstToLast"
                                          InitialDelay="0:0:.08"
                                          Duration="0:0:.2">
            </telerikCore:RadTileAnimation>
        </Setter.Value>
    </Setter>
    <Setter Property="PopupCloseAnimation">
        <Setter.Value>
            <telerikCore:RadTileAnimation PerspectiveAngleY="0"
                                          IsTranslationEnabled="False"
                                          PerspectiveAngleX="90"
                                          InOutAnimationMode="Out"
                                          SequentialMode="FirstToLast"
                                          SequentialItemDelay="0"
                                          Duration="0:0:.2">
            </telerikCore:RadTileAnimation>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:RadListPicker">
                <Grid x:Name="LayoutRoot">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0">
                                        <DiscreteObjectKeyFrame Value="{StaticResource PhoneTextBoxEditBackgroundColor}" KeyTime="0"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
                                        <DiscreteObjectKeyFrame Value="{StaticResource PhoneTextBoxEditBorderBrush}" KeyTime="0"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <ContentControl Grid.Row="0"
                                    x:Name="HeaderPresenter"
                                    CacheMode="BitmapCache"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    Style="{TemplateBinding HeaderStyle}"/>
                    <Border Grid.Row="1" x:Name="border"
                            CacheMode="BitmapCache"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                        <Canvas x:Name="ItemsParent">
                            <ItemsPresenter x:Name="ItemsPresenter">
                                <ItemsPresenter.RenderTransform>
                                    <TranslateTransform x:Name="OffsetTransform"/>
                                </ItemsPresenter.RenderTransform>
                            </ItemsPresenter>
                        </Canvas>
                    </Border>

                    <telerikPrimitives:RadWindow x:Name="Popup"
                                                 IsFullScreen="True"
                                                 IsAnimationEnabled="{TemplateBinding IsAnimationEnabled}"
                                                 OpenAnimation="{TemplateBinding PopupOpenAnimation}"
                                                 CloseAnimation="{TemplateBinding PopupCloseAnimation}">
                        <telerikPrimitives:RadWindow.Content>
                            <telerikPrimitives:RadSelector x:Name="PopupList"
                                                           Background="{StaticResource PhoneChromeBrush}"
                                                           HorizontalAlignment="Stretch"
                                                           VerticalAlignment="Stretch"
                                                           FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                                                           Header="{TemplateBinding PopupHeader}"
                                                           DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                                           HeaderTemplate="{TemplateBinding PopupHeaderTemplate}"
                                                           HeaderStyle="{TemplateBinding PopupHeaderStyle}"/>
                        </telerikPrimitives:RadWindow.Content>
                    </telerikPrimitives:RadWindow>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In order to remove the margin, you will have to edit the PopupHeaderStyle (the second style in the snippet) and remove the 55px setting for its margin.

I hope this helps.

Do not hesitate to get back to us in case you have further questions or need assistance.

Regards,
Deyan
the Telerik team

[Edouard]

Hi,

Thanks a lot for your answer.

It's working great.

Best regards,