如何讓手風琴區域（垂直）擴展到動態內容？

我有一個主要的數據網格，然後在它下面的一個手風琴控制。在其中一個手風琴項目中，我有另一個數據網格綁定到第一個數據網格的選定項目。簡單的XAML是：如何讓手風琴區域（垂直）擴展到動態內容？

<sdk:DataGrid Name="dgMain" ItemsSource="{Binding SomeSource}" /> 
<toolkit:Accordion> 
    <toolkit:AccordionItem Header="Details"> 
     <sdk:DataGrid ItemsSource="{Binding ElementName=dgMain, Path=SelectedItem.Children}"/> 
    </toolkit:AccordionItem> 
</toolkit:Accordion>

我有第二個網格設置爲「拉伸」，所以它橫跨不同的集合大小必將它的VerticalAlignment屬性，但問題是它只有AccordionItem尺寸範圍內延伸，所以如果我在第一個網格中選擇一個具有更多「兒童」的新項目，那麼我必須滾動第二個網格，因爲AccordionItem沒有改變。

AccordionItem區域只會在我凝結並再次展開時纔會更改。將accordion項目的VerticalContentAlignment設置爲「Stretch」不起作用。我猜是因爲它只是在第一次擴展時纔會觸發它。

有誰知道還有什麼我可以嘗試或如果我失去了一些東西。我寧願堅持使用xaml解決方案，這樣我可以保持MVVM友好，但很高興聽到一切。

來源

2010-09-09 Adam

我的問題是嵌套的手風琴 - 但我得到強烈的感覺問題是一樣的。需要有一些「大小改變的事件」冒泡到家長控制。可悲的是不知道如何在Silverlight中做到這一點。 – 2010-11-19 10:48:46

的AccordionItem不能正常調整的原因是因爲在它的控制部件的一個錯誤 - ExpandableContentControl。該問題描述爲here。

我認爲你可以修正它的源代碼，或者更容易地用普通的ContentControl替換這個控件的默認樣式。我在這裏包含了一個正常的樣式ContentControl，並在@JohnNicholas提供的代碼中對它進行了測試，並且它可以正常工作。

<Style TargetType="toolkit:AccordionItem"> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="BorderBrush" Value="#FFECECEC"/> 
     <Setter Property="Background" Value="White"/> 
     <Setter Property="Margin" Value="0"/> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="HorizontalAlignment" Value="Stretch"/> 
     <Setter Property="VerticalAlignment" Value="Stretch"/> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="VerticalContentAlignment" Value="Top"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="toolkit:AccordionItem"> 
        <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"/> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="ExpansionStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Collapsed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Expanded"> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="LockedStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Locked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="False"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unlocked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="ExpandDirectionStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="ExpandDown"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="ExpandUp"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="ExpandLeft"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="ExpandRight"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpandSite"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd1"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" Padding="{TemplateBinding Padding}"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition x:Name="cd0" Width="Auto"/> 
            <ColumnDefinition x:Name="cd1" Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition x:Name="rd0" Height="Auto"/> 
            <RowDefinition x:Name="rd1" Height="Auto"/> 
           </Grid.RowDefinitions> 
           <toolkit:AccordionButton x:Name="ExpanderButton" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsChecked="{TemplateBinding IsSelected}" Margin="0,0,0,0" Padding="0,0,0,0" Grid.Row="0" Style="{TemplateBinding AccordionButtonStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
           <ContentControl x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="0,0,0,0" Grid.Row="1" Style="{TemplateBinding ExpandableContentControlStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </Grid> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

PS。如果要爲展開/摺疊設置動畫效果，則可以在AccordionItem的Collapsed和Expanded視覺狀態中定義自己的動畫。

這真的是一個遲到的答覆，並希望它可以有任何幫助。 :)

來源

2011-10-26 11:11:54

謝謝。雖然我沒有測試它，但這看起來很合理。我的銀光日子已經結束了。 – Adam 2012-02-13 18:15:11

