Change State of an Image

How-to Discussions
1

Attempting to change an image depending on the state selected. In the following example I have an Image called “someColor”, with an File attribute. Depending on the state selected through the 2 buttons, the original image displayed should change to the new value given in the function.
Reading in the forums and slack, it looks like Change doesn’t support File="sample.png".

I tried it also by setting an ImageSource, and calling the Source="sample.png" on the Change function, but without luck.

I was also thinking of setting an Observable, but don’t know how I would set the original state to an observable with the path of an image, var someString = Observable("sample.png"); , as it would just read it as a string of sample.png.

What would be a good way to go about this?

	    <Panel Width="100" Height="100">
	        <Image ux:Name="someColor" File="sample2.png"/>
	    </Panel>
	    <StateGroup ux:Name="stateGroup">
	        <State ux:Name="redState">
	            <Change someColor.File="sample3.png" Duration="0.2"/>
	        </State>
	        <State ux:Name="blueState">
	            <Change someColor.File="sample4.png" Duration="0.2"/>
	        </State>
	    </StateGroup>
	    <Grid ColumnCount="3">
	        <Button Text="Red">
	            <Clicked>
	                <Set stateGroup.Active="redState"/>
	            </Clicked>
	        </Button>
	        <Button Text="Blue">
	            <Clicked>
	                <Set stateGroup.Active="blueState"/>
	            </Clicked>
	        </Button>
	    </Grid>
2

Hi Matt,

you’re asking a lot of questions here, while you should have started with describing what it is that you’re willing to make. It would be far easier to suggest the right approach then.

Now, having given this a little test, I can confirm that changing the Source of an Image works just fine, provided you have created the necessary resources for it:

<App>
    <FileImageSource ux:Global="a1" File="1.jpg" />
    <FileImageSource ux:Global="a2" File="2.jpg" />
    <Panel Width="160" Aspect="1" BoxSizing="FillAspect" HitTestMode="LocalBounds">
        <Image ux:Name="theImage" Source="a1" StretchMode="UniformToFill" />
        <WhilePressed>
            <Change theImage.Source="a2" />
        </WhilePressed>
    </Panel>
</App>

While that works, I’m also certain that you probably don’t want to define a ux:Global for every image you have in your project. There are ways to achieve the same result using data-binding to JavaScript and including the images in your :Bundle.

3

Thanks for the quick response.

The example works, as you said. Looks like I missed something when I tried attempted to do the same thing before. I’ll read up on bundling and data binding to make this work for my app. Thank you!

4

Uldis wrote:
…
While that works, I’m also certain that you probably don’t want to define a ux:Global for every image you have in your project. There are ways to achieve the same result using data-binding to JavaScript and including the images in your :Bundle.

Hey, would it be possible, you give us a small example of this one?
I’m trying it since (i dont know anymore), but I cant get it to work.
I can fetch all my required datas, and display them as i want, but this image-one is killin me.

Thank you soo much

Grateflly

Blade

5

Hi John,

while your question is, indeed, related to the topic, you should avoid hijacking threads.

Could you please make a new forum post, where you include some of your code (we like complete, minimal repros best) to show what you have already tried / working and describe what it is that you want & fail to achieve?

6

Omg, thank you soo much for answering me.
Okay I will create a test case with minimal input to recreate the problem and start a new thread.
What should I do about the “backend”-part which gives the data to the fetch (it is in my local lan)?

And sorry for the hijacking, this will be my last post here in this thread

7

I believe you can just include a mock JSON object right in the JavaScript code of the example, or in a separate file. If you want to get fancy, you can write a JS module that holds functions which return JSON objects, just like your backend would.