Dynamically add TextBlock to StackPanel

Question

So I'm developing a Windows Phone 8 app in C# using MVVM pattern. I have a screen where the layout needs to be like this:

• TextBlock
• Image
• TextBlock
• TextBlock
• If the Dynamic list of buttons.count is > 1 insert a TextBlock here
• Dynamic list of buttons
• TextBlock
• TextBlock

So I've been trying to set up this in xaml code, and it looks like this:

<StackPanel Orientation="Vertical">
<TextBlock Margin="20,0,20,0" TextWrapping="Wrap" Foreground="#c8d75a" Text="{Binding Title, Mode=TwoWay}" Height="46"></TextBlock>
<Image Margin="20,0,20,0" Source="{Binding ImageLink}" Height="200"></Image>
<TextBlock Margin="20,0,20,0" TextWrapping="Wrap" Foreground="#7e9d83" Text="{Binding subTitle, Mode=TwoWay}" Height="46"></TextBlock>
<TextBlock Margin="20,0,20,0" TextWrapping="Wrap" Foreground="#7e9d83" Text="{Binding Description, Mode=TwoWay}" Height="46"></TextBlock>
<ItemsControl ItemsSource="{Binding RelatedLinks}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Margin="20,0,20,0" Foreground="#c8d75a" Text="{Binding Text, Mode=TwoWay}" Height="46">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <cm:ActionMessage MethodName="OpenLink">
                            <cm:Parameter Value="{Binding Href}"></cm:Parameter>
                        </cm:ActionMessage>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Margin="20,0,20,0" TextWrapping="Wrap" Foreground="#7e9d83" Text="{Binding Creator, Mode=TwoWay}" Height="46"></TextBlock>
<TextBlock Margin="20,0,20,0" TextWrapping="Wrap" Foreground="#7e9d83" Text="{Binding PubDate, Mode=TwoWay}" Height="46"></TextBlock>

Now everything is working as it should except the part on my list that says "If the Dynamic list of buttons.count is > 1 insert a TextBlock here".

Let me try to explain that further. My {Binding RelatedLinks} is a bind to a ObservableCollection<RelatedLink> where RelatedLink is an object with two strings Href and Text .

So if my ObservableCollection of RelatedLinks is bigger then 1 i want to have a title text placed above this ItemsControl list. How can i achieve this?

Answer 1

ObservableCollection implements INotifyPropertyChanged and notifies about changes to Count , so you can bind to it. To show or hide a TextBlock , you would change its Visibility like this:

<TextBlock 
    Visibility="{Binding RelatedLinks.Count, Converter={StaticResource CountToVisibilityConverter}}"
    ... />

What is left is to write the CountToVisibilityConverter and add it to resources. Its Convert method would be something like:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return (int)value > 1 ? Visibility.Visible: Visibility.Collapsed;
}

An alternative approach would be to add a property bool TextVisible to your ViewModel and update it every time you update the ObservableCollection, then use a standard BoolToVisibilityConverter.