expand an collapse button in datagrid

Question

hi,

 <sdk:DataGrid MinHeight="100" x:Name="dgCounty" AutoGenerateColumns="False" VerticalAlignment="Top"   IsReadOnly="True"  Margin="5,5,5,0" RowDetailsVisibilityChanged="dgCounty_RowDetailsVisibilityChanged"  RowDetailsVisibilityMode="VisibleWhenSelected">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn  CanUserReorder="False">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="ViewButton" Click="ToggleRowDetailsVisibility" Cursor="Hand" Content="View Details"   />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTextColumn Header="Countryname" Width="100" Binding="{Binding Region Name}" CanUserReorder="False"/>
                <sdk:DataGridTextColumn Header="Populution" Width="80" Binding="{Binding Number Of People}" CanUserReorder="False"/>
            </sdk:DataGrid.Columns>
            <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <sdk:DataGrid x:Name="dgrdRowDetail" Width="400" AutoGenerateColumns="False" HorizontalAlignment="Center" IsReadOnly="True" Grid.Row="1">
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn  Header="county" Binding="{Binding CompanyName}"/>
                            <sdk:DataGridTextColumn Header="Number Of People" Binding="{Binding CompanyID}"/>
                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>
                </DataTemplate>
            </sdk:DataGrid.RowDetailsTemplate>
        </sdk:DataGrid>

how to make an button in datagrid expand an collapse where there will be 2 image buttons

once user clicks the button the rows under it will expand where there should be an one image button with (- symbol)

again user clicks the same row the rows which were expanded should collapse.(+ image button)

here i have done the function for doing the expand and collapse is completed. now only i need add an image which will change once the user clicks the row either ( we can do it by javascript or in code behind ?)

how can i change the image button like that

can any one tell me how i should i ahead or any code that can help me to solve the issue

thanks in adance

prince

Answer 1

If you have a Boolean you can bind to, the best way is to include both images and bind their visibilities to a boolean. Just make their visibilities inverses of each other.