WPF: While moving user control with images data context is lost - wpf

Question

1) Don't move anything - everything works fine:
2) Move user control with images - the images disappeared:
3) When I move user control with images back to original place - the images are there that is everything works fine again.
The user control with images that I moved was placed inside another user control. The code looks as following:
1) The user control with images:
<UserControl x:Class="GCE.Eam.Modules.VisualCheckAnalysis.SelectedEventImageList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:local="clr-namespace:GCE.Eam.Modules.VisualCheckAnalysis"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<UserControl.Resources>
<local:PathToFileConverter x:Key="PathToFileConverter"/>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<ListView Grid.Row="0"
ItemsSource="{Binding SelectedEventPhotoList}"
SelectedItem="{Binding SelectedEventPhoto}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Name="SelectedListView">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00000000"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00000000"/>
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="3"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<dxe:ImageEdit Source="{Binding Converter={StaticResource PathToFileConverter}}" IsReadOnly="True"
ShowBorder="False">
<dxe:ImageEdit.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick"
Command="{Binding DataContext.MouseDoubleClickUpperRowCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
</dxe:ImageEdit.InputBindings>
</dxe:ImageEdit>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="Gray" StrokeThickness="0.5"/>
<Rectangle Grid.Column="1" Stroke="Gray" StrokeThickness="0.5"/>
<Rectangle Grid.Column="2" Stroke="Gray" StrokeThickness="0.5"/>
</Grid>
</Grid>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="2"
Background="Gainsboro" ResizeDirection="Auto"/>
<Grid Grid.Row="1">
<ListView
ItemsSource="{Binding MatchingEventPhotoList}"
SelectedItem="{Binding SelectedMatchingEventPhoto}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Name="MatchingListView">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00000000"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00000000"/>
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="3"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<dxe:ImageEdit Source="{Binding Converter={StaticResource PathToFileConverter}}" IsReadOnly="True"
ShowBorder="False">
<dxe:ImageEdit.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick"
Command="{Binding DataContext.MouseDoubleClickLowerRowCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
</dxe:ImageEdit.InputBindings>
</dxe:ImageEdit>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="Gray" StrokeThickness="0.5"/>
<Rectangle Grid.Column="1" Stroke="Gray" StrokeThickness="0.5"/>
<Rectangle Grid.Column="2" Stroke="Gray" StrokeThickness="0.5"/>
</Grid>
</Grid>
</Grid>
</UserControl>
2) The user control that contains user control with images:
<UserControl x:Class="GCE.Eam.Modules.VisualCheckAnalysis.VisualCheckAnalyzerView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:visualCheckAnalysis="clr-namespace:GCE.Eam.Modules.VisualCheckAnalysis"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:behaviors="clr-namespace:GCE.AppFramework.Behaviors;assembly=GCE.AppFramework"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance visualCheckAnalysis:VisualCheckAnalyzerViewModel}"
d:DesignHeight="300" d:DesignWidth="300">
<dxb:BarManager>
<dxb:BarManager.Items>
<dxb:BarButtonItem x:Name="Refresh" Content="Пересчитать"
Hint="Обновить окно режима анализа ВИК"
ShowKeyGesture="False"
Glyph="Images/Recalculate_16.png"
LargeGlyph="Images/Recalculate_32.png"
Command="{Binding RecalculateCommand}"
KeyGesture="F5"
/>
<dxb:BarEditItem x:Name="MatchRadiusEdit"
EditWidth="60" ToolTip="{Binding DefaultMatchRadiusTooltip}"
Content="Rср" EditValue="{Binding MatchRadius}" >
<dxb:BarEditItem.EditSettings>
<dxe:SpinEditSettings MaskType="Numeric" IsFloatValue="True"
HorizontalContentAlignment="Right"
MinValue="{Binding MinRadius, Mode=OneWay}"
MaxValue="{Binding MaxRadius, Mode=OneWay}"
Increment="{Binding Increment, Mode=OneWay}"/>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
<dxb:BarButtonItem x:Name="AddBaseTab" Content="В закладку"
Hint="Открыть закладку для выделенного объекта"
Glyph="Images/ToTab_16.png" LargeGlyph="Images/ToTab_32.png"
Command="{Binding ActivateBaseEvent}" />
<dxb:BarButtonItem x:Name="AddMatchingTab" Content="В закладку"
Hint="Открыть закладку для выделенного объекта"
Glyph="Images/ToTab_16.png" LargeGlyph="Images/ToTab_32.png"
Command="{Binding ActivateMatchingEvent}" />
</dxb:BarManager.Items>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<dxr:RibbonControl x:Name="RibbonControl" Grid.Row="0" RibbonStyle="Office2010"
PageCategoryAlignment="Left" ToolbarShowCustomizationButton="False"
ShowApplicationButton="False" ToolbarShowMode="Hide">
<dxmvvm:Interaction.Behaviors>
<behaviors:NoContextMenuDxRibbonBehavior/>
</dxmvvm:Interaction.Behaviors>
<dxr:RibbonDefaultPageCategory>
<dxr:RibbonPage x:Name="MainPage" Caption="Главная">
<dxr:RibbonPageGroup Caption="Операции" MergeOrder="{x:Static visualCheckAnalysis:VisualCheckAnalysisModule.ModuleSortHint}">
<dxb:BarEditItemLink BarItemName="MatchRadiusEdit"/>
<dxb:BarButtonItemLink BarItemName="Refresh" />
</dxr:RibbonPageGroup>
</dxr:RibbonPage>
</dxr:RibbonDefaultPageCategory>
</dxr:RibbonControl>
<Border Grid.Row="1">
<dxlc:LayoutControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Vertical">
<dxlc:LayoutGroup VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Vertical"
dxlc:LayoutControl.AllowVerticalSizing="True"
Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock>
<Run FontWeight="Bold" Text="Обслед. для сопоставления: "/>
<Run Text="{Binding BaseInspectionName, Mode=OneWay}"/>
</TextBlock>
<Border Grid.Row="1">
<visualCheckAnalysis:SelectedEventsList/>
<dxb:BarManager.DXContextMenu>
<dxb:PopupMenu x:Name="PopupMenu">
<dxb:PopupMenu.ItemLinks>
<dxb:BarButtonItemLink BarItemName="AddBaseTab" UserGlyphSize="Small"/>
</dxb:PopupMenu.ItemLinks>
</dxb:PopupMenu>
</dxb:BarManager.DXContextMenu>
</Border>
</Grid>
</dxlc:LayoutGroup>
<dxlc:LayoutGroup VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Vertical"
dxlc:LayoutControl.AllowVerticalSizing="True"
Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<visualCheckAnalysis:InspectionList Grid.Row="0"/>
<Border Grid.Row="1">
<visualCheckAnalysis:MatchingEventList/>
<dxb:BarManager.DXContextMenu>
<dxb:PopupMenu x:Name="MatchedPopupMenu">
<dxb:PopupMenu.ItemLinks>
<dxb:BarButtonItemLink BarItemName="AddMatchingTab" UserGlyphSize="Small"/>
</dxb:PopupMenu.ItemLinks>
</dxb:PopupMenu>
</dxb:BarManager.DXContextMenu>
</Border>
</Grid>
</dxlc:LayoutGroup>
<dxlc:LayoutGroup>
<dxdo:DocumentGroup AllowDrag="True" AllowFloat="True" AllowMove="True"
ShowTabForSinglePage="True" ClosePageButtonShowMode="InAllTabPageHeaders">
<dxdo:DocumentPanel ShowCaption="True" Caption="Картинки для сопоставления" ShowCaptionImage="True"
CaptionImage="pack://application:,,,/GCE.Eam.OilAndGasIndustry;component/Images/Photo_16.png"
ToolTip="Картинки для сопоставления">
<visualCheckAnalysis:SelectedEventImageList/>
</dxdo:DocumentPanel>
</dxdo:DocumentGroup>
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</Border>
<dxr:RibbonStatusBarControl Grid.Row="2">
</dxr:RibbonStatusBarControl>
</Grid>
</dxb:BarManager>
</UserControl>
Where visualCheckAnalysis:SelectedEventImageList is user control with images.
As you can see I use DevExpress docking controls.
It seems to me that I loose data context when move user control with images, but I'm not sure how to make it work.
UPDATE:
<ListView Grid.Row="0"
ItemsSource="{Binding DataContext.SelectedEventPhotoList}"
SelectedItem="{Binding DataContext.SelectedEventPhoto}"
...

Answer 1

Try to handle the Loaded event for the SelectedEventImageList control and explicitly set its DataContext.
Something like this:
<visualCheckAnalysis:SelectedEventImageList Loaded="Control_Loaded" />
private bool _isLoaded;
private void Control_Loaded(object sender, RoutedEventArgs e)
{
if (!_isLoaded)
{
SelectedEventImageList ctrl = sender as SelectedEventImageList;
ctrl.DataContext = this.DataContext;
_isLoaded = true;
}
}