so next up we need to really start
supporting an expandable control
and we know right now that this pop-up
is not going to support that because
when it opens up we set the size once
and we never set that size again so
let's first take a look at making an
expandable control and we can Chuck it
inside of here for a moment but we'll
have to move out because
when it doesn't work we need to be able
to see what it should look like before
we try to then fix it
so we just do an expander basically pop
the content aside an expander and then
do expander.header to specify the header
and inside there we can do whatever we
like so for now we'll just do content
this is a long header text
and if we run that now
I presume we'll see the header in its
collapsed form like that and when we
expand as expected
we're not seeing any expansion
now I'm not sure whether the expander
hasn't is expanded maybe yep is expanded
uh property to true
and this would make it by default
expanded
so we should then see the
extended property as you can see but
then it's fixed at that height and if
there's many of these in this list and
this list can grow longer we kind of
have an issue there
so if we move this expander
or we just copy the expander and leave
that one there because we need that one
then we just go down to
the say rectangle here let's just change
this graph to a
uh border
for now
and then inside the Border paste the
expander
and let's take a look at how this
expander is working
so we can see here then it naturally
expands and in this case it's filling
the content because we are inside of a
grid so it's going to naturally fill all
the content it can
so if we were to then add say a vertical
alignment to left to top and horizontal
alignment to the left
that would act similarly to just being
in the normal pop-up control we have
where it just expands to fill so this is
kind of the expected Behavior we want
from this for this to expand up and down
in order to do that
it might seem complicated but all we're
doing is animating the control to a
certain point and animating and control
backwards
and the calculated size we can take it
any time we like and simply remove that
fixed width we only need to set the
width and height of the control to force
the animation once we're done we can
simply remove that restriction
so it's not going to be as complicated
as it sounds
but let's just start in animated pop-up
and let's go to
where we finish the animation I think
it's animation complete
yep here uh instead of setting the final
size to be the desired size
we want to just reset this to whatever
it was when it started
so to find that out yes we could find it
out
at this point when it would first get
overwritten
so let's just look at what a non-sized
control would be if we don't want to
force the size
so that's zero
not zero
and in fact we're probably best checking
because I'm sure it won't be zero
because they can't be zero we set it to
zero
so where are we sat in the width and
height first we must be setting that
somewhere
oh here we're getting set first
it's either going to be like positive
infinite negative Inverness or not a
number or something
that's not break pointing
okay let's just be lazy and Chuck it in
the Constructor start this and then
scroll and hover over the width property
and of course we're getting no
breakpoints now why are we not getting
breakpoints yep no break points
whatsoever
hey let's just kill this and start again
and let's see if we can hit any break
points at all
there we go breakpoints are working
again
so we scroll up to width
anywhere in the code just so we can
hover over
uh of course can't find one instance of
it
there we go so let's hover over now
and there we are not a number so we need
to set the width and the height to Nan
not the number
instead of the desired width and height
so that can be double dot not a number
and it's a special value that
effectively
so that's the double to
not a number as it states and the UI
then Auto sizes the width and the height
based on what the control wants to do so
it sets it to the desired width and
height
so if we run this now we should at least
be able to expand
once the control is open
the animation will be probably broken
take off all the breakpoints now they're
working
so we can see we can expand still
but now the control can open and close
but if you notice on close
let's slow that animation down so you
can see
and probably update this to the correct
format for our minute and second and
let's change it to three seconds
you will see that when we close the
animation
you can see it takes three seconds there
if we open when we close the first step
is going to think the desired size is
still this size so it's going to jump
down to here and then
scale in as you see and then when you
expand it's going to open out
and then jump open
so we need to reset
the desired size
and now it just simply comes down to
when do we want to reset that desired
size at what point do we want to
recalculate well the point we want to
recalculate is when we close the control
so if we go to when we update the open
and firstly we shouldn't be running this
code every time the value is set because
what that can actually do
is this could run twice and try and add
this row twice so if we click really
fast
as I expected there this open is running
twice because it's already been set to
True we've injected this control and
then we've clicked again before it's
covered the button and injected again
so we can do two fail safes for that one
if the value hasn't changed
then we don't do anything so if the
value equals the current
property behind then we do
nothing
and then just as a double check in case
this just happens to run any other way
let's just do a
grid.children.contains and then we'll
negate this
so if the grid doesn't contain the
control then insert it so we've got like
a double check
that should get rid of the double
clicking issue
so yeah you can click that button as
many times as you like
and click the close Button as many times
as you like
and you can do it Midway through
animations
so that seems all stable now
so with that fixed let's go back to what
we were doing
and all we need to do here now is to set
the new desired size
and we want to set it when we are
closing so instead of open
closing
we want to update the desired size
and we probably want to make a property
for this update desired
size because we already do that
somewhere
there
so we don't want to have this logic
duplicated and then going astray so
we'll just move that
into
a method
comment the method
update the desired
size
based on the current
um visuals desired size so update the
animation desired size to that that
makes sense now
and what's wrong with that inconsistent
body styles yeah I can use Expressions
okay
and that wants to be in private methods
and there we go so
if we now go back up to here
update desired size
and let's check this out so every time
we go to close the control
we're going to get the current size of
the control
so it'll let it expand up
if we open and now at the point of
closing
so this will be here
you can see we get update desired
size and we're going to now get the new
desired size which will simply be the
size the control currently is so there's
a larger size we're going to update this
size and then we come into animation
and when the animation kicks in
it's simply going to use that desired
size here to calculate a new
animation value so now the desired size
is the new larger one and it's going to
animate
based on that new
larger size so you can see it's
animating up to the big top
uncheck that so we can see
and it currently animates
up to whatever size we have it at the
point in closing so now
and closes down
so if we change this to that it should
now smoothly animate from that point so
it simply takes the size of the control
at the point in time we're about to
close it
and that actually might be an issue that
I've just seen
yeah I see that jumping
so that will happen if we
change the ah so we're closing the
control before it's opened
so if we click the control don't let it
fully open and then click to close
it's gonna still take the desired size
which is the currently animating size so
not the desired control size it's
wherever it's currently animating and
then on close we're using that
so we need to do in here
only if is opened so that checks if the
controller is basically finished if the
animation is finished
so only if it's opened do we want to
update the size so this will mean we'll
only update the desired closing size if
it managed to fully open
so if the control
is currently fully open update the size
and that should get
yeah it's nice and smooth now so that's
back to how it should be so we've
attempted to close it
shorter
and there's no issues there open it
Midway close midway open Midway
yeah all seems to be nice and smooth now
so I think there we have some solid
support for the pop-up now having any
size
content
so that was nowhere near as difficult as
I thought and probably nowhere near as
difficult as you guys might have thought
that would be to do
uh supporting a expandable pop-up
even in this visual
is now much easier
so you can see now we have a nice
pop-up
okay one last thing I'll just do is
Chuck in an animation opacity direct
property so just made a Boolean direct
property with animation opacity set to
True by default
I'll just wrap that in a region
and then if we just go down to where we
currently animate the overlay opacity we
just copy and paste that and instead
we'll just animate our own opacity
if we want to animate the opacity based
on the property then we just simply set
the animation of the opacity
uh we already store the original opacity
because we saved that as part of this
control because we hide the control then
when we're getting the initial size so
that's all we really have to do we run
that now and it should animate the
property to whatever the opacity is set
on the control
and then just for a double check when
it's fully open just in case it's like
one tick off we want to make sure we
fully uh reset the opacity to whatever
it originally was just as kind of a a
backup that we are resetting that
opacity you know the timer finishes one
short and it's 99.99 instead of 100 it
might make things slower
and then if we just run that now
so you've got kind of nice fade in and
Fade Out of Animation as well
so next up really is to get this
animation uh expander looking like the
original loudness meter so you can see
we've got
effectively four expanders here uh with
a header and content so we're showing
one but in here we want to have four so
what we'll do is make a view model that
contains a list of the lists so a list
of each of those so our list would
contain four elements and those four
elements would have a header and
subcontent
and then we'll just simply bind that to
our UI and the UI will have a list
containing the expanders and inside the
expanders they'll be bound to another
list so that's really it for this one
that wasn't too bad we now support
expanding and collapsing on our control
and we've added some nice fading opacity