謝謝。儘管當我在其中一個AccordionItems中替換了這個Style時，它確實總是顯示AccordionItem的全部內容，而其他的則是動態調整大小的，但現在Accordion Items並未填充整個Accordion區域。即手風琴可能有很多未使用的空間，以及一個可滾動的項目（可能更大）。 – seldary 2012-03-12 15:47:04

@seldary，如果將樣式應用於所有物品，會發生什麼情況？ – 2012-03-12 21:29:19

這個代碼將展示問題

手風琴在細分子手風琴當你第一次展開它不會擴大。但是，如果您摺疊其父並重新展開，它將顯示。 Alternativley調整瀏覽器窗口的大小，它也會調整每一個字的大小來顯示它。

這個例子是有點人爲的，但通常我顯示一個子控件，也有一個accordino來解決這個問題。當你在scrollviewer中包裝everythign時也有問題但是這些可能與第一個有關。

<UserControl x:Class="SilverlightApplication1.MainPage" 
    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" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"> 

    <Grid x:Name="LayoutRoot" Background="White"> 
     <toolkit:Accordion HorizontalAlignment="Stretch" Name="accordion1" SelectionMode="ZeroOrOne" > 
      <toolkit:AccordionItem> 
       <toolkit:AccordionItem.Header> 
        <TextBlock Text="Title" /> 
       </toolkit:AccordionItem.Header> 

       <toolkit:AccordionItem.Content> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="auto"/> 
          <RowDefinition Height="auto"/> 
         </Grid.RowDefinitions> 

         <TextBox Grid.Row="0" Height="200" Width="400" /> 
         <toolkit:Accordion Grid.Row="1" HorizontalAlignment="Stretch" Name="subAccordion" SelectionMode="ZeroOrOne" > 
          <toolkit:AccordionItem> 
           <toolkit:AccordionItem.Header> 
            <TextBlock Text="Sub Accordion" /> 
           </toolkit:AccordionItem.Header> 
           <toolkit:AccordionItem.Content> 
            <Grid> 
             <Grid.RowDefinitions> 
              <RowDefinition Height="auto"/> 
              <RowDefinition Height="auto"/> 
             </Grid.RowDefinitions> 

             <TextBox Grid.Row="0" Height="150" Width="400" Text="Sub Accordion" /> 
             <toolkit:Accordion Grid.Row="1" HorizontalAlignment="Stretch" Name="subAccordion2" SelectionMode="ZeroOrOne" > 
              <toolkit:AccordionItem> 
               <toolkit:AccordionItem.Header> 
                <TextBlock Text="Sub sub Accordion" /> 
               </toolkit:AccordionItem.Header> 
               <toolkit:AccordionItem.Content> 
                <TextBox Text="sub sub" Height ="100" /> 
               </toolkit:AccordionItem.Content> 
              </toolkit:AccordionItem> 
             </toolkit:Accordion> 
            </Grid> 

           </toolkit:AccordionItem.Content> 
          </toolkit:AccordionItem> 
         </toolkit:Accordion> 
        </Grid> 


       </toolkit:AccordionItem.Content> 
      </toolkit:AccordionItem> 
     </toolkit:Accordion> 
    </Grid> 
</UserControl>

來源

2010-11-19 13:24:36

我很久以前有過類似的問題，我想這就是我所做的。基本上在內部數據網格的大小改變的事件中，我們重新調用手風琴的度量傳遞。

在內部數據網格中，附加大小更改事件。

private void InnerDataGrid_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e) 
    { 
     this.AccordionName.Measure(new Size()); 
     this.AccordionName.UpdateLayout(); 
    }

來源

2011-04-14 22:55:43 Joshscorp

對我來說，內部的datagrid sizechanged事件不會觸發，除非頁面最初加載。 – Adam 2011-04-18 17:22:40

如何讓手風琴區域（垂直）擴展到動態內容？

回答

相關問題