silverlight: How to use expander control with 2 stack panels?_问答_开发者

I want to create structure as ilustrated below, it should contain 2 stack panels:

one horizontal (HPanel)
one vertical (VPanel)

the expander should be at the right of HPanel , when the expander is clicked both panels should get collapased & vice versa

HPanel ->开发者_开发技巧 Expander

silverlight: How to use expander control with 2 stack panels?

To get the button on the right, you're going to have to re-template the expander. Here is the full xaml you'll need:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
         x:Class="StackOverflowExpander.MainPage"
         mc:Ignorable="d"
         d:DesignHeight="100"
         d:DesignWidth="200">
<UserControl.Resources>


    <Style x:Key="ExpanderBottomRightButtonStyle" TargetType="toolkit:Expander">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:Expander">
                            <Grid Background="Transparent">
                                <Grid.Resources>
                                    <LinearGradientBrush x:Key="ExpanderArrowFill" EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="White" Offset="0"/>
                                        <GradientStop Color="#FFBFBFBF" Offset="0.5"/>
                                        <GradientStop Color="#FF878787" Offset="1"/>
                                    </LinearGradientBrush>
                                    <LinearGradientBrush x:Key="ExpanderArrowHoverFill" EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="#FFF0F8FE" Offset="0"/>
                                        <GradientStop Color="#FFE0F3FE" Offset="0.3"/>
                                        <GradientStop Color="#FF6FA7C5" Offset="1"/>
                                    </LinearGradientBrush>
                                    <LinearGradientBrush x:Key="ExpanderArrowPressedFill" EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="#FFDCF0FA" Offset="0"/>
                                        <GradientStop Color="#FFC5E6F7" Offset="0.2"/>
                                        <GradientStop Color="#FF5690D0" Offset="1"/>
                                    </LinearGradientBrush>
                                    <ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
                                        <Grid Background="Transparent">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CheckStates">
                                                    <VisualStateGroup.Transitions>
                                                        <VisualTransition GeneratedDuration="00:00:00"/>
                                                    </VisualStateGroup.Transitions>
                                                    <VisualState x:Name="Checked">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="Data">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="M 1,4.5 L 4.5,1 L 8,4.5"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unchecked"/>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualStateGroup.Transitions>
                                                        <VisualTransition GeneratedDuration="0"/>
                                                        <VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                                        <VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                                    </VisualStateGroup.Transitions>
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" To="#FF3C7FB1"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Fill)">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderArrowHoverFill}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#222"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ColorAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" To="#FF526C7B"/>
                                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="StrokeThickness" To="1.5"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Fill)">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderArrowPressedFill}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#FF003366"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                    <VisualState x:Name="Focused">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unfocused"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Border Padding="{TemplateBinding Padding}">
                                                <Grid Background="Transparent">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"/>
                                                        <ColumnDefinition Width="19"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
                                                        <Ellipse Fill="{StaticResource ExpanderArrowFill}" Height="19" HorizontalAlignment="Center" x:Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/>
                                                        <Path Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" x:Name="arrow" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/>
                                                    </Grid>
                                                    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="4,0,0,0" x:Name="header" VerticalAlignment="Center"/>
                                                </Grid>
                                            </Border>
                                            <Rectangle IsHitTestVisible="false" x:Name="FocusVisualElement" Stroke="Green" StrokeDashArray="1 2" StrokeThickness="1" Visibility="Collapsed"/>
                                        </Grid>
                                    </ControlTemplate>                                        
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ExpansionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Collapsed"/>
                                        <VisualState x:Name="Expanded">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ExpandDirectionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="ExpandDown">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd1" Storyboard.TargetProperty="Height">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ExpandUp">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Template">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderUpHeaderTemplate}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Row)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ExpandLeft">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Template">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderLeftHeaderTemplate}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Column)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ExpandRight">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Template">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ExpanderLeftHeaderTemplate}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Column)">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" x:Name="rd0"/>
                                            <RowDefinition Height="Auto" x:Name="rd1"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" x:Name="cd0"/>
                                            <ColumnDefinition Width="Auto" x:Name="cd1"/>
                                        </Grid.ColumnDefinitions>
                                        <ToggleButton Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{TemplateBinding IsExpanded}" Margin="1" MinHeight="0" MinWidth="0" x:Name="ExpanderButton" Padding="{TemplateBinding Padding}" Template="{StaticResource ExpanderDownHeaderTemplate}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        <ContentControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ExpandSite" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
                                    </Grid>
                                </Border>
                                <Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
                                <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFA3AEB9"/>
                                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                            <GradientStop Color="#FF718597" Offset="0.375"/>
                                            <GradientStop Color="#FF617584" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot"
      Background="White">

    <toolkit:Expander Style="{StaticResource ExpanderBottomRightButtonStyle}">
        <toolkit:Expander.Header>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Horizontal1  "/>
                <TextBlock Text="Horizontal2  "/>           
            </StackPanel>       
        </toolkit:Expander.Header>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Vertical1"/>  
            <TextBlock Text="Vertical2"/> 
            <TextBlock Text="Vertical3"/>        
        </StackPanel>
    </toolkit:Expander>

</Grid>

This will produce a control that looks like this:

silverlight: How to use expander control with 2 stack panels?

If you can live with the button on the left, then the solution becomes alot easier:

<toolkit:Expander>
        <toolkit:Expander.Header>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Horizontal1  "/>
                <TextBlock Text="Horizontal2  "/>           
            </StackPanel>       
        </toolkit:Expander.Header>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Vertical1"/>  
            <TextBlock Text="Vertical2"/> 
            <TextBlock Text="Vertical3"/>        
        </StackPanel>
    </toolkit:Expander>

which produces this:

silverlight: How to use expander control with 2 stack panels?