Page 1 of 1

Image Source not working when Binding

Posted: 28 Sep 2020, 18:05
by Wugenois
Hello,

Running our project on Unity, we often have errors with image which are not found by Noesis and are only displayed in Blend (so their path location (or URI) seems good).
UnityError.PNG
The images URI is written in a ViewModel, as a string :
ViewModel.PNG
and then displayed through a binding in a template in a ResourceDictionary. The URI path corresponds to the image path from the Resource File :
Ressource.PNG
The URI path works in microsoft Blend, so it seems good, but doesn't work with Noesis (I have checked the characters case).

I want to know if there was already image source errors with Noesis or if it is more possibly an error in our code

Re: Image Source not working when Binding

Posted: 29 Sep 2020, 13:38
by Noa3
i have multiple guesses but the most obvious one is to check if you bind your images with the noesis:Xaml.Dependencies. look sample "Localization" too see the xml files and in the "inventory" how to make it with the pictures.

here a little sample from me:
<UserControl x:Name="userControl" x:Class="WPFvStageStyle.Test_DpiResize"
             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:local="clr-namespace:WPFvStageStyle" 
             xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
             mc:Ignorable="d"
             d:DesignHeight="1080" d:DesignWidth="1920" Style="{Binding Resources, RelativeSource={RelativeSource Self}}">

    <noesis:Xaml.Dependencies>
        <noesis:Dependency Source="ResourceDictionary/Theme.LightBlue.xaml"/>
        <noesis:Dependency Source="ResourceDictionary/Theme.DarkBlue.xaml"/>
    </noesis:Xaml.Dependencies>
    
        <StackPanel Background="#FF7A7A7A">
        
        </StackPanel>
    

Re: Image Source not working when Binding

Posted: 29 Sep 2020, 16:31
by sfernandez
Hi,

@Noa3 was right, our Unity integration tries to follow the same behavior that other assets in Unity, so only assets that are referenced in the scene are available when playing.
If you select a xaml asset you will see in the inspector a list of dependencies. We parse the source xaml file looking for dependencies (other xamls, fonts, images, sounds...) and they automatically appear there and will be available for loading during play. If you need to load other resources not directly referenced in the xaml, for example if they are bound from a ViewModel, you can add an explicit dependency by using noesis:Xaml.Dependencies.

All that is explained in our Unity tutorial in the assets section: https://www.noesisengine.com/docs/Gui.C ... tml#assets

Re: Image Source not working when Binding

Posted: 30 Sep 2020, 16:57
by Wugenois
Hello,

thanks for your reply.
If i understand correctly, noesis:Xaml.Dependencies is useful for xaml files. But here it is images (textures) that Unity/Noesis does not found.

In the list of dependencies in the inspector for our xaml screen and for our resource file, the textures are indeed not listed.

The problem is that we want to generate URIs in a ViewModel and get them with a {Binding Image} (through the codebehind of the xaml screen) to the Source property of an image in our Ressource file.
(we try to do the binding directly in the xaml screen but that doesn't work either)

in the ViewModel.cs :
        public string GetImageName(int templateId, bool isTreatment, bool isRest)
        {
            if (isRest)
            {
                //Return unique rest lockey
                return "../Images/TrainingSessionsCards/SESSION_REST.png";
            }
            else
            {
                var id = templateId + 1;
                if (isTreatment) //Return lockey with B
                {
                    id -= GetSessionCount();
                    return string.Format("../Images/TrainingSessionsCards/SESSION_B{0}{1}.png", (id < 10 ? "00" : id < 100 ? "0" : ""), id);
                }
                else //Return lockey with A
                    return string.Format("../Images/TrainingSessionsCards/SESSION_A{0}{1}.png", (id < 10 ? "00" : id < 100 ? "0" : ""), id);
            }
        }
in the screen.xaml.cs :
            // -- Resting session --
            if ((category == TrainingCategory.Unknown || category == TrainingCategory.Treatment) && m_viewModel.IsRestSessionsCategoryAccessible)
            {
                sessionsList.Items.Add(new SessionTile()
                {
                    TileId = -2,
                    LockedVisibility = Visibility.Collapsed,
                    Locked = (int)SessionLock.Unlocked,
                    IsSessionTileSelected = m_viewModel.SelectedSession == -2,
                    Resting = Visibility.Collapsed,
                    TitleText = m_viewModel.GetLockey(-2, false, true),
                    InfrastructureDispo = true,
                    SessionIntensity = -2,
                    SessionCategory = (short)TrainingCategory.Unknown,
                    IntensityVisibility = Visibility.Visible,
                    Image = m_viewModel.GetImageName(-2, false, true)
                });
            }
in the ResourceDictionnary.xaml :
                                <Viewbox Height="128" Stretch="Fill">
                                    <Grid>
                                        <Image x:Name="SessionImage" Source="{Binding Image}"/>
                                        <Rectangle x:Name="ImageMask" Height="648" Width="1152" Fill="{StaticResource GrayBrush}" Opacity="0.5" Visibility="Hidden"/>
                                    </Grid>
                                </Viewbox>
This works in Microsoft Blend but not with Unity/Noesis.

Can we use noesis:Xaml.Dependencies for reference a ViewModel.cs file in the Resource xaml ? (This doesn't seem to work)

thanks for the help !

PS : If this method is not possible, we can list the URIs (about 60 images) of the Source property with DatatTriggers in the ResourceDictionary as we did before

Re: Image Source not working when Binding

Posted: 30 Sep 2020, 17:45
by sfernandez
You can use Xaml.Dependencies for any kind of resource that can be referenced by a xaml: other xamls, images, fonts or sounds.

In your xaml you can include the following:
<noesis:Xaml.Dependencies>
  <noesis:Dependency Source="../Images/TrainingSessionsCards/SESSION_REST.png"/>
  <!-- ... and all the images you need ... -->
</noesis:Xaml.Dependencies>
Then in your ViewModel you should return the complete path inside Asstets (please adapt to your folder structure):
public string GetImageName(int templateId, bool isTreatment, bool isRest)
{
  if (isRest)
  {
    return "Assets/UI/Images/TrainingSessionsCards/SESSION_REST.png";
  }
  ...
}
Hope this helps.

Re: Image Source not working when Binding

Posted: 30 Sep 2020, 18:36
by Wugenois
It works ! Thanks for the help !

<noesis:Xaml.Dependencies> is new for me so I didn't know how to use it well.

Now i will be able to solve others similar issues, thanks !

Re: Image Source not working when Binding

Posted: 30 Sep 2020, 19:01
by sfernandez
Great to hear that, you're welcome.