समूह को संकुचित करें/विस्तृत करें

Question

मेरे पास निम्न XAML है, जिसमें तीन समूह बॉक्स स्टैक्ड हैं। उन समूह बॉक्स के शीर्षलेख में चेकबॉक्स हैं।

मैं क्या हासिल करना चाहता हूं: जब मैं एक बॉक्स को चेक/अनचेक करता हूं, तो मैं एक चिकनी एनीमेशन के साथ संबंधित ग्रुपबॉक्स धीरे-धीरे विस्तार/पतन करना चाहता हूं।

मैं इसे मिश्रण 4 में कोशिश कर रहा हूं लेकिन काफी नौसिखिया हूं। इसे कैसे प्राप्त किया जाए इस पर कोई मदद? विशेष रूप से, क्या एक्सएएमएल में एनीमेशन स्वयं निहित हो सकता है?

अद्यतन: This seems to come close, लेकिन मैं काफी यह

<UserControl 
    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" 
    x:Class="WpfControlLibrary1.MainControl" 
    x:Name="MultiVol"> 
     <StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch"> 
      <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> 
       <GroupBox.Header> 
        <WrapPanel> 
        <CheckBox IsChecked="True" VerticalAlignment="Center" /> 
        <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
        </WrapPanel> 
       </GroupBox.Header> 
       <UniformGrid Columns="2"> 
        <Label Content="Spots"></Label> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Hist. references" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Tenors" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 

       </UniformGrid> 
      </GroupBox> 
      <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> 
       <GroupBox.Header> 
        <WrapPanel> 
        <CheckBox IsChecked="True" VerticalAlignment="Center" /> 
        <Label Content="Skew" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
        </WrapPanel> 
       </GroupBox.Header> 
       <UniformGrid Columns="2"> 
        <Label Content="Spot Intervals"></Label> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Hist. references" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Tenors" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Compute 'Power'" /> 
        <CheckBox IsChecked="False" VerticalAlignment="Center"/> 
       </UniformGrid> 
      </GroupBox> 
      <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> 
       <GroupBox.Header> 
        <WrapPanel> 
        <CheckBox IsChecked="True" VerticalAlignment="Center" /> 
        <Label Content="Term structure" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
        </WrapPanel> 
       </GroupBox.Header> 
       <UniformGrid Columns="2"> 
        <Label Content="Spots" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
        <Label Content="Tenors" /> 
        <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
       </UniformGrid> 
      </GroupBox> 
     </StackPanel> 
</UserControl> 

Answer 1

बस अपने सरल कोड में पहले समूह बॉक्स संपादित:

<GroupBox Margin="8,0" BorderBrush="#FF88B1D8" Height="150"> 
     <GroupBox.Resources> 
      <Style TargetType="GroupBox"> 
       <Style.Triggers> 
        <EventTrigger RoutedEvent="CheckBox.Unchecked"> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="CheckBox.Checked"> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </Style.Triggers> 
      </Style> 
     </GroupBox.Resources> 
     <GroupBox.Header> 
      <WrapPanel> 
       <CheckBox IsChecked="True" VerticalAlignment="Center" /> 
       <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> 
      </WrapPanel> 
     </GroupBox.Header> 
     <UniformGrid Columns="2"> 
      <Label Content="Spots"></Label> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Hist. references" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Tenors" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 

     </UniformGrid> 
    </GroupBox> 

आप एक ही समूह बॉक्स पर इस के लिए आप इस कोड के अंदर शैली तत्व बन सकता था चाहते हैं

<GroupBox.Resources> 
    <!--Style Inside HEre--> 
</GroupBox.Resources> 

को इसे एक समूह बॉक्स पर लागू करें।

एक और सुझाव ढेर पैनल के अंदर एक शैली बनाया है और उसमें एक महत्वपूर्ण जोड़ने है:

<GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}"> 
     <GroupBox.Header> 
      <WrapPanel> 
       <CheckBox IsChecked="True" VerticalAlignment="Center" /> 
       <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> 
      </WrapPanel> 
     </GroupBox.Header> 
     <Border BorderBrush="Black" BorderThickness="2"> 
     <UniformGrid Columns="2"> 
      <Label Content="Spots"></Label> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Hist. references" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Tenors" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
     </UniformGrid> 
     </Border> 
    </GroupBox> 

इस दृष्टिकोण अधिक हो जाएगा:

<StackPanel.Resources> 
     <Style TargetType="GroupBox" x:Key="groupBoxStyle"> 
      <Style.Triggers> 
       <EventTrigger RoutedEvent="CheckBox.Unchecked"> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" /> 
          </Storyboard> 
         </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="CheckBox.Checked"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Style.Triggers> 
     </Style> 
    </StackPanel.Resources> 

तो groupbox की शैली के लिए यह संलग्न उपयोगी जब आप भविष्य में इसे एकाधिक समूहबॉक्स में लागू करना चाहते हैं

मामले में आप चेकबॉक्स और अनचेक ईवेंट को संभालना चाहते हैं तो आप इस कोड का उपयोग कर सकते हैं

<GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}" CheckBox.Checked="CheckBox_Checked" CheckBox.Unchecked="CheckBox_Unchecked"> 
     <GroupBox.Header> 
      <WrapPanel> 
       <CheckBox x:Name="chkHeader" IsChecked="True" VerticalAlignment="Center" /> 
       <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> 
      </WrapPanel> 
     </GroupBox.Header> 
     <Border BorderBrush="Black" BorderThickness="2"> 
     <UniformGrid Columns="2"> 
      <Label Content="Spots"></Label> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Hist. references" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
      <Label Content="Tenors" /> 
      <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> 
     </UniformGrid> 
     </Border> 
    </GroupBox> 

और पीछे कोड में इस जोड़ें:

private void CheckBox_Checked(object sender, RoutedEventArgs e) 
    { 
     if ((e.OriginalSource as CheckBox).Name != "chkHeader") 
     { 
      e.Handled = true; 
     } 
    } 

    private void CheckBox_Unchecked(object sender, RoutedEventArgs e) 
    { 
     if ((e.OriginalSource as CheckBox).Name != "chkHeader") 
     { 
      e.Handled = true; 
     } 
    } 

Answer 2

आप शायद इस के लिए एक Expander और animate that (कि वे क्या कर रहे हैं है) का उपयोग करना चाहिए नहीं मिलता है।

यदि आपको re-template उन्हें पसंद नहीं है, तो आप उन्हें समूह-बॉक्स की तरह दिख सकते हैं।