DataBinding ListView creating components if a certain condition is met

Question

I am working on a C# WPF project and I have a list view which uses data binding and a collection view.

Below is how my ListView is currently populated.

<ListView HorizontalAlignment="Left" Margin="547,12,0,41" Name="lstCallLogInformation" Width="320">
            <ListView.Style>
                <Style TargetType="ListView">
                    <Style.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListView">
                                        <TextBlock Text="No items in your devices call log" FontWeight="Bold" HorizontalAlignment="Center" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListView.Style>
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Expander IsExpanded="True">
                                            <Expander.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock FontWeight="Bold" Foreground="Gray" Text="{Binding Name}" VerticalAlignment="Bottom" />
                                                </StackPanel>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListView.GroupStyle>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Control.HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <DockPanel Style="{StaticResource onmouseover}">
                        <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal" Tag="{Binding logID}">
                            <Image Height="30" Source="{Binding base64ImageString, Converter={StaticResource ImageConverter}}" Width="30" />
                            <StackPanel Margin="10" Orientation="Vertical">
                                <TextBlock FontWeight="Bold" Text="{Binding contactNameOrPhoneNumber}" />
                                <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Left" Text="{Binding dateString}" />
                                    <TextBlock Margin="15, 0, 0, 0" Text="Duration: " />
                                    <TextBlock HorizontalAlignment="Right" Text="{Binding humanReadableCallDuration}" />
                                </StackPanel>
                            </StackPanel>
                            <StackPanel Orientation="Vertical">
                                <Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnAddAsContact" Click="btnAddAsContact_Click">
                                    <Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/add.png" Tag="{Binding logID}" />
                                </Button>
                                <Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnDeleteContactFromLog" Click="btnDeleteContactFromLog_Click">
                                    <Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/delete.png" Margin="0,0,0,5" Tag="{Binding logID}"  />
                                </Button>
                            </StackPanel>
                        </StackPanel>
                    </DockPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Within my DockPanel within the DataTemplate I have a StackPanel which contains various TextBlocks from the array that is passed into the binding.

In one of the StackPanels you will see you will see a TextBlock that binds to the element of contactNameOrPhoneNumber.

What I want to be able to do is if another value from the binding is null then I add a TextBlock for the contactNameOrPhoneNumber` element and alongside it have another TextBlock which contains another element of number``, if the other binding value is not null then this extra textblock of number is not added.

So in simple terms, what I want to be able to do is within the DataTemplate have a conditional if statement of if binding value == null add textblock to stackpanel else don't add textblock.

Answer 1

You can do that with Style + Triggers something like this:

<TextBlock>
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding PropertyName}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

---

Also you can create IValueConverter say ObjectToVisibilityConverter which will take input your property and if property is null return Visibility.Collapsed else return Visibility.Visible.

You can then bind property with Visibility value of TextBlock via Converter.

<TextBlock Visibility="{Binding PropertyName,
                       Converter={StaticResource ObjectToVisibilityConverter}}"/>