Silverlight Control Template for ComboBox

Silverlight Control Template for ComboBox

Using Silverlight 5.0, I have a set of checkboxes in a grid, something like this:

<Border Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,25,10,0" Background="LightGray" Opacity="0.7" >     <Grid Margin="5" >         <Grid.RowDefinitions>             <RowDefinition />             <RowDefinition />             <RowDefinition />             <RowDefinition />             <RowDefinition />             <RowDefinition />         </Grid.RowDefinitions>         <CheckBox Grid.Row="0" Content="Item 1" Margin="0" />         <CheckBox Grid.Row="1" Content="Item 1A" Margin="20,0,0,0" />         <CheckBox Grid.Row="2" Content="Item 2" Margin="0" />         <CheckBox Grid.Row="3" Content="Item 2A" Margin="20,0,0,0" />         <CheckBox Grid.Row="4" Content="Item 2B" Margin="20,0,0,0" />         <CheckBox Grid.Row="5" Content="Item 3" Margin="0" />     </Grid> </Border> 

By setting the Margin, I get the effect I want, which is that Item 1A is indented under Item 1, and Items 2A and 2B are indented under Item 2.

This is just a sample, however. There are many more of these items, so I would really rather use some kind of Binding to lay them out.

I started with a class having Name, IsSelected, and Level (0 for normal, 20 for indented) and xaml something like this:

<Border Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,25,10,0" Background="LightGray" Opacity="0.7" >       <data:DataGrid x:Name="LayerOptionsGrid" AutoGenerateColumns="False" HeadersVisibility="None">            <data:DataGrid.Columns>               <data:DataGridCheckBoxColumn Binding="{Binding IsSelected}" />                                                                    <data:DataGridTemplateColumn>                    <data:DataGridTemplateColumn.CellTemplate>                         <DataTemplate>                              <ContentControl >                                   <ContentPresenter Content="{Binding Name}" Margin="{Binding Level}" />                              </ContentControl>                         </DataTemplate>                    </data:DataGridTemplateColumn.CellTemplate>                </data:DataGridTemplateColumn>            </data:DataGrid.Columns>        </data:DataGrid>    </Grid> </Border> 

What I get is a grid of CheckBoxes and Names, not too bad, but with these two major problems: 1) I haven't got the Margin working, so there is no indentation and 2) the way the Grid works, I have to click on the checkbox twice to change it (once to select, I guess). I am looking for a better way to get this result:

(Checkbox) Item 1     (Checkbox) Item 1A  (Checkbox) Item 2     (Checkbox) Item 2A     (Checkbox) Item 2B 

etc., which my initial, brute force approach provided (albeit lacking the flexibility I need).

NOTE: if I provide a Thickness property called Margin and add Margin="{Binding Margin}" on the ContentControl, I get the indentation of the Text, but not of the CheckBox.

I am open to any options.

Answers & Comments...

Answer: 1

I found an answer while looking at the click-select part of the problem: I replaced my whole CellTemplate with the following CellEditingTemplate:

<data:DataGridTemplateColumn>     <data:DataGridTemplateColumn.CellEditingTemplate>         <DataTemplate>             <CheckBox Margin="{Binding Margin}" IsThreeState="False" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" Content="{Binding Name}" />         </DataTemplate>     </data:DataGridTemplateColumn.CellEditingTemplate> </data:DataGridTemplateColumn> 

and I also removed the line

<data:DataGridCheckBoxColumn Binding="{Binding IsSelected}" /> 

Solved both problems.

by : Kelly Clinehttp://stackoverflow.com/users/286479

---