Come ottenere l'espansione della regione della fisarmonica (verticalmente) su un contenuto dinamico?

Ho un datagrid principale, quindi un controllo di fisarmonica sotto di esso. In uno degli elementi della fisarmonica ho un altro datagrid che si lega all'elemento selezionato del primo datagrid. Semplice XAML è:Come ottenere l'espansione della regione della fisarmonica (verticalmente) su un contenuto dinamico?

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

ho VerticalAlignment proprietà della seconda griglia è impostato su "Stretch" in modo che si estende a diverse dimensioni di raccolta sono legati ad esso, ma il problema è che si estende solo all'interno della dimensione AccordionItem quindi se io selezionare un nuovo elemento nella prima griglia che ha più "Bambini", quindi devo scorrere la seconda griglia perché l'AccordionItem non è cambiato.

La regione di fisarmonica cambierà solo quando si condensa e si espande nuovamente. Impostare VerticalContentAlignment su "Stretch" per l'elemento fisarmonica non funziona. Immagino perché si innesca solo quando espanso prima.

Qualcuno sa cos'altro potrei provare o se mi manca qualcosa. Preferirei restare con la soluzione xaml in modo da poter rimanere amichevole con MVVM, ma felice di sentire tutto.

fonte

2010-09-09 Adam

il mio problema è con le fisarmoniche annidate - ma ho la netta sensazione che il problema sia lo stesso. Ci deve essere una sorta di "evento modificato di dimensioni" ribollito ai controlli dei genitori. Sfortunatamente non so come farlo in silverlight. –

La ragione per cui il AccordionItem non ridimensiona correttamente è perché c'è un bug in una delle sue parti di controllo - ExpandableContentControl. Il problema è descritto here.

Penso che sia possibile risolvere il suo codice sorgente o, più facilmente, sostituire questo controllo dal suo stile predefinito con un normale ContentControl. Ho incluso uno stile qui con un normale ContentControl e testato nel codice fornito da @JohnNicholas, e funziona.

<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. Se si desidera animare l'espansione/compressione, è sufficiente definire la propria animazione negli stati di visualizzazione Collapsed e Expanded.

È davvero una risposta tardiva e spero che possa essere di qualche aiuto. :)

fonte

2011-10-26 11:11:54

Grazie. Anche se non l'ho provato, sembra ragionevole. I miei giorni in argento sono finiti. – Adam

Grazie. Anche se, quando ho sostituito questo stile in uno degli AccordionItems, mostra sempre l'intero contenuto dell'accordionItem mentre gli altri sono ridimensionati dinamicamente, ma ora gli elementi della fisarmonica non riempiono l'intera area della fisarmonica. ci potrebbe essere molto spazio inutilizzato nella fisarmonica e un oggetto scorrevole (che potrebbe essere più grande). – seldary

@seldario, cosa succede se applichi lo stile a tutti i tuoi articoli? –

questo codice dimostrare il problema

La fisarmonica nel sub-sub-fisarmonica non si espanderà la prima volta che espanderlo. Tuttavia, se collassi il suo genitore e riacchipperai, lo mostrerà. Alternativley ridimensiona la finestra del browser e ridimensionerà anche everythign per mostrarlo.

questo esempio è un po 'forzato ma di solito sto mostrando un controllo secondario che ha anche un accordino per ottenere questo problema. Ci sono anche problemi quando si avvolge tutto in un scrollviewer, ma questi sono probabilmente correlati al primo.

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

fonte

2010-11-19 13:24:36

Ho avuto un problema simile molto tempo fa, penso che questo sia quello che ho fatto. Fondamentalmente nell'evento modificato di dimensioni del datagrid interno, reinvochiamo il passaggio di misura della fisarmonica.

Nella griglia di dati interna, allegare l'evento di modifica della dimensione in questo modo.

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

fonte

2011-04-14 22:55:43 Joshscorp

Per me, l'evento interno relativo al datagrid non viene attivato tranne quando la pagina viene caricata inizialmente. – Adam

Come ottenere l'espansione della regione della fisarmonica (verticalmente) su un contenuto dinamico?

risposta

Problemi correlati