Windows Phone Toolkit: add ContextMenu to Button style template

Question

I have a piece of XAML code that defines a template for some Buttons inside a StackPanel:

<StackPanel x:Name="ThumbnailsStack">
   <StackPanel.Resources>
      <Style TargetType="Button">
         <Setter Property="Height" Value="120" />
         <Setter Property="Margin" Value="3" />
         <Setter Property="BorderThickness" Value="0" />
      </Style>
    </StackPanel.Resources>
 </StackPanel>

The code works and all the buttons inside the stack assume the defined style. Now I want to attach a ContextMenu (from the Toolkit library) to each one of them. I tried the following way:

In App.xaml

<Application.Resources>
    <toolkit:ContextMenu x:Key="ThumbBtnMenu">
        <toolkit:MenuItem Header="delete"></toolkit:MenuItem>
    </toolkit:ContextMenu>
</Application.Resources>

In the previous code I added a new tag:

<StackPanel x:Name="ThumbnailsStack">
   <StackPanel.Resources>
      <Style TargetType="Button">
         <Setter Property="Height" Value="120" />
         <Setter Property="Margin" Value="3" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="toolkit:ContextMenuService.ContextMenu" Value="{StaticResource ThumbBtnMenu}" />
      </Style>
    </StackPanel.Resources>
 </StackPanel>

Now, when the Page loads, it raises a System.Windows.Markup.XamlParseException: Failed to assign to property 'System.Windows.Setter.Value'

Answer 1

The problem is when you define the Context menu in the resource, there will be only one instance of the ContextMenu (and this same instance will get added to all button) so there will be some issue when it's added to the visual tree since an item can only have one parent.

I think the only way for you to define the Context menu at the Style level is actually to define it inside the complete stlye of the button, like this for example:

<Style  TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="delete"></toolkit:MenuItem>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>