Hi!
I have a panel that I want to hide based on a given state. Per now the content is hidden, but I can’t make the whole element go away.
Screenshot of how it behaves and screenshot of how it should behave
As you can see from the screenshots, the purple element stays when showFocus is set to false. I would expect everything but the red bar to disappear. What’s the reason for this behaviour?
<App>
<ClientPanel>
<StackPanel Dock="Top" Color="#3D206A" Padding="10">
<JavaScript>
var Observable = require('FuseJS/Observable');
var showFocus = Observable(true);
module.exports = {
showFocus: showFocus
}
</JavaScript>
<Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
<TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
<Panel Dock="Bottom">
<Rectangle Height="1" Width="100%" Color="White"/>
</Panel>
</TextInput>
</Grid>
<StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
<StackPanel Background="Blue">
<Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
<Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
</StackPanel>
<StackPanel Background="Green" Padding="0,5,0,0">
<Each Count="7">
<Text Color="White">Hello, world!</Text>
</Each>
</StackPanel>
<WhileFalse Value="{showFocus}">
<Change focusItem.Opacity="0"/>
<Change focusItem.Height="0"/>
<Change focusItem.Visibility="Hidden" Delay="0.2" />
</WhileFalse>
</StackPanel>
</StackPanel>
</ClientPanel>
</App>
Hi!
If you want to hide an element in the sense that it doesn’t take up any space in layout, use Visibility="Collapsed"
Thanks! That worked out perfectly, but is it possible to animate the visibility? With Visibility="Collapsed" the element collapses immediatly in stead of moving upwards in a smooth motion.
<App>
<ClientPanel>
<StackPanel Dock="Top" Color="#3D206A" Padding="10">
<JavaScript>
var Observable = require('FuseJS/Observable');
var showFocus = Observable(false);
module.exports = {
showFocus: showFocus
}
</JavaScript>
<Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
<TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
<Panel Dock="Bottom">
<Rectangle Height="1" Width="100%" Color="White"/>
</Panel>
</TextInput>
</Grid>
<StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
<StackPanel Background="Blue">
<Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
<Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
</StackPanel>
<StackPanel Background="Green" Padding="0,5,0,0">
<Each Count="7">
<Text Color="White">Hello, world!</Text>
</Each>
</StackPanel>
</StackPanel>
</StackPanel>
</ClientPanel>
<Switch>
<WhileFalse>
<Change focusItem.Opacity="0" Duration=".5" Easing="CubicOut" />
<Change focusItem.Height="0" Duration=".5" Easing="CubicOut" />
<Change focusItem.Visibility="Collapsed" Delay="0.5" Duration=".2" />
</WhileFalse>
</Switch>
</App>
Use LayoutAnimation to animate layout changes. E.g. Set the Height to 0 (don’t use Change), then use a LayoutAnimation with Resize to animate the change.
Care to give an example? I’ve been playing around for a bit, but I can’t seem to make it work. This is what I got at the moment:
<App>
<ClientPanel>
<StackPanel Dock="Top" Color="#3D206A" Padding="10">
<JavaScript>
var Observable = require('FuseJS/Observable');
var showFocus = Observable(false);
module.exports = {
showFocus: showFocus
}
</JavaScript>
<Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
<TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
<Panel Dock="Bottom">
<Rectangle Height="1" Width="100%" Color="White"/>
</Panel>
</TextInput>
</Grid>
<StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
<StackPanel Background="Blue">
<Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
<Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
</StackPanel>
<StackPanel Background="Green" Padding="0,5,0,0">
<Each Count="7">
<Text Color="White">Hello, world!</Text>
</Each>
</StackPanel>
<LayoutAnimation>
<Resize Y="1" RelativeTo="LayoutChange" Duration="0.5"/>
</LayoutAnimation>
</StackPanel>
</StackPanel>
</ClientPanel>
<Switch Value="true">
<WhileFalse>
<Set focusItem.Height="0" Delay=".2" />
<Change focusItem.Opacity="0" Duration=".5" Easing="CubicOut" />
<Change focusItem.Visibility="Collapsed" Delay="0.5" />
</WhileFalse>
</Switch>
</App>
So I figured it out - the LayoutAnimation tag was on the wrong place. But as we’re now using Set for the height. How would I reset this in a good way? I don’t like setting static values for the height.
You can use Change with a zero/unspecified Duration for the same effect.
<App>
<ClientPanel>
<StackPanel Dock="Top" Color="#3D206A" Padding="10">
<JavaScript>
var Observable = require('FuseJS/Observable');
var showFocus = Observable(false);
module.exports = {
showFocus: showFocus
}
</JavaScript>
<Grid Columns="1*,30" Alignment="Top" Height="60" Color="Purple" ux:Name="searchBar">
<TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
<Panel Dock="Bottom">
<Rectangle Height="1" Width="100%" Color="White"/>
</Panel>
</TextInput>
</Grid>
<StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
<StackPanel Background="Blue">
<Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
<Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
</StackPanel>
<StackPanel Background="Green" Padding="0,5,0,0">
<Each Count="7">
<Text Color="White">Hello, world!</Text>
</Each>
</StackPanel>
</StackPanel>
<LayoutAnimation>
<Resize Y="1" RelativeTo="LayoutChange" Duration=".1" Easing="CubicOut"/>
</LayoutAnimation>
</StackPanel>
</ClientPanel>
<Switch Value="true">
<WhileFalse>
<Change focusItem.Height="0" />
<Change focusItem.Opacity="0" Duration=".2" Easing="CubicOut" />
</WhileFalse>
</Switch>
</App>
Like this? That does not seem to work.
The LayoutAnimation must be inside the element you want to animate, i.e. the focusItem in this case.
I’ve tried that too. But the purple element still won’t hide.
Any suggestions to what I might try?
I’ve tried implementing LayoutAnimation, but I’m still not getting the behaviour I want to have. Though, using <Set active.Height="0" /> in stead of <Change active.Height="0" /> gives the behaviour I want, but in stead I don’t have the ability to easily reset the size that I have when using Change.
<App>
<JavaScript>
var Observable = require('FuseJS/Observable');
var showFocus = Observable(true);
module.exports = {
showFocus: showFocus
}
</JavaScript>
<ClientPanel>
<StackPanel Dock="Top" Color="#3D206A" Padding="10">
<Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red">
<TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
<Panel Dock="Bottom">
<Rectangle Height="1" Width="100%" Color="White"/>
</Panel>
</TextInput>
<Panel HitTestMode="LocalBoundsAndChildren" Clicked="{clickHandler}">
<WhilePressed>
<Change Target="pressed.Opacity" Value="0.5" Duration=".1" Easing="QuadraticInOut" />
<Change Target="pressed.Height" Value="50" Duration=".1" Easing="QuadraticInOut" />
<Change Target="pressed.Width" Value="50" Duration=".1" Easing="QuadraticInOut" />
</WhilePressed>
<Grid Rows="7,7,7" Alignment="VerticalCenter">
<Circle Color="#FDFDFD" Width="4" Height="4"/>
<Circle Color="#FDFDFD" Width="4" Height="4"/>
<Circle Color="#FDFDFD" Width="4" Height="4"/>
</Grid>
<Circle ux:Name="pressed" Height="0" Width="0" Color="Black" Opacity="0"/>
</Panel>
</Grid>
<DockPanel ux:Name="active" Padding="10, 0" Color="Blue">
<LayoutAnimation>
<Resize X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
</LayoutAnimation>
<WhileFalse Value="{showFocus}">
<Change active.Opacity="0" Duration=".2" Easing="CubicOut" />
<Change active.Height="0" />
</WhileFalse>
<Clicked>
<Toggle Target="toggle"/>
</Clicked>
<Panel ux:Name="activeSummary" Dock="Top" Padding="0, 5">
<StackPanel ux:Name="focusContent">
<DockPanel>
<Text Value="{showFocus}" FontSize="22" TextColor="#FDFDFD"/>
<Panel Dock="Right">
<Text Value="1337" TextColor="#3D206A" Alignment="Center"/>
<Rectangle Color="White" CornerRadius="10" Height="20" Width="65"/>
</Panel>
</DockPanel>
<Text Value="er kul" TextColor="#FDFDFD88" FontSize="16" />
</StackPanel>
</Panel>
<Panel ux:Name="activeInfo" Color="#3D206A" Dock="Top" Height="0" Opacity="0" Background="Green">
<StackPanel>
<Each Count="7">
<DockPanel>
<Text Value="Lorem" TextColor="White"/>
<Text Value="Ipsum" TextColor="White" Dock="Right"/>
</DockPanel>
</Each>
</StackPanel>
<WhileTrue ux:Name="toggle" Value="false">
<Change Target="activeInfo.Opacity" Value="1" Easing="QuadraticInOut" Duration=".2"/>
<Change Target="activeInfo.Height" Value="140" Easing="QuadraticInOut" Duration=".300" DurationBack=".15"/>
</WhileTrue>
</Panel>
</DockPanel>
</StackPanel>
<Panel Background="#ccc">
<Switch Value="{showFocus}" />
</Panel>
</ClientPanel>
</App>
Hi Jo Emil!
Your code was a bit tricky to follow, but here is a consice example showing you how it can be done:
<App>
<Grid RowCount="2">
<Panel ux:Name="foo" Color="Red" Height="50%">
<LayoutAnimation>
<Resize Vector="1" Duration="0.5" RelativeTo="SizeChange"/>
<Move Vector="1" Duration="0.5" RelativeTo="PositionChange" />
</LayoutAnimation>
</Panel>
<Switch>
<WhileTrue>
<Change foo.Height="0" />
</WhileTrue>
</Switch>
</Grid>
</App>
