How to set up a binding from DataGridColumns to a multi-selection ComboBox? - wpfdatagrid

Question

I have a DataGrid and a custom ComboBox. The ComboBox used a ListBox to enable multi-select.
I intend to give a ObservableCollection<Data> Datas property as the data source for the ComboBox,where Data is a class with string name and bool checked. The problem is how to set up each column's visibility to a corresponding CheckBoxwhich used a Dataas its source ?
<Style x:Key="CheckBoxListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="RootElement">
<CheckBox ClickMode="Press" Content="{Binding Path=Name}" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" Foreground="White"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I saw some post used something like the xmal below, but obviously I do not has any ElementName here.
<DataGridTextColumn Header="Price" Binding="{Binding Price}" IsReadOnly="False"
Visibility="{Binding IsChecked,
Converter={StaticResource visibilityConverter},
ElementName=chkShowPrice}"/>

Answer 1

This binding is not straight forward as it looks. Since DataGridTextColumn does not fall in the same visual tree as DataGrid, so it is not possible to bind the Visibility of the column directly. However, a bit tricky approach but you may use x:Reference for the same.
Here is how we can do it
XAML
<!--I added this element to provide the DataContext by using x:Reference-->
<FrameworkElement x:Name="contextProvider" />
<DataGrid Grid.Column="1"
AutoGenerateColumns="False"
ItemsSource="{Binding DD}"
x:Name="dg"
Style="{StaticResource DataGridDemoStyle}">
<DataGrid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</DataGrid.Resources>
<i:Interaction.Behaviors>
<behavior:DataGridDropBehavior></behavior:DataGridDropBehavior>
</i:Interaction.Behaviors>
<DataGrid.Columns>
<DataGridTextColumn x:Name="Column3"
Binding="{Binding Symbol}"
Header="Symbol"
Width="*"
IsReadOnly="True"
Visibility="{Binding DataContext.Data[0].IsSelected, Source={x:Reference contextProvider}, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DataGridTextColumn x:Name="Column4"
Binding="{Binding Ask}"
Header="Ask"
Width="*"
IsReadOnly="True"
Visibility="{Binding DataContext.Data[1].IsSelected, Source={x:Reference contextProvider}, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DataGridTextColumn x:Name="Column5"
Binding="{Binding Bid}"
Header="Bid"
Width="*"
IsReadOnly="True"
Visibility="{Binding DataContext.Data[2].IsSelected, Source={x:Reference contextProvider}, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DataGridTextColumn x:Name="Column6"
Binding="{Binding Volume}"
Header="Vol"
Width="*"
IsReadOnly="True"
Visibility="{Binding DataContext.Data[3].IsSelected, Source={x:Reference contextProvider}, Converter={StaticResource BooleanToVisibilityConverter}}" />
</DataGrid.Columns>
</DataGrid>
I have binded the items from the same Data bound to multi select combo box to the visibility of the columns
changed the following so that the DataContext is available to all the elements instead of just datagrid.
dg.DataContext = d;
to
DataContext = d;
lastly to enable the IsChecked binding modify the CheckBox from
<CheckBox ClickMode="Press" Content="{Binding Path=Name}" IsChecked="true" Foreground="White"/>
to
<CheckBox ClickMode="Press" Content="{Binding Path=Name}" IsChecked="{Binding IsSelected}" Foreground="White"/>
that's all you need for such binding.
here is the link to the provided sample project DataGridColumnsVisibilityBinding.zip
Let me know if this helps.