WPF Expander Auto-Resize - css

Question

I have a custom Expander that I've created as a template:
<local:MultiplyConverter x:Key="multiplyConverter" />
<ControlTemplate x:Key="AnimatedExpander" TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton x:Name="ExpanderButton" DockPanel.Dock="Top" Template="{StaticResource ExpanderButton}" Content="{TemplateBinding Header}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True">
</ToggleButton>
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Bottom">
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ScrollViewer.Height>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ScrollViewer.Height>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content" />
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView" Storyboard.TargetProperty="Tag" To="1" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView" Storyboard.TargetProperty="Tag" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
When I actually go to instantiate the Expander inside a grid, the code looks like this:
<Expander Template="{StaticResource AnimatedExpander}" ExpandDirection="Down" OverridesDefaultStyle="True" FontSize="11.0" Foreground="#CC000000" Header="Export Options" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0" CornerRadius="0" Background="Transparent" Margin="10,0,10,0" BorderBrush="#FFAAAAAA" BorderThickness="0,0,0,0.5">
<ComboBox Grid.Column="0" ItemsSource="{Binding CurrentSlicerManager.Exporters}" DisplayMemberPath="Name" SelectedItem="{Binding CurrentSlicerManager.SelectedExporter, Mode=TwoWay}" Grid.Row="0" Margin="0,0,0,10"></ComboBox>
</Border>
<ContentControl Content="{Binding CurrentSlicerManager}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"></ContentControl>
</Grid>
</Expander>
As you can see, I've bound the content inside the Expander to a ContentControl. The ContentControl uses a DataTemplate to determine which .xaml I should load into the Expander. So, I have two DataTemplates that look like this:
<DataTemplate DataType="{x:Type MLC:MLRasterSlicerManager}">
<local:MLRasterSlicerExportSettings></local:MLRasterSlicerExportSettings>
</DataTemplate>
<DataTemplate DataType="{x:Type MLC:MLVectorSlicerManager}">
<local:MLVectorSlicerExportSettings></local:MLVectorSlicerExportSettings>
</DataTemplate>
So, I have two .xaml files (MLRasterSlicerExportSettings and MLVectorSlicerExportSettings) which get loaded... and this works fine. The issue is that the height of these two interfaces are different. When, I change the combobox which controls which file to load into the expander, I would expect the expander to automatically resize itself. And, this does happen when it first loads the expander with the smaller height and then I switch it to load the one with the larger height value... the expander does resize itself to accommodate the larger file... but if I switch it back to the smaller one, then it never resizes to the appropriate height. It just remains the same height as the largest file. Can anyone recommend how to get this expander to automatically resize to the size of the content?