Where can I find the Windows Phone Button Style used by clickable items in lists?

Question

In the inbuilt Windows Phone applications, clickable items in lists (StackPanel or LongListSelector) often have the following behaviour:

When Clicking/tapping and holding the item shrinks.
When Clicking/tapping and holding for 1 second a context menu pops up.
If the pointer is moved by a certain amount of pixels while holding, the tap operation is aborted.

The behaviour is easily observed in the all apps view (the screen that you get to when you swipe the home screen to the left). Because 2.+3. are already taken care of by buttons, and 1. is easy to implement with a Style that shrinks everything while the button is pressed, I'm pretty sure that the items in the lists use styled Buttons as item template - with a Style that is different from the default Button Style.

Where do I find that Style?

Pradeep Kesharwani · Answer 1 · 2014-02-08T04:50:21.963

1

You could download demo apps from these given links:

link for tilt effect here
link for context menu here

edited Feb 08 '14 at 04:50

answered Feb 07 '14 at 04:30

Pradeep Kesharwani

1,480
1
12
21

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Based on Pradeep's answer I could solve the question. The clickable items are not Buttons, altough it's possible to implement the same behaviour as a button style too (see bottom of this answer). The shrink-when-tapped effect is actually a tilt-when-tapped effect, which becomes visible to the careful observer if the item is tapped on the left or on the right instead of in the middle.

If the tilt effect is enabled for a LongListSelector, the tilt applies to the individual LongListSelector items. TiltEffect is an attached property. To use it, the project must reference Microsoft's WPtoolkit which is available on nuget.

I attached code below that shows how to use the TiltEffect and ContextMenu in a LongListSelector. To react to clicks on items in the LongListSelector, see LongListSelector: Item tap?.

<phone:PhoneApplicationPage
    x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">
    <Grid x:Name="LayoutRoot">
        <phone:LongListSelector ItemsSource="{Binding Items}" toolkit:TiltEffect.IsTiltEnabled="True">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextLargeStyle}"/>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="delete"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </Grid>
</phone:PhoneApplicationPage>

Alternatively, a button style that looks and acts the same can be implemented with the same attached property, more or less* like this:

<Style x:Key="ListButton" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}" />
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}" />
    <!-- Transparent background is necessary to be part of hitbox. transparent background and null background behave differently -->
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="toolkit:TiltEffect.IsTiltEnabled" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                    <ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" 
                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

* This style is minimal, and doesn't take care of all cases (e.g. disabled/enabled).

Where can I find the Windows Phone Button Style used by clickable items in lists?

2 Answers2