Dynamically design the size of the control based on the change of the IsExpanded property value of Expander

Brief description:

When the IsExpanded property of Expander is "True", the control is set to a size (here is the height) and a different value is set for the control when "False".

Knowledge Points: Data binding, style, and trigger

<Grid>
<Grid.RowDefinitions>
<RowDefinition>
<RowDefinition.Style>
<style targettype= "RowDefinition" >
<setter property= "Height" value= "/>"
<Style.Triggers>
<datatrigger binding= "{Binding elementname=testexpander,path=isexpanded}" value= "True" >
<setter property= "Height" value= "205"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<rowdefinition height= "*"/>
</Grid.RowDefinitions>

<expander header= "Haha" x:name= "Testexpander"/>
<stackpanel grid.row= "1" >
<TabControl>
<tabitem header= "Hahatabitem" >
<ListBox>
<listboxitem content= "Blue"/>
<listboxitem content= "Black"/>
<listboxitem content= "Red"/>
</ListBox>
</TabItem>
</TabControl>
</StackPanel>
</Grid>

Dynamically design the size of the control based on the change of the IsExpanded property value of Expander