locked
Why expander doesnot push the control below it. RRS feed

  • Question

  • Hi,

    I have a usercontrol with a Expander control(which has control below  it) and an Tab Comtol.

    In the run time when i expand the expander control,it doesnot push the control below it,and the expander ovverlaps the control.

    How to make the expander push the control below it when expanding.

    This is the code.

    <UserControl x:Class="WpfApplication.UserControl3"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d"

    d:DesignHeight="320" d:DesignWidth="236">

    <Grid Height="281" Width="222">

    <Grid.RowDefinitions>

    <RowDefinition Height="40*" />

    <RowDefinition Height="101*" />

    </Grid.RowDefinitions>

    <Expander Header="Print Settings" Grid.Row="1" Margin="0,47,0,60" Grid.RowSpan="3" UseLayoutRounding="False" IsExpanded="False" ExpandDirection="Down">

    <Grid Height="101" Width="217">

    <Grid.RowDefinitions>

    <RowDefinition/>

    <RowDefinition/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

    <ColumnDefinition />

    <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid Grid.ColumnSpan="2" Margin="0,0,0,21" Grid.RowSpan="2">

    <Grid.RowDefinitions>

    <RowDefinition/>

    <RowDefinition/>

    <RowDefinition/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="89*" />

    <ColumnDefinition Width="131*" />

    </Grid.ColumnDefinitions>

    <Label HorizontalAlignment="Left" VerticalAlignment="Center" Content="Printer" Height="26" Margin="0,6,0,8" Width="84" />

    <ComboBox HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="8,-1,0,2" Width="117" VerticalAlignment="Center" Height="26" Grid.Column="1">

    <ComboBoxItem Height="24" Content="3M 8700 DICO" IsSelected="True"/>

    <ComboBoxItem Content="3M 8600 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>

    <ComboBoxItem Content="3M 8500 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>

    </ComboBox>

    <Label Content="Medium" d:LayoutOverrides="Width, Height" HorizontalAlignment="Left" VerticalAlignment="Center" Height="25" Width="89" Grid.Row="1" />

    <ComboBox ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Right" Width="113" Grid.Row="1" Margin="0,6,6,0" Grid.Column="1">

    <ComboBoxItem Height="24" Content="14x17B G8" IsSelected="True"/>

    <ComboBoxItem Content="20x30A G8" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>

    <ComboBoxItem Content="14x17B G7" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>

    </ComboBox>

    <Label Content="Copies" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="26" Width="84" />

    </Grid>

    <CheckBox HorizontalAlignment="Left" VerticalAlignment="Center" Content="Anonymize" Grid.Row="1" Margin="2,34,0,1"></CheckBox>

    <Button Grid.Row="1" Grid.Column="1" MaxWidth="35" MaxHeight="35" Margin="37,18,37,-2">

    <Image/>

    </Button>

    </Grid>

    </Expander>

    <TabControl Name="PatientDataTabs" IsSynchronizedWithCurrentItem="True" Grid.Row="3" Margin="0,16,0,-16">

    <TabItem Name="PatientSeriesTab" Header="Section" IsSelected="True">

    </TabItem>

    </TabControl>

    </Grid>

    </UserControl>

    Please provide solution for this.

    Regards

    Vinutha

    Tuesday, August 9, 2011 11:33 AM

