扩展器动画在高度上工作但不在横向上工作

时间：2014-07-01 20:35:52

标签： wpf xaml expander

在here的基础上，我制作了一个动画扩展器......但是当ExpandDirection为左或右时，它不起作用。它适用于Up和Down。

<Style x:Key="MyExpander" TargetType="{x:Type Expander}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <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="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true">
                    <DockPanel>
                        <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <StackPanel x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom">
                            <StackPanel.Tag>
                                <sys:Double>0.0</sys:Double>
                            </StackPanel.Tag>
                            <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" ContentSource="Content" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </StackPanel>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="true">
                        <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView" Storyboard.TargetProperty="Tag" To="1" Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView" Storyboard.TargetProperty="Tag" To="0" Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </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}"/>
                        <Setter Property="Height" TargetName="ExpanderContentScrollView">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource multiplyConverter}">
                                    <Binding Path="ActualHeight" ElementName="ExpandSite" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                    </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}"/>
                        <Setter Property="Width" TargetName="ExpanderContentScrollView">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource multiplyConverter}">
                                    <Binding Path="ActualWidth" ElementName="ExpandSite" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                    </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}"/>
                        <Setter Property="Height" TargetName="ExpanderContentScrollView">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource multiplyConverter}">
                                    <Binding Path="ActualHeight" ElementName="ExpandSite" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                    </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}"/>
                        <Setter Property="Width" TargetName="ExpanderContentScrollView">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource multiplyConverter}">
                                    <Binding Path="ActualWidth" ElementName="ExpandSite" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

MultiplyConverter：

public class MultiplyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double result = 1.0;
        for (int i = 0; i < values.Length; i++)
        {
            if (values[i] is double)
                result *= (double)values[i];
        }

        return result;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

我用于测试的网格（前4个是样式，4个是默认的）：

<StackPanel>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0">
            <Expander ExpandDirection="Down" Style="{DynamicResource MyExpander}">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="0" Grid.Column="1">
            <Expander ExpandDirection="Up" Style="{DynamicResource MyExpander}">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="0">
            <Expander ExpandDirection="Left" Style="{DynamicResource MyExpander}">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="1">
            <Expander ExpandDirection="Right" Style="{DynamicResource MyExpander}">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0">
            <Expander ExpandDirection="Down">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="0" Grid.Column="1">
            <Expander ExpandDirection="Up">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="0">
            <Expander ExpandDirection="Left">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="1">
            <Expander ExpandDirection="Right">
                <StackPanel>
                    <TextBox Background="Red"/>
                    <TextBox Background="Green"/>
                    <TextBox Background="Blue"/>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>
</StackPanel>

我发现如果我在左右触发器中使用Height和ActualHeight，就像在向上和向下触发器中一样，它确实有效，但是（正如预期的那样），它们在高度上扩展。所以，我不认为问题出在左右两侧的样式上，而是与它们的宽度有关。

1 个答案:

答案 0 :(得分：1)

在您的controltemplate中，stackpanel的默认方向是垂直的。

<ControlTemplate TargetType="{x:Type Expander}">
       ....

        <StackPanel x:Name="ExpanderContentScrollView">
            <StackPanel.Tag>
               <sys:Double>0.0</sys:Double>
            </StackPanel.Tag>
        <ContentPresenter x:Name="ExpandSite" Width="300" ContentSource="Content" Focusable="false" HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" VerticalAlignment="Stretch"/>
       </StackPanel>
       ....

</ControlTemplate>

添加方向<Setter Property="Orientation" Value="Horizontal" TargetName="ExpanderContentScrollView"/>和<ContentPresenter x:Name="ExpandSite" Width="300"/>并删除DockPanel.Dock =＆＃34; Bottom＆＃34> stackpanel和contentpresenter的属性在这里工作。

 <Trigger Property="ExpandDirection" Value="Right">
 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
 <Setter Property="Orientation" Value="Horizontal" TargetName="ExpanderContentScrollView"/>
 <Setter Property="Width" TargetName="ExpanderContentScrollView">
   ......
 </Setter>
 </Trigger>

 <Trigger Property="ExpandDirection" Value="Left">
 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>
 <Setter Property="FlowDirection" TargetName="ExpanderContentScrollView" Value="LeftToRight"/>
 <Setter Property="Orientation" Value="Horizontal" TargetName="ExpanderContentScrollView"/>
 <Setter Property="Width" TargetName="ExpanderContentScrollView">
  ...
 </Setter>
 </Trigger>

简而言之，您需要根据扩展器ExpandDirection设置stackpnael方向。

相关问题
最新问题