ListPicker expanded items font

[Richard]

Hi Telerik!

I've been really struggling to change the font size for the expanded view of the ListPicker. I've duplicated the template from within Expression Blend, however I've not been able to make a noticable difference by manually editing the XAML. I must be missing something.

Which Style modifies the expanded view items and can you suggest some XAML examples for me please?

Thanks!

[Deyan]

Hello Richard,

Thanks for writing.

I am not quite sure that I correctly understand the scenario. If you wish to set a different Font for the inline items of RadListPicker when it is expanded, you can simply set the Font property of the control when it is expanded, and reset it otherwise.

It will be helpful if you manage to prepare a sample Windows Phone app and send it to us so that we can directly see what you're trying to implement and thus be able to help.

Note that you will have to open a new support ticket in order to attach a project.

I hope this helps.

Kind regards,
Deyan
the Telerik team

[Richard]

Hi Deyan,

Sorry. I didnt' explain myself very well. I have the control populated with 20 items. When I press the control to select a new item, I get a full screen list of the items to select (by design).

I'd like to be able to style the full-screen view of the items in order to make them easier to finger-select. At present the font is small and it's tricky to accurately select.

I can send you a screenshot, or some sample code if you really need it.

Thanks!
Richard

[Deyan]

Hi Richard,

I am attaching the default styles of the RadListPicker control. You can edit the main RadListPicker style by setting the FontSize property of the RadSelector template part which actually holds the items in the popup.

<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>

I hope this helps.

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

Best wishes,
Deyan
the Telerik team

[Richard]

Hi Deyan,

Sorry about this, but it still doesn't appear to be registering the styles properly. I had actually created a "copy" of the template in Expression and then hand-edited the XAML and did exactly what you suggested (changed the font within RadSelector to FontSize="{StaticResource PhoneFontSizeHuge}" ), however the control didn't seem to register the change.

I even created a completely fresh project and the same problem was there.

The styles do seem to be recognised as I changed: <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> and this worked (i.e. it changed the font in the un-expanded view).

Could you try it at your end? I'm using the registered version downloaded a fortnight ago.

Failing that, I can send you the sample project.

Best regards,
Richard

[Deyan]

Hello Richard,

Thanks for writing back and sorry for the delay with my answer.

Could you please prepare a sample project that implements the scenario and send it to me so that I can directly take a look at the code and see how I can help.

You will have to open a new support ticket in order to be able to attach your files.

Thanks for the time taken.

Greetings,
Deyan
the Telerik team