Windows phone side menu for a listboxitem

Question

I want to create a side menu for a specific listboxitem or longlistselector's item like the picture

when your press and hold the listboxitem the blue panel comes out, is there anyway to this ?

I managed the Hold event on the item, but not the side menu !

Answer 1

You can include this menu in your Item Template and set its Visibility to Collapsed . And then add code to your Hold event that will show it. Take a look at Storyboard class for possible animations.

Answer 2

There are a few possible ways to do this, but the basic idea is that you add the menu in a hidden or collapsed state, and then trigger an animation on the Hold event. Here is a simple example (using the interactivity DLLs System.Windows.Interactivity and Microsoft.Expression.Interactions.Core):

<Grid xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
      xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
    <Grid.Resources>
        <Storyboard x:Name="ShowMenu">
            <DoubleAnimation Storyboard.TargetName="translate" Storyboard.TargetProperty="X" 
                             To="0" Duration="0:0:0.3" />
        </Storyboard>
        <Storyboard x:Name="HideMenu">
            <DoubleAnimation Storyboard.TargetName="translate" Storyboard.TargetProperty="X" 
                             To="-300" Duration="0:0:0.3" />
        </Storyboard>
    </Grid.Resources>

    <Grid Width="300" Background="LightBlue">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="translate" X="-300" />
        </Grid.RenderTransform>

        <!-- Menu popup content here -->
        <TextBlock Text="Menu">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Hold">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource HideMenu}" ControlStoryboardOption="Play" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </TextBlock>
    </Grid>

    <Grid>
        <!-- Item content here -->
        <TextBlock Text="Item">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Hold">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource ShowMenu}" ControlStoryboardOption="Play" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </TextBlock
    </Grid>
</Grid>