WPF - collapse item in ListView

Question

Thanks for your time reading my thread.

I am using VS2012, WFP, and .net4.5 on Windows 7 64bit

I have a ListView control with xaml in following:

<ListView Name="lvViewerControl"
                      SelectionMode="Single"
                      SelectedIndex="{Binding Path=ViewType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      Background="{x:Null}"
                      BorderBrush="{x:Null}"
                      Margin="2">
                <Label Name="lblView2D"
                       Width="40"
                       Height="40"
                       Margin="3"
                       Background="#FF595959"
                       Foreground="White"
                       HorizontalContentAlignment="Center"
                       VerticalContentAlignment="Center">
                    <Image Source="/CaptureSetupModule;component/Icons/2D.png" />
                </Label>
                <Label Name="lblView3D"
                       Width="40"
                       Height="40"
                       Margin="3"
                       Background="#FF595959"
                       Foreground="White"
                       HorizontalContentAlignment="Center"
                       VerticalContentAlignment="Center">
                    <Image Source="/CaptureSetupModule;component/Icons/3D.png" />
                </Label>
                <Label Name="lblViewTiles"                       
                       Width="40"
                       Height="40"
                       Margin="3"
                       Background="#FF595959"
                       Foreground="White"
                       HorizontalContentAlignment="Center"
                       VerticalContentAlignment="Center"
                       Visibility="{Binding Path=XYCtrlVisible, Mode=TwoWay, Converter={StaticResource boolToVis}}">
                    <Image Source="/CaptureSetupModule;component/Icons/Tile.png" />
                </Label>
            </ListView>

Now I want to collapse the third item, lblViewTiles. I tried to combine its Visibility to a bool, then do the boo to visibility conversion, but it did not work. What I mean by not work is that the Visiblity only collapses when the program starts. Afterwards, not matter how the binding variable (Visiblity) changes, and the value does change to Collapsed, but the lblViewTiles still in the ListView control, no UI change.

Update:

The DataContex of the ListView is binded to CaptureSetupModules class, not LiveVM . I simply created a CaptureSetupModules in MasterView class,

In MasterView class

    CaptureSetupModules _captureVM = new CaptureSetupModules();
    ...

LiveVM _liveVM = new LiveVM;
      if (ndList.Count > 0)
                {
                    xyBorder.Visibility = ndList[0].Attributes["Visibility"].Value.Equals("Visible") ? Visibility.Visible : Visibility.Collapsed;
                    tilesControlBorder.Visibility = ndList[0].Attributes["Visibility"].Value.Equals("Visible") ? Visibility.Visible : Visibility.Collapsed;               
                    this.Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Normal,
                       new Action(
                           delegate()
                           {

                               _captureVM.XYCtrlVisible = ndList[0].Attributes["Visibility"].Value.Equals("Visible") ? true:false;

                           }
                       )
                   );               
                }

And here is my converter:

public sealed class BooleanToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var flag = false;
            if (value is bool)
            {
                flag = (bool)value;
            }
            else if (value is bool?)
            {
                var nullable = (bool?)value;
                flag = nullable.GetValueOrDefault();
            }
            if (parameter != null)
            {
                if (bool.Parse((string)parameter))
                {
                    flag = !flag;
                }
            }
            if (flag)
            {
                return Visibility.Visible;
            }
            else
            {
                return Visibility.Collapsed;
            }
        }

This code only makes the item collapsed the first time when the program starts , and it loads the visibility from the xml file. Afterwards, not matter how the XYCtrlVisible, which is the visibility binding, is changed, the UI show no response. The item is always there, or not there.

It is probably a little messy here, let me know if you need anything else. I am pretty confused myself too. Thanks.

Answer 1

I'd suggest you to look at Converters for WPF

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
                          CultureInfo culture)
    {
        if (value is Boolean)
        {
                return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, 
                          CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

A sample usage in XAML

<StackPanel>
<StackPanel.Resources>
    <BooleanToVisibilityConverter x:Key="boolToVis" />
</StackPanel.Resources>

<CheckBox x:Name="chkShowDetails" Content="Show Details" />
<StackPanel x:Name="detailsPanel" 
            Visibility="{Binding IsChecked, ElementName=chkShowDetails, 
                         Converter={StaticResource boolToVis}}">
</StackPanel>

More information can be found here.