Làm cách nào để có được vùng accordion mở rộng (theo chiều dọc) thành nội dung động?

Question

Tôi có một DataGrid chính, sau đó điều khiển accordion bên dưới nó. Trong một trong các mục accordion, tôi có một datagrid khác liên kết với mục được chọn của datagrid đầu tiên. Đơn giản XAML là:

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

Tôi có sở hữu của lưới điện thứ hai thiết lập để "Stretch" để nó kéo dài kích thước bộ sưu tập như khác nhau đang bị ràng buộc để nó VerticalAlignment, nhưng vấn đề là nó chỉ kéo dài trong vòng kích thước AccordionItem vì vậy nếu tôi chọn một mục mới trong lưới đầu tiên có nhiều "Trẻ em" thì tôi phải cuộn lưới thứ hai vì AccordionItem không thay đổi.

Khu vực AccordionItem sẽ chỉ thay đổi khi tôi ngưng tụ và mở rộng lại. Đặt VerticalContentAlignment thành "Stretch" cho mục accordion không hoạt động. Tôi đoán bởi vì nó chỉ kích hoạt điều này khi lần đầu tiên mở rộng.

Có ai biết điều gì khác tôi có thể thử hoặc nếu tôi thiếu thứ gì đó. Tôi muốn gắn bó với giải pháp xaml vì vậy tôi có thể ở lại MVVM thân thiện, nhưng vui mừng khi nghe tất cả mọi thứ.

Answer 1

Lý do mà các AccordionItem không thay đổi kích thước đúng là bởi vì có một lỗi trong một bộ phận kiểm soát của nó - ExpandableContentControl. Vấn đề được mô tả here.

Tôi nghĩ rằng bạn có thể sửa mã nguồn của nó hoặc, dễ dàng hơn, thay thế điều khiển này từ kiểu mặc định của nó bằng kiểu thông thường ContentControl. Tôi đã bao gồm một phong cách ở đây với một bình thường ContentControl và thử nghiệm nó trong mã mà @JohnNicholas cung cấp, và nó hoạt động.

<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. Nếu bạn muốn tạo hiệu ứng mở rộng/thu gọn, bạn chỉ có thể xác định hoạt ảnh của riêng mình ở các trạng thái trực quan AccordionItem 's Collapsed và Expanded.

Nó thực sự là một câu trả lời muộn và hy vọng nó có thể được giúp đỡ bất kỳ. :)

Answer 2

mã này sẽ trình bày sự cố

Hiệp định trong phụ thuộc phụ sẽ không mở rộng khi bạn mở rộng lần đầu tiên. Tuy nhiên, nếu bạn thu gọn cha mẹ của nó và reaxpand nó sẽ hiển thị. Alternativley thay đổi kích thước cửa sổ trình duyệt và nó cũng sẽ thay đổi kích thước mọi thứ để hiển thị nó.

ví dụ này hơi bị giả tạo nhưng thường tôi hiển thị kiểm soát phụ cũng có một accordino để khắc phục sự cố này. Ngoài ra còn có vấn đề khi bạn quấn everythign trong một scrollviewer Nhưng đây có lẽ là liên quan đến đầu tiên.

<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

Tôi đã gặp sự cố tương tự từ lâu rồi, tôi nghĩ đây là những gì tôi đã làm. Về cơ bản trong sự kiện thay đổi kích thước của datagrid bên trong, chúng tôi reinvoke vượt qua đo lường của accordion.

Trong lưới dữ liệu bên trong, hãy đính kèm sự kiện thay đổi kích thước như vậy.

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