I receive the following error for the code piece below.
Error : 'cardImage' declared in SwipeCardsPage.ux(25) is a member of 'Card' and cannot be accessed from 'SwipeCardsPage'. To make this work, consider making 'SwipeCardsPage' an ux:InnerClass of 'Card'. ?: Error : Object reference not set to an instance of an object
I can see that why it’s happening but I couldn’t find a proper way to animate cardImage when a card action button is clicked.
You may suggest to put CardActionButtons panel into Card panel but it might affect some other animations in the page that I removed for now so I prefer keep it as it is if it’s possible.
Could you advise me how I can animate the cardImage (for now I just set the height but there could be some advanced animations) in the current structure?
Could you please post a complete reproduction? Otherwise this code doesn’t make much sense.
I’m reading it so that your CardActionButtons wants to call out to a single cardImage, while in reality there’s as many cardImage instances as there are items in your pagesView. Which page / instance of the cardImage do you think you’re referring to then…?
Now, if you’re trying to implement a global “do / do not show images” switch on top of your PageControl, you could use a globalWhileTrue, and feed it to your pages as a property or dependency.
So maybe we can start with that complete reproduction, and an explanation of what it is that you’re trying to make?
This is the whole piece. You’re correct I need to specify which card’s image that I’d like to animate. However, I’m not sure how to get the active card on the page when the button is clicked.
Alright, here’s something that we call a complete, minimal reproduction, and it explains the thinking behind what I was saying in my last two posts. Hope that looking at some code will put things in the right perspective:
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
// list of our pages
var pages = [
{title: "Page One", description: "this is description for page 1", color: "#18f"},
{title: "Page Two", description: "this is description for page 2", color: "#f81"},
{title: "Page Three", description: "this is description for page 3", color: "#f18"}
];
// a global observable boolean that stores the state for description visibility (opacity actually in this case)
var hideDescriptions = Observable(false);
// a function to toggle that state
function toggleHideDescriptions() {
hideDescriptions.value = ! hideDescriptions.value;
}
// make things available to UX
module.exports = {
pages: pages,
hideDescriptions: hideDescriptions,
toggleHideDescriptions: toggleHideDescriptions
};
</JavaScript>
<!-- the page class -->
<Panel ux:Class="MyPage">
<!-- a boolean property that is passed in for the instance from parent scope -->
<bool ux:Property="HideDescriptions" />
<!-- when the property above changes the value to true, change description opacity -->
<WhileTrue Value="{ReadProperty HideDescriptions}">
<Change theDescription.Opacity="0" />
</WhileTrue>
<!-- and here is the content for the page -->
<StackPanel Alignment="Center" ItemSpacing="16">
<Text Value="{title}" TextColor="#fff" TextAlignment="Center" />
<Text ux:Name="theDescription" Value="{description}" TextColor="#fff" TextAlignment="Center" />
</StackPanel>
<Rectangle Color="{color}" />
</Panel>
<DockPanel>
<Panel Dock="Top" Height="56" Color="#000">
<!-- just a label for the button, the label of which changes depending on what the global visibility state is -->
<WhileTrue Value="{hideDescriptions}">
<Change theLabel.Value="Show Descriptions" />
</WhileTrue>
<Text ux:Name="theLabel" Value="Hide Descriptions" TextColor="#fff" Alignment="Center" />
<!-- and it calls the toggling function -->
<Clicked>
<Callback Handler="{toggleHideDescriptions}" />
</Clicked>
</Panel>
<PageControl>
<Each Items="{pages}">
<!-- finally, here is how we pass the property -->
<MyPage HideDescriptions="{hideDescriptions}" />
</Each>
</PageControl>
</DockPanel>
</App>