डायनामिक सामग्री के विस्तार (लंबवत) को बढ़ाने के लिए accordion क्षेत्र कैसे प्राप्त करें?

Question

मेरे पास एक मुख्य डाटाग्रिड है, फिर इसके नीचे एक accordion नियंत्रण है। एग्रीजन आइटमों में से एक में मेरे पास एक और डाटाग्रिड है जो पहले डाटाग्रिड के चयनित आइटम से जुड़ा हुआ है। सरल 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 आइटम के लिए "खिंचाव" करने के लिए वर्टिकलकंटेंटलाइन सेट करना काम नहीं करता है। मुझे लगता है क्योंकि यह पहली बार विस्तारित होने पर ही इसे ट्रिगर करता है।

क्या कोई जानता है कि मैं और क्या कोशिश कर सकता हूं या अगर मुझे कुछ याद आ रहा है। मैं xaml समाधान के साथ रहना पसंद करूंगा ताकि मैं एमवीवीएम-अनुकूल रह सकूं, लेकिन सबकुछ सुनकर खुश हूं।

Answer 1

कारण यह है कि AccordionItem ठीक से आकार नहीं है क्योंकि वहाँ इसके नियंत्रण भागों में से एक में एक बग है है। इस मुद्दे को here वर्णित किया गया है।

मुझे लगता है कि आप या तो अपने स्रोत कोड को ठीक कर सकते हैं या अधिक आसानी से, इस नियंत्रण को अपनी डिफ़ॉल्ट शैली से सामान्य ContentControl के साथ प्रतिस्थापित कर सकते हैं। मैंने यहां एक सामान्य ContentControl के साथ एक शैली शामिल की है और इसे कोड में परीक्षण किया है जो @ जॉन निचोलस प्रदान किया गया है, और यह काम करता है।

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

पीएस। यदि आप विस्तार/ढहने को एनिमेट करना चाहते हैं तो आप AccordionItem के Collapsed और Expanded दृश्य राज्यों में अपनी खुद की एनीमेशन को परिभाषित कर सकते हैं।

यह वास्तव में देर से उत्तर है और उम्मीद है कि यह किसी भी मदद से हो सकता है। :)

Answer 2

इस कोड को उप उप अकॉर्डियन में समस्या

अकॉर्डियन प्रदर्शित विस्तार नहीं होगा तो उसे पहली बार विस्तार होगा। हालांकि अगर आप अपने माता-पिता को पतन करते हैं और फिर से दिखाएंगे तो यह दिखाएगा। Alternativley ब्राउज़र विंडो का आकार बदलता है और यह इसे दिखाने के लिए हर चीज का आकार बदल देगा।

यह उदाहरण थोड़ा सा योगदान है लेकिन आमतौर पर मैं एक उप नियंत्रण दिखा रहा हूं जिसमें इस समस्या को पाने के लिए एक accordino भी है। जब आप स्क्रॉलव्यूअर में हर चीज़ को लपेटते हैं तो समस्याएं भी होती हैं लेकिन ये शायद पहले से संबंधित हैं।

<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

मुझे बहुत समय पहले एक ही समस्या थी, मुझे लगता है कि मैंने यही किया है। मूल रूप से आकार में आंतरिक डेटाग्रिड की घटना बदल गई, हम accordion के माप पास reinvoke।

आंतरिक डेटा ग्रिड में, आकार परिवर्तन ईवेंट को संलग्न करें। ExpandableContentControl -

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