Silverlight DataGrid add Arrow to the right of the DataGrid near selected row?

Question

Hi All I have master DataGrid and detail DataGrid. I need a arrow beatween them align to selected row in master?

[        Master          ]      [     Detail    ]
[          row           ]      [     row       ]
[          row           ]      [     row       ]
[    selected row        ]   >  [     row       ]
[          row           ]      [     row       ]
[          row           ]      [     row       ]

Answer 1

Second method - Add a third grid.

• Add a third grid between the other 2, with styling based on my previous answer.
• Bind the current selection property to the current selection of your master grid.
• Style the new grid to remove all the visible bits you don't want to see.
• Set IsHitTestVisible to false on the new grid (else you will be able to select the invisible rows)

First method - Edit the RowStyle and add a new element.

• Add a new column to the grid.
• Add a textblock (or arrow image etc) in the last column.
• Set the visibility of the new element to collapsed by default
• In the MouseOverUnfocusedSelected state set the visibility to Visible
• In the NormalSelected state set the visibility to Visible
• In the MouseOverSelected state set the visibility to Visible
• In the UnfocusedSelected state set the visibility to Visible

You will want to play with the style of the row generally as you apparently want it to appear off to the right of the display as if it is outside the grid. (A negative right margin will let you float the selector off the right side of the grid, but clipping may occur).

The sample XAML below results in this simple display:

I warn you now it is much easier to author styles in Blend. Example XAML below:

<UserControl.Resources>
    <Style x:Key="DataGridRowStyle1" TargetType="sdk:DataGridRow">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="sdk:DataGridRow">
                    <sdk:DataGridFrozenGrid x:Name="Root">
                        <sdk:DataGridFrozenGrid.Resources>
                            <Storyboard x:Key="DetailsVisibleTransition">
                                <DoubleAnimation Duration="00:00:0.1" Storyboard.TargetProperty="ContentHeight" Storyboard.TargetName="DetailsPresenter"/>
                            </Storyboard>
                        </sdk:DataGridFrozenGrid.Resources>
                        <sdk:DataGridFrozenGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="20"/>
                        </sdk:DataGridFrozenGrid.ColumnDefinitions>
                        <sdk:DataGridFrozenGrid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </sdk:DataGridFrozenGrid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="NormalAlternatingRow">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NormalSelected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOverSelected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnfocusedSelected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        <ColorAnimation Duration="0" To="#FFE1E7EC" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnfocusedEditing"/>
                                <VisualState x:Name="NormalEditing"/>
                                <VisualState x:Name="MouseOverUnfocusedEditing"/>
                                <VisualState x:Name="MouseOverEditing"/>
                                <VisualState x:Name="MouseOverUnfocusedSelected"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid"/>
                                <VisualState x:Name="Invalid">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackgroundRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InvalidVisualElement"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#FFBADDE9" Opacity="0" Grid.RowSpan="2"/>
                        <Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="#FFF7D8DB" Opacity="0" Grid.RowSpan="2"/>
                        <sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                        <sdk:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" sdk:DataGridFrozenGrid.IsFrozen="True"/>
                        <sdk:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
                        <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2"/>
                        <TextBlock x:Name="textBlock" Margin="0,0,0,3" TextWrapping="Wrap" Text="&gt;" d:LayoutOverrides="Width, Height" Grid.Column="2" Visibility="Collapsed"/>
                    </sdk:DataGridFrozenGrid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

Answer 2

Thank you HiTech Magic! Wehn I do margin "0,0,-30,0" it does not appear left to grid, where I have to look futher.