I’m developing a WPF application using MVVM. Inside a Window, I have a control that inherits from UserControl, lets call it DetailView.
DetailView is binded to a property in the VM (CurrentDetail) that can be of different types, UserDetail, AccountDetail, CalendarDetail, etc. All inherit from the same class
I have a “ThumbnailBar” in which I can navigate between different detail instances that have been already opened, imagine AccountDetail1, AccountDetail2, etc.
This navigation is handled updating CurrentDetail in the VM and with the OnPropertyChanged event
The problem comes when I switch from one type (AccontDetail3 for example) to another different type (UserDetail6). I have noticed it calls the “Unloaded” event of the control I’m leaving and the control I’m going to is Initialized, both things don’t happen when I navigate through instance of the same type
This causes me some problems, like in calendar where I have a telerik RadScheduler that wont keep the date I had navigated to and reload with the today date.
I know and I have already tested, I could save the variable SelectecTimeSlot and keep reloading it, but that would be just a patch
EDIT – some code:
Here is MainView.xaml where I call CurrentDetailsWorkSpace
<Border x:Name="BorderExteriorContent" BorderBrush="Transparent" BorderThickness="0"
Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2">
<ContentControl
x:Name="DetalleContenidoWrkSpc"
Background="Red"
Height="{Binding ElementName=BorderExteriorContent,Path=ActualHeight}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Content="{Binding CurrentDetailsWorkSpace}"
VerticalAlignment="Top" Panel.ZIndex="1" />
</Border>
And here is CalendarView (one of the views That unloads) and yes I’m using DataTemplates
<base:BaseUCView
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:base="clr-namespace:MRWTINT.HGC.Win.Views.Base"
mc:Ignorable="d"
xmlns:calVm="clr-namespace:MRWTINT.HGC.Win.ViewModels.Calendario"
x:Class="MRWTINT.HGC.Win.Views.Calendario.CalendarioView"
xmlns:draganddrop="clr-namespace:MRWTINT.HGC.Win.ViewModels.DragDropLib"
xmlns:Calendario="clr-namespace:MRWTINT.HGC.Win.Themes.Calendario"
Margin="0"
d:DesignWidth="730" Height="Auto"
Unloaded="BaseUcViewUnloaded">
<Border x:Name="border" Margin="0,0,30,0" BorderBrush="#FF8A8A8A" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Grid >
<Grid Background="White" Grid.IsSharedSizeScope="True">
<Grid.Resources>
<DataTemplate x:Key="DayWeekSlotTemplate">
<Border Background="Black" Opacity="0.1" MinHeight="20" MinWidth="800" />
</DataTemplate>
<DataTemplate x:Key="AllDaySlotTemplate">
<Border Background="Black" Opacity="0.1" MinHeight="44" MinWidth="800" />
</DataTemplate>
<DataTemplate x:Key="MonthSlotTemplate">
<Border Background="Black" Opacity="0.1" MinHeight="120" MinWidth="120" />
</DataTemplate>
<DataTemplate x:Key="TimeLineSlotTemplate">
<Border Background="Black" Opacity="0.1" MinHeight="800" MinWidth="110" />
</DataTemplate>
<Calendario:TimeSlotTemplateSelector
x:Key="TimeSlotTemplateSelector"
MonthSlotTemplate="{StaticResource MonthSlotTemplate}"
TimeLineSlotTemplate="{StaticResource TimeLineSlotTemplate}"
AllDaySlotTemplate="{StaticResource AllDaySlotTemplate}"
DayWeekSlotTemplate="{StaticResource DayWeekSlotTemplate}"
/>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<telerik:RadBusyIndicator x:Name="busyIndicator"
Grid.Row="1" BusyContent="{DynamicResource LBL_DetalleCalendario}"
IsBusy="{Binding IsBusy}" Background="{x:Null}" BorderBrush="{x:Null}"
DisplayAfter="{Binding BusyIndicatorDelayedDisplay}">
<telerik:RadScheduler x:Name="scheduler"
TimeSlotTemplateSelector="{StaticResource TimeSlotTemplateSelector}"
draganddrop:DragDropHelper.IsDropTarget="true"
Margin="0"
Grid.Row="1"
FirstDayOfWeek="Monday" FontFamily="Arial" FontSize="10.667"
AppointmentsSource="{Binding ActividadesView}"
calVm:CalendarioEventBehaviours.CalendarioCreateActividadCommand="{Binding SaveCommand}"
calVm:CalendarioEventBehaviours.CalendarioAddActividadCommand="{Binding AddNewActividadCommand}"
calVm:CalendarioEventBehaviours.CalendarioDeleteActividadCommand="{Binding DeleteActividadCommand}"
calVm:CalendarioEventBehaviours.CalendarioEditingActividadCommand="{Binding EditingActividadCommand}"
calVm:CalendarioEventBehaviours.CalendarioEditedActividadCommand="{Binding EditedActividadCommand}"
telerik:StyleManager.Theme="{DynamicResource RadSchedulerTheme}"
ToolTip="{DynamicResource LBL_ToolTip_Calendario_Generico}"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
ShowsConfirmationWindowOnDelete="False"
OpenModalDialogs="True" Height="Auto"
AllDayAreaHeight="0"
ViewMode="{Binding CalendarioViewMode, Mode=OneWayToSource}">
<telerik:RadScheduler.MonthViewDefinition >
<telerik:MonthViewDefinition />
</telerik:RadScheduler.MonthViewDefinition>
<telerik:RadScheduler.DayViewDefinition >
<telerik:DayViewDefinition DayStartTime="07:00:00" />
</telerik:RadScheduler.DayViewDefinition >
<telerik:RadScheduler.TimelineViewDefinition >
<telerik:TimelineViewDefinition DayStartTime="07:00:00" />
</telerik:RadScheduler.TimelineViewDefinition>
<telerik:RadScheduler.RenderTransform >
<TransformGroup >
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</telerik:RadScheduler.RenderTransform>
<telerik:RadScheduler.WeekViewDefinition >
<telerik:WeekViewDefinition DayStartTime="07:00:00" />
</telerik:RadScheduler.WeekViewDefinition>
<VisualStateManager.CustomVisualStateManager>
<VisualStateManager />
</VisualStateManager.CustomVisualStateManager>
</telerik:RadScheduler>
</telerik:RadBusyIndicator>
<!-- BOTONES PARTE SUPERIOR CALENDARIO -->
<Grid x:Name="Botonera" Margin="10,4,0,0" RenderTransformOrigin="0.5,0.5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- REFRESCAR CALENDARIO -->
<StackPanel Grid.Column="0" x:Name="PanelRefresh" Orientation="Horizontal" Cursor="Hand">
<Image x:Name="imgResfresh"
Width="16" Height="16" Source="..\..\Resources\Calendario\table_refresh.png" />
<Button x:Name="btnRefresh"
Content="{DynamicResource BTN_Refrescar}"
Style="{StaticResource ButtonStyle}"
Background="{x:Null}" FontFamily="Arial"
FontSize="10.667" Margin="0,0,5,0"
Command="{Binding RefreshCommand}" />
<Image x:Name="imgWeekends" Margin="10,0,0,0"
Width="16" Height="16" Source="..\..\Resources\Calendario\table_row_delete.png" />
<Button x:Name="btnWeekends"
Style="{StaticResource ButtonStyle}"
Background="{x:Null}" FontFamily="Arial"
FontSize="10.667" Margin="0,0,5,0"
Command="{Binding RefreshCommand}" />
</StackPanel>
<!-- /REFRESCAR CALENDARIO -->
</Grid>
<!-- /BOTONES PARTE SUPERIOR CALENDARIO -->
</Grid>
</Grid>
</Border>
Here the extract of AccountView where I’m using DataTemplates too
<DataTemplate x:Key="ImgContactoTemplate">
<Image RenderOptions.BitmapScalingMode="NearestNeighbor"
Width="16" Height="16" Margin="0,1,0,0" Source="pack://application:,,,/Resources/Cuentas/user.png" />
</DataTemplate>
<DataTemplate x:Key="ImgOportunidadTemplate">
<Image x:Name="imgTipoOportunidadEtapa"
Width="16" Height="16"
RenderOptions.BitmapScalingMode="NearestNeighbor"
Source="{Binding IDTipoEtapa, Converter={StaticResource valueToImageConverter}, ConverterParameter=EtapaOportunidadMini}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</DataTemplate>
<DataTemplate x:Key="BtCellDataTemplate">
<Button x:Name="btnNewActivityFromOportunidad" Margin="0" Width="20" Height="20" Background="Transparent" Cursor="Hand"
Command="Cuentas:CuentaViewModel.NewActivityFromOportunidadCommand"
CommandParameter="{Binding IDOportunidad}" Padding="0"
VerticalAlignment="Center" HorizontalAlignment="Center"
Visibility="{Binding CanUserCreateNew}"
Style="{DynamicResource ButtonStyle}">
<Image RenderOptions.BitmapScalingMode="NearestNeighbor" Width="16" Height="16"
Margin="0" Source="pack://application:,,,/Resources/Calendario/calendar_add.png" />
</Button>
</DataTemplate>
So using different DataTemplates for every type forces the unloading, that makes sense, any idea to solve that?
EDIT – I have DataTemplates.xaml with DataTemplate for each type in a ResourceDictionary, example:
<DataTemplate DataType="{x:Type vmCal:CalendarioBusquedaViewModel}">
<viewsCalendario:CalendarioBusquedaView Width="Auto" MaxWidth="Infinity"/>
</DataTemplate>
Related posts I’ve already read:
In wpf, is there a way to execute code before the control is unloaded…? like maybe an unloading event?
How to preserve control state within tab items in a TabControl
If you want to keep state across itemdetails you should put the state in something else than the UserControls that are used to display itemdetails.
It is quite normal that the usercontrol (and thus its state) is unloaded when a different type and corresponding usercontrol is loaded.
So the patch you are suggesting is more or less a correct solution.