1. 首頁
  2. 問答
  3. silverlight：如何使用2堆棧面板的擴展控制？

silverlight：如何使用2堆棧面板的擴展控制？

2011-07-27 31 views
0

我想創建結構如下ilustrated，它應該包含2米疊層板：silverlight：如何使用2堆棧面板的擴展控制？

  • 一個水平（HPanel）
  • 一個垂直（VPanel）

膨脹應該在HPanel的權利，當點擊擴展器時，兩個面板都應該摺疊&反之亦然

HPanel - >擴展
V
P
一個
ň
Ë
升

來源

2011-07-27 mahesh khiste

+0

是您的擴展應該包含的任何內容或應該僅僅是控制兩個面板的曝光率一個切換按鈕？ –

回答

0

要獲得右側的按鈕，你將不得不重新 - 模板擴展器。下面是完整的XAML您需要：

<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>

這將產生類似如下的控制：

enter image description here

如果你能在左側的按鈕住，那麼解決方案變得非常簡單：

<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 produc ES這樣的：

enter image description here

來源

2011-07-27 23:09:50 kbmax

相關問題

 相關問題