Stack Panel Issue

[Abhishek Chauhan]

Hi ,

In my .xaml page I have to show some controls on a click of a button and again make them invisible at click of an another button.

Currently I am using stack panel and collapsing or expanding the panel on click of the button but the problem is that that controls out side the stack panel do not move up and there is blank space where the hidden controls are.

My code is as shown below-

 

<Grid x:Name="LayoutRoot" Background="White">

      <StackPanel Margin="8,8,8,0" VerticalAlignment="Top" Orientation="Vertical">

            <StackPanel x:Name="stkpanel1" Margin="8,8,8,0" Orientation="Horizontal">

            <telerikInput:RadComboBox x:Name="radcmbFilterCondition" Margin="10,5,0,0" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

            <telerikInput:RadComboBox x:Name="radcmbFilterSign" Margin="5,5,0,0" Width="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <TextBox x:Name="txtFilterCondtion" Margin="5,5,0,0" VerticalAlignment="Top" Text="" TextWrapping="Wrap" Width="200"/>

        <telerikInput:RadComboBox x:Name="radcmbFilterChoice" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="80"/>

        <Button x:Name="btnIncerment" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="20" Height="20" Content="+" Background="#FF009900" FontWeight="Bold" FontFamily="Verdana" Click="btnIncerment_Click"/>

            </StackPanel>

            <StackPanel x:Name="stkpanel2" Margin="8,8,8,0" Orientation="Horizontal" Visibility="Collapsed">

            <telerikInput:RadComboBox x:Name="radcmbFilterCondition2" Margin="10,5,0,0" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

            <telerikInput:RadComboBox x:Name="radcmbFilterSign2" Margin="5,5,0,0" Width="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <TextBox x:Name="txtFilterCondtion2" Margin="5,5,0,0" VerticalAlignment="Top" Text="" TextWrapping="Wrap" Width="200"/>

        <telerikInput:RadComboBox x:Name="radcmbFilterChoice2" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="80"/>

        <Button x:Name="btnIncerment2" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="20" Height="20" Content="+" Background="#FF009900" FontWeight="Bold" FontFamily="Verdana" Click="btnIncerment2_Click"/>

            <Button x:Name="btnDecerment2" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="20" Height="20" Content="-" Background="#FF009900" FontWeight="Bold" FontFamily="Verdana" Click="btnDecerment2_Click"/>

            </StackPanel>

            <StackPanel x:Name="stkpanel3" Margin="8,8,8,0" Orientation="Horizontal" Visibility="Collapsed">

            <telerikInput:RadComboBox x:Name="radcmbFilterCondition3" Margin="10,5,0,0" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

            <telerikInput:RadComboBox x:Name="radcmbFilterSign3" Margin="5,5,0,0" Width="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <TextBox x:Name="txtFilterCondtion3" Margin="5,5,0,0" VerticalAlignment="Top" Text="" TextWrapping="Wrap" Width="200"/>

        <telerikInput:RadComboBox x:Name="radcmbFilterChoice3" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="80"/>

            <Button x:Name="btnDecerment3" HorizontalAlignment="Right" Margin="5,5,0,0" VerticalAlignment="Top" Width="20" Height="20" Content="-" Background="#FF009900" FontWeight="Bold" FontFamily="Verdana" Click="btnDecerment3_Click"/>

            </StackPanel>

            </StackPanel>

      <Button HorizontalAlignment="Left" Margin="8,134,0,0" VerticalAlignment="Top" Width="75" Content="Add"/>

    </Grid>

 

If anyone has already faced this issue please suggest the solution for the same.

Thanks in Advance,
Abhishek Chauhan

[Hristo Borisov]

Hi Abhishek Chauhan,

You have two options. If you define RowDefinition on your main grid and associate the RowDefinition to "*" or auto and place your stackpanel inside this row you won't experience this problem. This is not a good idea to use margins to define the layout of a page since it's not flexible. Other option is to use our RadExpander control in which you can place your StackPanel as a content and expand and collapse the content as required. To learn more about RowDefinition visit this website.

Thank you for contacting us and I hope this will resolve your issue.

All the best,
Hristo Borisov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.