Answers

  • Hi Vinutha,

    In addition to the above suggestions, I think a DockPanel would work great here.

    Generally, the layout is like this:

        <DockPanel>
          <Expander DockPanel.Dock="Top"/>
          <TabControl/>
        </DockPanel>
    

    If you still have any questions or concerns about this issue, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Thursday, August 11, 2011 8:47 AM
  • Hi,

     

    You placed both Expander and Tab Control in a grid with a pre defined height.

    Try using a stack panel, which will recalculate the expander's header and layout the items as you intnded.

    something like:

            <StackPanel>
                <Expander Header="Print Settings" Grid.Row="0" Margin="0,47,0,60" Grid.RowSpan="3" UseLayoutRounding="False" IsExpanded="False" ExpandDirection="Down">
                    <Grid Height="101" Width="217">

                    </Grid>
                </Expander>
                <TabControl Name="PatientDataTabs" IsSynchronizedWithCurrentItem="True" Grid.Row="1" Margin="0,16,0,-16">
                    <TabItem Name="PatientSeriesTab" Header="Section" IsSelected="True">
                    </TabItem>
                </TabControl>
            </StackPanel>

    Hope that helps.

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Tuesday, August 9, 2011 11:48 AM
  • Hello,

    Check this code:

    <Grid Width="222">
    
    <Grid.RowDefinitions>
    
    <RowDefinition Height="Auto" />
    
    <RowDefinition Height="Auto" />
    
    </Grid.RowDefinitions>
    
    <Expander Header="Print Settings" Grid.Row="0" IsExpanded="False" ExpandDirection="Down">
    
    <Grid>
    
    <Grid.RowDefinitions>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
    
    <ColumnDefinition />
    
    <ColumnDefinition />
    
    </Grid.ColumnDefinitions>
    
    <Grid Grid.ColumnSpan="2" Margin="0,0,0,2" Grid.RowSpan="2">
    
    <Grid.RowDefinitions>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
    
    <ColumnDefinition Width="89*" />
    
    <ColumnDefinition Width="131*" />
    
    </Grid.ColumnDefinitions>
    
    <Label HorizontalAlignment="Left" VerticalAlignment="Center" Content="Printer" Height="26" Margin="0,6,0,8" Width="84" />
    
    <ComboBox HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="8,-1,0,2" Width="117" VerticalAlignment="Center" Height="26" Grid.Column="1">
    
    <ComboBoxItem Height="24" Content="3M 8700 DICO" IsSelected="True"/>
    
    <ComboBoxItem Content="3M 8600 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    <ComboBoxItem Content="3M 8500 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    </ComboBox>
    
    <Label Content="Medium" HorizontalAlignment="Left" VerticalAlignment="Center" Height="25" Width="89" Grid.Row="1" />
    
    <ComboBox ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Right" Width="113" Grid.Row="1" Margin="0,6,6,0" Grid.Column="1">
    
    <ComboBoxItem Height="24" Content="14x17B G8" IsSelected="True"/>
    
    <ComboBoxItem Content="20x30A G8" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    <ComboBoxItem Content="14x17B G7" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    </ComboBox>
    
    <Label Content="Copies" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="26" Width="84" />
    
    </Grid>
    
    <CheckBox HorizontalAlignment="Left" VerticalAlignment="Center" Content="Anonymize" Grid.Row="1" Margin="2,34,0,1"></CheckBox>
    
    <Button Grid.Row="1" Grid.Column="1" MaxWidth="35" MaxHeight="35" Margin="37,18,37,-2">
    
    <Image/>
    
    </Button>
    
    </Grid>
    
    </Expander>
    
    <TabControl Name="PatientDataTabs" IsSynchronizedWithCurrentItem="True" Grid.Row="1" >
    
    <TabItem Name="PatientSeriesTab" Header="Section" IsSelected="True">
    
    </TabItem>
    
    </TabControl>
    
    </Grid>
    

    WPF has a powerful and flexible layout system. When you are arranging the controls you should avoid the using of Margin, Width and Height.
    Also, remind that the grid's columns index are zero-based index. So the first column is "0" the second one is "1" etc.

    Good Luck.

     

     

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Tuesday, August 9, 2011 11:59 AM

