2 states click - listbox item WPF - wpf

Question

I have a ListboxItem with a checkbox in its template. When I click the checkbox, a section of the template gets visible. That works ok.
I am trying to simulate the same behaviour by clicking the item itself making it expand/collapse the respective section. It should always negate the current state of the item(expanded/collapsed)
I am using C#/WPF
<Grid x:Name="gridExpanded"
HorizontalAlignment="Stretch"
Margin="8"
Grid.RowSpan="1"
Width="Auto"
Height="Auto"
Visibility="{Binding IsChecked, Converter={StaticResource booleanToVisibilityConverter}, ElementName=checkBox}" />

Answer 1

It sounds like you are actually looking for the Expander control. This allows you to specify a header and content, and clicking on the header will toggle the visibility of the content

Answer 2

By WPF ListBox does not change CheckBox state when the corresponding label is clicked.
To solve this,
1) Add a IsVisibleFlag property to the item model
2) Add a handler for the PreviewMouseLeftButtonDown event of the item
3) In the handler use ItemContainerGenerator.ContainerFromItem to update the visibility flag on click
4) Associate the visibility of your template section with the IsVisibleFlag (or with the checkBox state).
The ItemModel:
publibc class MyItemModel : INotifyPropertyChanged
{
private bool _isVisibleFlag;
public bool IsVisibleFlag
{
get { return _isVisibleFlag; }
set
{
if (_isVisibleFlag != value)
{
_isVisibleFlag = value;
OnPropertyChanged(() => IsVisibleFlag);
}
}
}
// ItemText property goes here (I ommited it to save space)
}
In XAML:
<Window
<!--generated x:Class and xmlns goes here (I ommited them to save space) -->
DataContext="{Binding RelativeSource={RelativeSource Self}}"
>
<Window.Resources>
<Style TargetType="ListBoxItem">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListViewItem_PreviewMouseLeftButtonDown" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<CheckBox Name="chkVisible" Grid.Column="0" IsChecked="{Binding IsVisibleFlag}" />
<TextBlock Grid.Column="1" Text="{Binding ItemText}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Name="MyListBox" ItemsSource="{Binding AddableWidgets}" />
</Grid>
</Window>
In code:
private void ListViewItem_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
for (int i = 0; i < MyListBox.Items.Count; i++)
{
object yourObject = MyListBox.Items[i];
ListBoxItem lbi = (ListBoxItem)MyListBox.ItemContainerGenerator.ContainerFromItem(yourObject);
if (lbi.IsFocused)
{
MyItemModel w = (MyItemModel)MyListBox.Items[i];
w.IsVisibleFlag = !w.IsVisibleFlag;
e.Handled = true;
}
}
}