1

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

Community
  • 1
  • 1
Juan
  • 588
  • 1
  • 8
  • 25
  • 1
    Please provide some more information: what exactly is meant by "navigate between detail instances"? – Jon Mar 15 '11 at 11:01
  • If you're using MVVM, and binding the scheduler's date to your ViewModel using two-way binding, then I would expect it to maintain that value even if the control is unloaded and re-created. Are you using MVVM? – Joe White Mar 15 '11 at 11:44
  • Yes I'm using MVVM, sorry for not saying it. I could use this approach the thing is don't want the control to unload, is that possible? – Juan Mar 15 '11 at 11:52
  • We would need to know more about how you're loading the detail view (the one that's getting unloaded when you switch types). Probably you're using DataTemplates with DataType, and if you really don't want to unload the controls, you would need to do something different. But hard to tell without seeing your code. – Joe White Mar 15 '11 at 19:25
  • Im using DataTemplates, that's right. I have edit the post and put some code. Any solution? thanks – Juan Mar 16 '11 at 07:48

1 Answers1

1

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.

Emond
  • 50,210
  • 11
  • 84
  • 115
  • Thanks for the answer. So it's normal behaviour to unload only when they change the type (but inherit from the same subclass that inherits from UserControl), loading a different control(instance) with same type doesnt unload...? – Juan Mar 15 '11 at 11:45
  • I do not know the implementation but it seems reasonable to me to not re-create the same control again when all that will change is the content bound to the control. – Emond Mar 15 '11 at 14:01
  • Any help now with the new info? Thanks – Juan Mar 16 '11 at 15:33
  • Again, when the date you selected needs to be kept across items do not put it in the DataTemplates of the items. – Emond Mar 16 '11 at 20:32