All replies

  • Hi,

     

    You placed both Expander and Tab Control in a grid with a pre defined height.

    Try using a stack panel, which will recalculate the expander's header and layout the items as you intnded.

    something like:

            <StackPanel>
                <Expander Header="Print Settings" Grid.Row="0" Margin="0,47,0,60" Grid.RowSpan="3" UseLayoutRounding="False" IsExpanded="False" ExpandDirection="Down">
                    <Grid Height="101" Width="217">

                    </Grid>
                </Expander>
                <TabControl Name="PatientDataTabs" IsSynchronizedWithCurrentItem="True" Grid.Row="1" Margin="0,16,0,-16">
                    <TabItem Name="PatientSeriesTab" Header="Section" IsSelected="True">
                    </TabItem>
                </TabControl>
            </StackPanel>

    Hope that helps.

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Tuesday, August 9, 2011 11:48 AM
  • Hello,

    Check this code:

    <Grid Width="222">
    
    <Grid.RowDefinitions>
    
    <RowDefinition Height="Auto" />
    
    <RowDefinition Height="Auto" />
    
    </Grid.RowDefinitions>
    
    <Expander Header="Print Settings" Grid.Row="0" IsExpanded="False" ExpandDirection="Down">
    
    <Grid>
    
    <Grid.RowDefinitions>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
    
    <ColumnDefinition />
    
    <ColumnDefinition />
    
    </Grid.ColumnDefinitions>
    
    <Grid Grid.ColumnSpan="2" Margin="0,0,0,2" Grid.RowSpan="2">
    
    <Grid.RowDefinitions>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    <RowDefinition/>
    
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
    
    <ColumnDefinition Width="89*" />
    
    <ColumnDefinition Width="131*" />
    
    </Grid.ColumnDefinitions>
    
    <Label HorizontalAlignment="Left" VerticalAlignment="Center" Content="Printer" Height="26" Margin="0,6,0,8" Width="84" />
    
    <ComboBox HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="8,-1,0,2" Width="117" VerticalAlignment="Center" Height="26" Grid.Column="1">
    
    <ComboBoxItem Height="24" Content="3M 8700 DICO" IsSelected="True"/>
    
    <ComboBoxItem Content="3M 8600 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    <ComboBoxItem Content="3M 8500 DICO" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    </ComboBox>
    
    <Label Content="Medium" HorizontalAlignment="Left" VerticalAlignment="Center" Height="25" Width="89" Grid.Row="1" />
    
    <ComboBox ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Right" Width="113" Grid.Row="1" Margin="0,6,6,0" Grid.Column="1">
    
    <ComboBoxItem Height="24" Content="14x17B G8" IsSelected="True"/>
    
    <ComboBoxItem Content="20x30A G8" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    <ComboBoxItem Content="14x17B G7" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="24"/>
    
    </ComboBox>
    
    <Label Content="Copies" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="26" Width="84" />
    
    </Grid>
    
    <CheckBox HorizontalAlignment="Left" VerticalAlignment="Center" Content="Anonymize" Grid.Row="1" Margin="2,34,0,1"></CheckBox>
    
    <Button Grid.Row="1" Grid.Column="1" MaxWidth="35" MaxHeight="35" Margin="37,18,37,-2">
    
    <Image/>
    
    </Button>
    
    </Grid>
    
    </Expander>
    
    <TabControl Name="PatientDataTabs" IsSynchronizedWithCurrentItem="True" Grid.Row="1" >
    
    <TabItem Name="PatientSeriesTab" Header="Section" IsSelected="True">
    
    </TabItem>
    
    </TabControl>
    
    </Grid>
    

    WPF has a powerful and flexible layout system. When you are arranging the controls you should avoid the using of Margin, Width and Height.
    Also, remind that the grid's columns index are zero-based index. So the first column is "0" the second one is "1" etc.

    Good Luck.

     

     

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Tuesday, August 9, 2011 11:59 AM
  • Hi Vinutha,

    In addition to the above suggestions, I think a DockPanel would work great here.

    Generally, the layout is like this:

        <DockPanel>
          <Expander DockPanel.Dock="Top"/>
          <TabControl/>
        </DockPanel>
    

    If you still have any questions or concerns about this issue, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Tuesday, August 16, 2011 3:42 AM
    Thursday, August 11, 2011 8:47 AM