Remove margin in popup header

3 posts, 0 answers
  1. Edouard
    Edouard avatar
    17 posts
    Member since:
    Feb 2011

    Posted 29 Apr 2011 Link to this post

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

    Posted 05 May 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Edouard
    Edouard avatar
    17 posts
    Member since:
    Feb 2011

    Posted 05 May 2011 Link to this post

    Hi,

    Thanks a lot for your answer.

    It's working great.

    Best regards,
Back to Top