Search code examples
wpfxamlc#-4.0itemscontrol

Show/Hide items in itemscontrol on condition


I have an Itemscontrol that I am using to display a list of start information sent from a timing system.

I need to be able to "switch off"/stop displaying a set of lane info if the lane number isn't showing (if it's null or a blank) and then if the timer sends info to switch the lane back on then show the data again.

I can't set it to just delete everything because the timer sends its information constantly and everything except the lane number would reappear again.

Is it possible to show/hide items on condition?

What is currently happening

Lanes
1 ------
2 ------
  ------ <- other info remains
4 ------

What I want to happen

Lanes
1 ------
2 ------

4 ------

Here is a sample of my itemscontrol code

<ItemsControl ItemsSource="{Binding CHeat.SwimList}" Margin="10,0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <Label Content="Lane" />
                            <Label Content="Pos" />
                            <Label Content="Swimmer" />
                            <Label Content="Club" />
                            <Label Content="Time" />
                        </StackPanel>
                        <ItemsPresenter/>
                    </StackPanel>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="35" />
                                <ColumnDefinition Width="30" />
                                <ColumnDefinition Width="150" />
                                <ColumnDefinition Width="50" />
                                <ColumnDefinition Width="80" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Content="{Binding LaneNumber}" />
                            <Label Grid.Column="1" Content="{Binding Position}" />
                            <Label Grid.Column="2" Content="{Binding Swimmer}" />
                            <Label Grid.Column="3" Content="{Binding Club}" />
                            <Label Grid.Column="4" Content="{Binding Time}" />
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

If there was a way I could set Content = "" for the other data based off the LaneNumber then I believe it could work, because then I can just bring back the bindings.

I'm fairly new to WPF so extra detail would be helpful many thanks!


Solution

  • Why don't you try using the Visibility property? you just have to create a public property in your MVVM or code behind and the Bind it to the element you want to hide.

     <StackPanel Visibility="{Binding ShowElement, Converter={StaticResource VisibilityConverter}, Mode=TwoWay}">
    

    By setting the boolean value of ShowElement, you can easily hide or show the StackPanel.