windows phone listbox ItemTemplate binding to listBoxItem

Question

I have a Button in my ListBox's ItemTemplate and I want to binding its Visibility to ListBox Item IsSelected. So, the Button is showed when the item is selected.

I find the following code which work fine on WPF:

<Button Visibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1},Path=IsSelected}"，Converter={StaticResource BooleanToVisibilityConverter}/>

But RelativeResource on windows phone is not support FindAncestor mode.

Anyone have any advice ?

Answer 1

Use can use ItemContainerStyle of ListBox:

           <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" Visibility="{Binding Visibility}" >
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="testbutton">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <StackPanel>
                                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" Margin="{TemplateBinding Padding}" VerticalContentAlignment="Center"/>
                                    <Button x:Name="testbutton" Visibility="Collapsed" Width="200" Height="100" Content="Test button"/>
                                </StackPanel>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

And,

        <ListBox Width="480" Background="DarkGray"  
                ItemContainerStyle="{StaticResource ListBoxItemStyle}" 
                ScrollViewer.VerticalScrollBarVisibility="Disabled"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{Binding Header}" TextAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>