WPF - 棱镜区域和祖先绑定的相对来源问题

Question

I tried to create a simple example of my problem:

Lets say we have the following UserControl with a Label , Image , region and a Button :

<UserControl x:Class="SR.Soykaf.Client.Main.Simple.SimpleTabView"
             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:core="clr-namespace:SR.Soykaf.Client.Core.Core;assembly=SR.Soykaf.Client.Core"
             xmlns:regions="http://prismlibrary.com/"
             mc:Ignorable="d"
             regions:ViewModelLocator.AutoWireViewModel="True"
             d:DesignHeight="300" d:DesignWidth="300">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <Grid Grid.Row="0" Grid.Column="0">
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>

         <Label Grid.Row="0" HorizontalAlignment="Center" Content="TITLE" />

         <Image Grid.Row="1" Stretch="Uniform" UseLayoutRounding="True" Height="200" Width="153" Source="{Binding PortraitImage}" />

         <ContentControl Grid.Row="2" regions:RegionManager.RegionName="{x:Static core:RegionNames.CombatWizardRegion}" />

         <Button Grid.Row="3" Content="Change view in region" Command="{Binding ChangeViewCommand}" />
      </Grid>
   </Grid>
</UserControl>

With this ViewModel:

public class SimpleTabViewModel : BaseViewModel
{
   private int _state;

   private BitmapImage _portraitImage;

   public BitmapImage PortraitImage
   {
      get => _portraitImage;
      set => SetProperty(ref _portraitImage, value);
   }

   public ICommand ChangeViewCommand { get; set; }

   public SimpleTabViewModel()
   {
      SetPortraitImage();

      _state = 0;
      ChangeViewCommand = new DelegateCommand(ChangeView);

   }

   private void ChangeView()
   {
      if (_state == 0)
      {
         RegionManager.RequestNavigate(RegionNames.CombatWizardRegion, new Uri(nameof(WeaponWizardView), UriKind.Relative));
         _state = 1;
      }
      else
      {
         RegionManager.RequestNavigate(RegionNames.CombatWizardRegion, new Uri(nameof(SpellWizardView), UriKind.Relative));
         _state = 0;
      }
   }

   private void SetPortraitImage()
   {
      PortraitImage = new BitmapImage();

      var resource = typeof(Data.Characters.PlayerCharacter).Assembly.GetManifestResourceNames().Single(x => x.ContainsIgnoreCase("PC_Hawk"));

      using (var stream = typeof(Data.Characters.PlayerCharacter).Assembly.GetManifestResourceStream(resource))
      {
         PortraitImage.BeginInit();
         PortraitImage.StreamSource = stream;
         PortraitImage.CacheOption = BitmapCacheOption.OnLoad;
         PortraitImage.EndInit();
      }
   }
}

As you can see, the Button will switch between 2 views for the CombatWizardRegion region. These are the simple views:

View 1:

<UserControl x:Class="SR.Soykaf.Client.Main.Simple.SpellWizardView"
             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:mvvm="http://prismlibrary.com/"
             mc:Ignorable="d"
             mvvm:ViewModelLocator.AutoWireViewModel="True"
             d:DesignHeight="450" d:DesignWidth="800">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <Label Grid.Row="0" HorizontalAlignment="Center" Content="Spell" />

      <Image Grid.Row="1" Stretch="Uniform" UseLayoutRounding="True" Height="200" Width="153" Source="{Binding DataContext.PortraitImage, RelativeSource={RelativeSource AncestorType={x:Type UserControl}, AncestorLevel=2}}" />
   </Grid>
</UserControl>

View 2:

<UserControl x:Class="SR.Soykaf.Client.Main.Simple.WeaponWizardView"
             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:mvvm="http://prismlibrary.com/"
             mc:Ignorable="d" 
             mvvm:ViewModelLocator.AutoWireViewModel="True"
             d:DesignHeight="450" d:DesignWidth="800">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <Label Grid.Row="0" HorizontalAlignment="Center" Content="Weapon" />

      <Image Grid.Row="1" Stretch="Uniform" UseLayoutRounding="True" Height="200" Width="153" Source="{Binding DataContext.PortraitImage, RelativeSource={RelativeSource AncestorType={x:Type UserControl}, AncestorLevel=2}}" />
   </Grid>
</UserControl>

These two views basically bind their image source to the PortraitImage property of the parent view model. Both views also have a unique label: Spell and Weapon to distinguish between the two of them.

Then I register the 2 views:

_regionManager.RegisterViewWithRegion(RegionNames.CombatWizardRegion, typeof(SpellWizardView));
_regionManager.RegisterViewWithRegion(RegionNames.CombatWizardRegion, typeof(WeaponWizardView));

Launching this application works fine - on first sight:

But... then we click the button to switch views:

Why is the image not loading in the second view? It has the same binding code as the first view.

(Also if I first register the WeaponCombatView to the region, then that view works but the SpellCombatView doesn't work anymore.)

I get this error for the view which is registered last:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.UserControl', AncestorLevel='2''. BindingExpression:Path=DataContext.PortraitImage; DataItem=null; target element is 'Image' (Name=''); target property is 'Source' (type 'ImageSource')

Also interesting: During debugging if I change the AncesterLevel to 3 and back to 2, the image suddenly appears because the binding seems to get refreshed. I also checked the Visual Tree and I don't see any problems.

Thanks in advance!

Answer 1

The RegisterViewWithRegion method enables view discovery, but is intended to construct and show the specified view when the control is loaded . The navigation service allows for changing the view dynamically. Typically, you would use RegisterViewWithRegion for static views like a menu, that do not change.

[..] if I first register the WeaponCombatView to the region, then that view works but the SpellCombatView doesn't work anymore.

Your CombatWizardRegion is in a ContentControl which uses a SingleActiveRegion in the default Prism region adapter. This means, that it can only display a single active view at once in it. When using RegisterViewWithRegion to register multiple views, they will be registered and both will be added to the Views collection of the region, but only the first one will be added to the ActiveViews collection and displayed. For your registrations below, effectively only the first one will be displayed.

_regionManager.RegisterViewWithRegion(RegionNames.CombatWizardRegion, typeof(SpellWizardView));
_regionManager.RegisterViewWithRegion(RegionNames.CombatWizardRegion, typeof(WeaponWizardView));

After navigation your views do not display, because you did not register them for navigation in the container, so the navigation service will not find them. The region manager will store them different internally with RegisterViewWithRegion , that is why you cannot just register them that way. Instead register them like this in Prism >=7:

containerRegistry.RegisterForNavigation<SpellWizardView>();
containerRegistry.RegisterForNavigation<WeaponWizardView>();

For older versions of Prism <=6 you have to use one of these methods:

containerRegistry.RegisterTypeForNavigation<SpellWizardView>(nameof(SpellWizardView));
containerRegistry.Register<object, SpellWizardView>(nameof(SpellWizardView));
containerRegistry.Register(typeof(object), typeof(SpellWizardView), nameof(SpellWizardView));

I recommend you to use either RegisterViewWithRegion for static regions or the navigation service for dynamic regions, where you need to change views with the navigation service. You can navigate to the initial view instead of registering it with the region manager and RegisterViewWithRegion .

I get this error for the view which is registered last: System.Windows.Data Error: 4: Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.UserControl', AncestorLevel='2''.

This binding works fine, it is failing because of the single active region issue above. Both views get added to the Views collection of the CombatWizardRegion , but only the first is added to the ActiveViews collection and displayed and therefore set as Content of the corresponding ContentControl . Consequently, the first view is in the visual tree and receives the data context, while the second view is not in the visual tree, so its data context is null and there is no ancestor, which causes the error.