Wugenois
Topic Author
Posts: 6
Joined: 07 Apr 2020, 10:22

Image Source not working when Binding

28 Sep 2020, 18:05

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

Tags:
 
Noa3
Posts: 10
Joined: 03 Sep 2020, 16:13

Re: Image Source not working when Binding

29 Sep 2020, 13:38

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>
    
 
User avatar
sfernandez
Site Admin
Posts: 1935
Joined: 22 Dec 2011, 19:20

Re: Image Source not working when Binding

29 Sep 2020, 16:31

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
 
Wugenois
Topic Author
Posts: 6
Joined: 07 Apr 2020, 10:22

Re: Image Source not working when Binding

30 Sep 2020, 16:57

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
 
User avatar
sfernandez
Site Admin
Posts: 1935
Joined: 22 Dec 2011, 19:20

Re: Image Source not working when Binding

30 Sep 2020, 17:45

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.
 
Wugenois
Topic Author
Posts: 6
Joined: 07 Apr 2020, 10:22

Re: Image Source not working when Binding

30 Sep 2020, 18:36

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 !
 
User avatar
sfernandez
Site Admin
Posts: 1935
Joined: 22 Dec 2011, 19:20

Re: Image Source not working when Binding

30 Sep 2020, 19:01

Great to hear that, you're welcome.

Who is online

Users browsing this forum: Google [Bot], niklasvh and 2 guests