WPF - Controls inside the Listbox

Question

Hi All,

i am displaying images inside the list box. If the image URL doesn't have image means it will display textblock with Book title and Author name.

Problem: If the image is available i want to hide the textblock.

Code:

  <local:ImageConverter x:Key="myImageConverter"/>
    <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="2,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Grid Width="150">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Image HorizontalAlignment="Center" Grid.Row="0" VerticalAlignment="Center"  x:Name="img" Source="{Binding ImageUrl}" Height="74" Stretch="Fill" Width="75"/>

                            -<TextBlock Name="txtblkImg"  HorizontalAlignment="Center" VerticalAlignment="Center" Height="74" Width="75">
                        <TextBlock Text="{Binding Title}"/><LineBreak/>
                        <TextBlock Text="by "/>
                        <TextBlock Text="{Binding Author1}"/>
                                </TextBlock>                                                       

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

You can expose a boolean value in your ViewModel that describes whether or not the Image exists, then set the visibility on the three TextBlocks (or a panel wrapping them) to a binding on the image exists using a BooleanToVisibilityConverter.

C#:

public bool ImageUrlIsNotValid 
{
    get 
    {
        // Test to see if the specified file exists
    } 
}

XAML: In the resources

<BooleanToVisibilityConverter x:Key="boolToVisibilityConverter"/>

and in the code shown above:

<StackPanel Orientation="Horizontal" Visibility="{Binding ImageUrlIsNotValid, Converter={StaticResource boolToVisibilityConverter}}">
  <TextBlock Text="{Binding Title}"/><LineBreak/>
  <TextBlock Text="by "/>
  <TextBlock Text="{Binding Author1}"/>
</StackPanel>