How to make a Stack Panel Visible based on the Tapped Event of a ListView in Windows Phone 8.1?

Question

In my application, I am having a ListView. ListView lists a set of images.

So when the application is running, and when that page is loaded, a list of images are shown.

    <ListView ItemsSource="{Binding imageLists}" Background="Red" Tapped="ListView_Tapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="Green">
                    <Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill"/>

                    <StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue" 
                            HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock  Foreground="White" Text="Dumy Image Title" FontSize="10"/>
                    </StackPanel>
                </Grid>                    
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

As you can see from the code, I have one image & stackpanel inside the listview. And the stackpanel's visibility has been set to collapsed for convenience.

The StackPanel imageTitle resides inside the ListView. Stackpanel contains a TextBlock housing the images name. For now it's dumy text.

On Tapping any image in the list, I am trying to make the stackPanel visible.

The Code Behind:

 private void ListView_Tapped(object sender, TappedRoutedEventArgs e)
        {
          imageTitle.Visibility = Windows.UI.Xaml.Visibility.Visible;
        }

Since the stackpanel is inside the listview & I am trying to make it visible on the tap event of the listview, I am not able to acheive the needed result. I know my code is wrong.

If I specify the stackpanel outside the listview, I can make it visible using the code I gave inside the ListView_Tapped function. But even in that case, I need to show the stackpanel (name of the image I clicked) inside the listview item (image I clicked).

Any help??

Can this be achieved using only XAML?

By tapping an image, you want to only make its corresponding title visible, or all titles in the list visible? — Justin XL, Dec 10 '14 at 11:15
Yes. I want to make only it's title visible. All images are visible. Only titles are hidden. When I click on an image, it's title should be shown above the image, for rest of the images title is hidden. @Justin XL — Sajeev C, Dec 10 '14 at 11:22

Justin XL · Accepted Answer · 2014-12-10T11:54:58.230

Here's a pure xaml way.

Rather than changing the Visibility of the imageTitle (not a great UX), let's change its Opacity to make its appearing more interesting.

First we need to create a storyboard inside this data template. This storyboard will fade in the imageTitle in 400ms.

And then we drag a ControlStoryboard behavior from Expression Blend's Asset panel onto the top level Grid. Basically we want the storyboard to fire off when this Grid is tapped.

Please see below code for reference.

<DataTemplate x:Key="GroupTemplate">
    <Grid Background="Green">
        <Grid.Resources>
            <Storyboard x:Name="ShowImageTitleStoryboard">
                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageTitle"/>
            </Storyboard>
        </Grid.Resources>

        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Tapped">
                <Media:ControlStoryboardAction Storyboard="{StaticResource ShowImageTitleStoryboard}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>

        <Image Source="{Binding Image}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
        <StackPanel x:Name="imageTitle" Background="Blue" 
            HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
            <TextBlock  Foreground="White" Text="Dumy Image Title" FontSize="10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

Do a refresh, I forgot to include the name of the sb in the behavior. :) — Justin XL, Dec 10 '14 at 11:59

score 2 · Answer 2 · edited May 23 '17 at 10:26

2

Apart from JustinXL's answer it can also be done by using ChangePropertyAction. Also pure XAML:

<DataTemplate>
     <Grid Background="Green">
        <Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill">
            <i:Interaction.Behaviors>                            
              <ic:EventTriggerBehavior EventName="Tapped">
                 <ic:ChangePropertyAction TargetObject="{Binding ElementName=imageTitle}" PropertyName="Visibility" Value="Visible"/>
              </ic:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Image>

        <StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue" 
                    HorizontalAlignment="Center" VerticalAlignment="Center">
             <TextBlock  Foreground="White" Text="Dumy Image Title" FontSize="10"/>
        </StackPanel>
     </Grid>                    
</DataTemplate>

It's just another way to change a property - JustinXL's answer will provide nice animation with opacity, which will look much better.

edited May 23 '17 at 10:26

Community

1
1

answered Dec 10 '14 at 12:01

Romasz

29,662
13
79
154

A valid answer by using another cool behavior - `ChangePropertyAction`. – Justin XL Dec 10 '14 at 12:09
1

@JustinXL To be honest, I would also use your solution in this case. – Romasz Dec 10 '14 at 12:35
The type 'ic:EventTriggerBehavior' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. @Romasz – Sajeev C Dec 10 '14 at 13:22
2

@WD In both answers you need to add Behaviours SDK to your project - right click on references (Solution explorer window) -> add reference -> Windows Phone8.1 -> Extensions -> Behaviours tick. Then in XAML at the beginning you add namespaces: `xmlns:i="using:Microsoft.Xaml.Interactivity" xmlns:ic="using:Microsoft.Xaml.Interactions.Core"`. – Romasz Dec 10 '14 at 13:31
I didn't try Justin's answer. Your's worked. Thank you. @Romasz – Sajeev C Dec 10 '14 at 13:42
@WD And you should try it. Apart from that IMO it deserves this green tick more than mine. – Romasz Dec 10 '14 at 14:28
OK. Green Tick goes to him. And you will get some up-votes from me. @Romasz – Sajeev C Dec 11 '14 at 04:14

score 0 · Answer 3 · answered Apr 01 '15 at 07:04

0

I dunno why you specifically want to handle the scenario using XAML. For the Microsoft's recommended MVVM model you should bind a property to your element field and then you can write a converter for the same to return back "Visible" or "Collapse".

answered Apr 01 '15 at 07:04

user2220762

565
4
16

How to make a Stack Panel Visible based on the Tapped Event of a ListView in Windows Phone 8.1?

3 Answers3