I have a window filled with a DockPanel containing 3 elements, a MenuBar docked at the top, a StatusBar docked at the bottom, and a TabControl filling the body.
At least I would like TabControl to fill the body. In the visual design, TabControl and StatusBar are laid out side by side, not top and bottom. When I launch the application, the TabControl expands to populate the DockPanel below the MenuBar, and the StatusBar disappears. (I assume that it is repelled from the visible canvas of the parent window.)
I tried to set the vertical and horizontal alignment for this recommendation . I tried setting ZIndex to a StatusBar. I tried using the stack panel (both docked inside the DockPanel and replacing the DockPanel). All to no avail: - (
Below is the XAML snippet that I use to render my DockPanel. Any suggestions on what I'm doing wrong? Is there a better way to do this than using a DockPanel?
<DockPanel> <Menu Name="_menu" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" DockPanel.Dock="Top"> <MenuItem Header="_User Maintenance"> </MenuItem> </Menu> <TabControl x:Name="_panel" ItemsSource="{Binding Path=AllTabs}" Margin="0,0,0,0" Visibility="{Binding Path=Visibility}" DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > </TabControl> <StatusBar Name="_statusBar" DockPanel.Dock="Bottom" Margin="0,0,0,0" VerticalAlignment="Bottom"> <StatusBar.ItemsPanel> <ItemsPanelTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="26"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> </Grid> </ItemsPanelTemplate> </StatusBar.ItemsPanel> <StatusBarItem Grid.Column="0" Grid.Row="0"> <ProgressBar Name="_progressBar" Height="20" IsIndeterminate="True" Margin="4,0,4,0" VerticalAlignment="Top" Width="600"/> </StatusBarItem> </StatusBar> </DockPanel>
Edit:
By adding DockPanel.Dock = "Up" to the TabControl along with HorizontalAlignment and VerticalAlignment = "Stretch", I managed to get TabControl to stack over the StatusBar, and not next to it in the visual designer. Now the StatusBar only disappears at runtime of some of my TabItems.
My TabControl is a data binding to the ViewModel that provides a list of UserControls. Each UserControl contains its own DataGrid data (and usually several other controls). In those tabs for which the DataGrid displays only a few rows, TabControl and TabItem are stretched to contain the UserGrid, leaving the StatusBar visible at the bottom of the page. On those tabs where the DataGrid shows many rows, the TabControl is stretched to fill the window, somehow hiding the StatusBar.
In case this helps, here is my definition of a DataGrid:
<DataGrid Name="_customerGrid" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" AutoGenerateColumns="False" CanUserSortColumns="True" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" HorizontalAlignment="Left" ItemsSource="{Binding Path=AllCustomers}" RowDetailsVisibilityMode="VisibleWhenSelected" RowStyle="{StaticResource DataGridRowStyle}" SelectionUnit="FullRow" VerticalAlignment="Top">
Thanks!