WPF: Adding a ProgressBar to ListBox Items

Question

I'm trying to make the background of my ListBoxItems to be constituted of a ProgressBar, but the "Z-Index" thing is not seemingly working for me. I have read somewhere that Grid doesn't support Z-Index (like Canvas) and that by default elements are rendered in the order they are added. This is what apparently happens in my case too. But when I click on a listbox item, my TextBlock (see below) disappears, apparently because the ProgressBar comes to front. Interestingly, the other child controls (image and animation) do not disappear, so I'm kind of puzzled.

Here's my ListBox's ItemTemplate:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Name="ListBoxGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Background="White" Value="{Binding Path=SendProgress}" />
            <Image Width="50" Stretch="Uniform" Grid.Column="0" HorizontalAlignment="Center" Margin="20,0,0,0" VerticalAlignment="Center" Source="{Binding Image}" />
            <TextBlock FontSize="16" Grid.Column="1" VerticalAlignment="Center" Text="{Binding Path=ImageFilePath, Padding="20,0,0,0" />
            <Canvas Grid.Column="2">
                <Image Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" Source="{Binding Status}" />
                <my:LoadingAnimation HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Canvas.Left="5" Canvas.Top="5" Visibility="{Binding IsSending, Converter={StaticResource BooleanToVisibilityConverter1}}" />
            </Canvas>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

Answer 1

Panel.ZIndex property works fine for me Sample code:

<Grid>
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2">
        <Button Name="goButton" Height="30" Width="50" Margin="0,10,0,50" Click="goButton_Click">GO!</Button>
        <ProgressBar Name="progressBar" Width="300" Height="30" />
    </StackPanel>

        <Label VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="100" Content="SHOWTHIS" Panel.ZIndex="1"/>
</Grid>

Perhaps Style Datatriggers for visibility might be usefull in this case if i understood it well Sample code for each element of your datatemplate:

<Image>
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSending}" Value="True">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsSending}" Value="False">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>