Wie bekomme ich Akkordeon-Region, um (vertikal) zu dynamischem Inhalt zu erweitern?

Question

Ich habe ein Haupt-Datagrid, dann ein Akkordeon-Steuerelement darunter. In einem der Akkordeon-Elemente habe ich ein anderes Datagrid, das an das ausgewählte Element des ersten Datagrids bindet. Einfache XAML ist:

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

Ich habe Vertical Eigenschaft des zweiten Gitters auf „Stretch“, so dass es erstreckt sich als unterschiedliche Sammlung Größen an ihn gebunden, aber das Problem ist es nur innerhalb der AccordionItem Größe erstreckt sich so, wenn ich wähle ein neues Element im ersten Gitter, das mehr "Kinder" hat, dann muss ich das zweite Gitter scrollen, weil das AccordionItem nicht geändert wurde.

AccordionItem Region wird nur geändert, wenn ich kondensiere und expandiere es wieder. Das Einstellen von VerticalContentAlignment auf "Stretch" für das Akkordeon-Element funktioniert nicht. Ich schätze, weil es nur beim ersten Expandieren ausgelöst wird.

Weiß jemand was ich sonst noch versuchen könnte oder wenn mir etwas fehlt. Ich würde lieber bei xaml bleiben, damit ich MVVM-freundlich bleiben kann, bin aber froh, alles zu hören.

Answer 1

Der Grund, dass die AccordionItem nicht richtig ist nicht die Größe, weil es einen Fehler in einem seiner Steuerteile ist - ExpandableContentControl. Das Problem wird beschrieben here.

Ich denke, Sie können entweder den Quellcode reparieren oder, einfacher, ersetzen Sie dieses Steuerelement von seinem Standard-Stil mit einem normalen ContentControl. Ich habe hier einen Stil mit einem normalen ContentControl eingefügt und es in dem Code getestet, den @JohnNicholas zur Verfügung gestellt hat, und es funktioniert.

<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. Wenn Sie das Expandieren/Kollabieren animieren möchten, können Sie einfach eine eigene Animation in den AccordionItemCollapsed und Expanded visuellen Zuständen definieren.

Es ist wirklich eine späte Antwort und hoffe, es kann jede Hilfe sein. :)

Answer 2

wird dieser Code das Problem

Das Akkordeon im Harmonika Unter-Unter zeigen nicht erweitern, wenn Sie es zuerst erweitern. Wenn Sie jedoch das Elternelement reduzieren und erneut erweitern, wird es angezeigt. Alternativ ändern Sie die Größe des Browserfensters und es wird auch die Größe jedes einzelnen so geändert, dass es angezeigt wird.

Dieses Beispiel ist ein bisschen künstlich, aber normalerweise zeige ich eine Unterkontrolle, die auch ein accordino hat, um dieses Problem zu bekommen. Es gibt auch Probleme, wenn Sie alles in einem Scrollviewer umbrechen. Aber diese sind wahrscheinlich mit dem ersten verwandt.

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

Answer 3

Ich hatte ein ähnliches Problem vor langer Zeit, ich denke, das ist, was ich getan habe. Im Grunde genommen wiederholen wir im measure pass des Akkordeons das größenveränderte Event des inneren Datagrids.

Fügen Sie das Größenänderungsereignis im inneren Datenraster wie folgt an.

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