2

I downloaded some code for a custom expander and have changed it to the way I want, with one exception. The Height is hard-coded to 100 when expanded. I need this to act like the normal expander and set the height to accomodate whatever is in the control. Here is the XAML pertaining to that, you'll notice the Value="100" there, I tried Auto but I am forced to enter a double value as it is currently. Any ideas?

<Style TargetType="{x:Type Expander}" x:Key="MyExpander">

    <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="1" />
    <!--<Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/>-->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">

                <ControlTemplate.Resources>
                    <Storyboard x:Key="strbExpand">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(FrameworkElement.Height)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="100"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                    <Storyboard x:Key="strbCollapse">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(FrameworkElement.Height)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>


                <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" CornerRadius="3" >
                    <DockPanel x:Name="dockPanel">
                        <ToggleButton FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" 
                                      Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                                      FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" Margin="1,1,1,0" MinHeight="0" MinWidth="0" x:Name="HeaderSite" Style="{StaticResource ExpanderDownHeaderStyle}" 
                                      Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
                                      IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" DockPanel.Dock="Top" />
                        <Border Background="{DynamicResource ShadeBrush}" BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1,0,1,1" CornerRadius="3,3,3,3" x:Name="border" Margin="1,1,1,1" Height="0" >
                            <ContentPresenter x:Name="ExpandSite" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,1,1"  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" DockPanel.Dock="Bottom" />
                        </Border>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource strbExpand}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard  Storyboard="{StaticResource strbCollapse}"/>
                        </Trigger.ExitActions>
                    </Trigger>

                    <Trigger Property="ExpandDirection" Value="Down">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Bottom" />
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top" />
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderDownHeaderStyle}" />
                    </Trigger>
                    <!--<Trigger Property="ExpandDirection" Value="Right">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right" />
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}" />
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Up">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top" />
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}" />
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Left">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left" />
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}" />
                    </Trigger>-->
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1 Answer 1

2

Think you can do this by tweaking Height with the Tag property in combination.

something like:

<Style x:Key="MyExpander"
        TargetType="{x:Type Expander}">
  <Setter Property="Foreground"
          Value="{DynamicResource TextBrush}" />
  <Setter Property="Background"
          Value="Transparent" />
  <Setter Property="HorizontalContentAlignment"
          Value="Stretch" />
  <Setter Property="VerticalContentAlignment"
          Value="Stretch" />
  <Setter Property="BorderBrush"
          Value="Transparent" />
  <Setter Property="BorderThickness"
          Value="1" />
  <!--  <Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/>  -->
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Expander}">
        <ControlTemplate.Resources>
          <Storyboard x:Key="strbExpand">
            <DoubleAnimation Duration="0:0:0.12"
                              Storyboard.TargetName="border"
                              Storyboard.TargetProperty="Tag"
                              To="1" />
          </Storyboard>
          <Storyboard x:Key="strbCollapse">
            <DoubleAnimation Duration="0:0:0.12"
                              Storyboard.TargetName="border"
                              Storyboard.TargetProperty="Tag"
                              To="0" />
          </Storyboard>
          <local:VariableHeightAnimationConverter x:Key="VariableHeightAnimationConverter" />
        </ControlTemplate.Resources>
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="1,1,1,1"
                CornerRadius="3"
                SnapsToDevicePixels="true">

          <DockPanel x:Name="dockPanel">
            <ToggleButton x:Name="HeaderSite"
                          MinWidth="0"
                          MinHeight="0"
                          Margin="1,1,1,0"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          Content="{TemplateBinding Header}"
                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                          ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                          DockPanel.Dock="Top"
                          FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontSize="{TemplateBinding FontSize}"
                          FontStretch="{TemplateBinding FontStretch}"
                          FontStyle="{TemplateBinding FontStyle}"
                          FontWeight="{TemplateBinding FontWeight}"
                          Foreground="{TemplateBinding Foreground}"
                          IsChecked="{Binding Path=IsExpanded,
                                              Mode=TwoWay,
                                              RelativeSource={RelativeSource TemplatedParent}}"
                          Padding="{TemplateBinding Padding}"
                          Style="{StaticResource ExpanderDownHeaderStyle}" />
            <Border x:Name="border"
                    Margin="1,1,1,1"
                    Background="{DynamicResource ShadeBrush}"
                    BorderBrush="{DynamicResource NormalBorderBrush}"
                    BorderThickness="1,0,1,1"
                    CornerRadius="3,3,3,3">
              <Border.Tag>
                <sys:Double>0.0</sys:Double>
              </Border.Tag>
              <Border.Height>
                <MultiBinding Converter="{StaticResource VariableHeightAnimationConverter}">
                  <Binding ElementName="ExpandSite"
                            Path="ActualHeight" />
                  <Binding Path="Tag"
                            RelativeSource="{RelativeSource Self}" />
                </MultiBinding>
              </Border.Height>
              <!--  ScrollViewer to allow us to compute the actual required height of the ContentPresenter -->
              <ScrollViewer HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden">
                <ContentPresenter x:Name="ExpandSite"
                                  Margin="1,1,1,1"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  DockPanel.Dock="Bottom"
                                  Focusable="false" />
              </ScrollViewer>
            </Border>
          </DockPanel>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsExpanded"
                    Value="true">
            <Trigger.EnterActions>
              <BeginStoryboard Storyboard="{StaticResource strbExpand}" />
            </Trigger.EnterActions>
            <Trigger.ExitActions>
              <BeginStoryboard Storyboard="{StaticResource strbCollapse}" />
            </Trigger.ExitActions>
          </Trigger>

          <Trigger Property="ExpandDirection"
                    Value="Down">
            <Setter TargetName="ExpandSite"
                    Property="DockPanel.Dock"
                    Value="Bottom" />
            <Setter TargetName="HeaderSite"
                    Property="DockPanel.Dock"
                    Value="Top" />
            <Setter TargetName="HeaderSite"
                    Property="Style"
                    Value="{StaticResource ExpanderDownHeaderStyle}" />
          </Trigger>
          <!--
            <Trigger Property="ExpandDirection" Value="Right">
            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right" />
            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
            <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}" />
            </Trigger>
            <Trigger Property="ExpandDirection" Value="Up">
            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top" />
            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
            <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}" />
            </Trigger>
            <Trigger Property="ExpandDirection" Value="Left">
            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left" />
            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
            <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}" />
            </Trigger>
          -->
          <Trigger Property="IsEnabled"
                    Value="false">
            <Setter Property="Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

and the converter:

public class VariableHeightAnimationConverter : IMultiValueConverter {
  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
    return System.Convert.ToDouble(values[0]) * System.Convert.ToDouble(values[1]);
  }

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
    throw new Exception("Not implemented");
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.