JumpList GroupPickerItemsPanel with SystemTray

[Edouard]

Hi,

I'm using a JumpList in a page which has the SystemTray visible, so the page height (and the GroupPickerItemsPanel height too) is 768.

It seems that the Panel is drawn behind the SystemTray, and not below. And even if the bottom margin of the RadWrapPanel I'm using in the GroupPickerItemsPanel is set to 0, nothing is drawn in the 32px of the bottom of my screen.

So, the RadWrapPanel has a height of 768, but starts behind the SystemTray, and doesn't ends at the bottom of the screen.

Is there a way to have the RadWrapPanel at the right place ?

One more thing, how to avoid vertical scrolling on the GroupPickerItemsPanel ? I've set the ScrollViewer.VerticalScrollBackVisibility Property to Disabled, but without any effect.

Thanks,

[Victor]

Hi Edouard,

 Thank you for the questions.
Please post a support ticker and attach a sample application that demonstrates the issue with the group items panel or at least a screenshot since I could not reproduce the behavior you described. When the group picker is shown, the page AppBar is supposed to hide until the group picker is closed and the group picker should stretch to fill the empty space left by the hidden AppBar.

Currently you have to retemplate RadJumpList  and tweak the scrollviewer that is inside the ControlTemplate, otherwise you can not stop the scrolling behavior.

I am looking forward to your reply.

Best wishes,
Victor
the Telerik team

[Edouard]

Hi Victor,

About the scrolling, can you tell me more precisely how to disable the scrolling ?

About the SystemTray issue, I've a SmoothStreamingMediaElement in my App.xaml, and if I remove it, everything works great.

Here is the demo project I'm using : http://file.rspreprod.fr/WP7/JumpListSystemTray.zip

If you remove the line

RootFrame.Template = App.Current.Resources["MediaFrameTemplate"] as ControlTemplate;

in the InitializePhoneApplication method of the App.xaml.cs file, everything is diplayed fine.

Thanks,

[Victor]

Hello Edouard,

 In order to modify the control template of RadJumpList you need to open the Reflector tool and load the Telerik.Windows.Controls.Data.dll assembly. When you do this, expand the loaded assembly in the tree view in Reflector and then click on the Resources node to expand it and then double click its child node, the child node should be called Telerik.Windows.Controls.Data.g.resources. On the right you will see an entry called themes/jumplist.xaml. You can right-click this entry and choose SaveAs.

After saving the file you can copy/paste the template and tweak it as you please. In your case, you have to edit the JumpListGroupPicker template which is specified in the last Style element in the file. Inside this Style you will see a ScrollViewer and you will be able to change its VerticalScrollBarVisibility from Auto to Disabled.

In order to fix the blank area below the group picker you have to edit the template for your application frame. It appears that is missing some property settings from the default template. It should look like this:

<ControlTemplate x:Key="MediaFrameTemplate" TargetType="phone:PhoneApplicationFrame">
            <Border x:Name="ClientArea" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                <Grid x:Name="MediaElementContainer">
                    <smooth:SmoothStreamingMediaElement Name="SSME_media" Volume="1.0" AutoPlay="True" Loaded="SSME_media_Loaded" />
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Grid>
            </Border>
        </ControlTemplate>

Please write again if you need further assistance.

Kind regards,
Victor
the Telerik team

[Edouard]

Hi,

Thanks a lot for your answer. The blank area is now fixed and it's working great.

For the scrolling, I followed your instructions, and it's working, but I had to copy all the styles (not only the one I want to change) to my resources, and :
- set a Key to the telerikDataControls:RadJumpList Style (RadJumpListStyleCustom)
- set a Key to the telerikDataControlsLocal:JumpListGroupPicker Style (JumpListGroupPickerCustom)
- set the Style property of the JumpListGroupPicker in the RadJumpListCustom Style to {StaticResource JumpListGroupPickerCustom}
- set the Style property of my RadJumpList to {StaticResource RadJumpListStyleCustom}

Is this normal, or is there a simple way to avoid the scrolling ?

Thanks,

[Victor]

Hi Edouard,

 Thank you for the question.
I am afraid that this is the only way to modify the smallest details of a control's visualization. Retemplating controls always involves copy/pasting styles around and so far Microsoft have not provided a better way. If you need to retemplate the standard button for example you have to do the same thing, copy the whole style and paste it in your application with the desired modifications. Another way would be to use the GetTemplateChild method of a control and try to get the scrollviewer or its parent but you will have to know the name of the element you are looking for. If it does not have a name you will have to recursively search for it somehow or just copy/paste the whole template.

You can use the MergedDictionaries property of the ResourceDictionary class in order to make things a little tidier and keep custom templates in their own xaml files.

It's great that your application is now working, please write again if you have other questions.

Kind regards,
Victor
the Telerik team

[Edouard]

Hi Victor,

Thanks a lot for the time you've taken to help me.
 
Everything works great, so it's OK for me.

Thanks again.

Best regards,

Edouard