Stack Panel Issue

2 posts, 0 answers
  1. Abhishek Chauhan
    Abhishek Chauhan avatar
    29 posts
    Member since:
    Sep 2009

    Posted 25 Sep 2009 Link to this post

    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

  2. Hristo Borisov
    Admin
    Hristo Borisov avatar
    298 posts

    Posted 28 Sep 2009 Link to this post

    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.
Back to Top