Accessing a ProgressBar within a ListBox of buttons

I want to be able to control when I will show a ProgressBar based on a click event. Normally this would be fine, except that I don't believe I can access the ProgressBar since it is so nested in with this structure.

The following code sample shows the structure I Have

     <ListBox Name="AudioListBox" Margin="12,0,0,0" Grid.Row="2" Width="396" HorizontalAlignment="Left" ItemsSource="{Binding Audio}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Button BorderThickness="0.0" Click="ChapterPlayerButtonClick" Style="{StaticResource ButtonStyle1}">
                                <StackPanel Name="ButtonsStackPanel" Margin="0,0,0,17">
                                    <TextBlock Foreground="{Binding ChapterForeground}" Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
                                    <ProgressBar x:Name="MyProgressBar" Value="{Binding ChapterProgressPosition}" Visibility="Collapsed" 
                            开发者_StackOverflow                     IsIndeterminate="False" Foreground="{Binding ChapterForeground}" Width="300"  Background="Black" HorizontalAlignment="Left">
                                    </ProgressBar>
                                    <TextBlock Text="{Binding LineTwo}"  TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

In this example, I want to be able to change the visbility of this progress bar, as well as bind it to update with a timer I have set up. Unfortunately I can't find a way to turn on the visbility for the progress bar on the button click.

---

This is where MVVM can really help - you've already got a data binding to your ViewModel presumably from looking at your XAML.

You can send a message to your ViewModel to turn on the progress bar, by changing a IsProgressBarVisible property on your ViewModel.

Then you can bind to this boolean in your ViewModel using a VisibilityValueConverter (see post by Jeff Wilcox at this link for more details).

<ProgressBar 
    x:Name="MyProgressBar" 
    Visibility="{Binding IsProgressBarVisible, Converter={StaticResource VisibilityConverter}}" 
    IsIndeterminate="{Binding IsIndeterminate}" 
    ...
</ProgressBar>

---

If you want to update bound items within the ItemTemplate you'll need to update the bindings as you can't refer to instances of such items by name. (Because you can't have multiple items with the same name.)
In the Click event handler you can access the viewmodel instance via the sender and manipulate the properties there.

For example, the following will increment the value of the progress bar each time the button is tapped/clicked.

private void ChapterPlayerButtonClick(object sender, RoutedEventArgs e)
{
    ((sender as FrameworkElement).DataContext as ItemVm).ChapterProgressPosition++;
}

Note that due to a "quirk" of the ProgressBar you'll need to enable TwoWay binding to update the Value via binding.

I'm sure you can work out how to do the rest.

You'll need to bind the Visibility if you want to alter that too.

As an alternative solution I'd replace the button click event with a RelayCommand on the ViewModel itself to simplify the code. You could then put all the logic in the same place and not require all the casting as in the click event handler above.