Make NavigationPane stretch to fill available space

Jan 17, 2013 at 4:55 PM

Hi 

I have been using this control and have a problem.

I have the following code

<Controls:NavigationPaneExpander x:Name="Navigation" VerticalAlignment="Stretch" IsMinimized="True" MinWidth="180" 
             Focusable="True" VerticalContentAlignment="Stretch">
            <Controls:NavigationPaneItem x:Name="Tabs" Header="Navigation" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid>
                    <my:TabControl x:Name="TabContainer" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
                        <my:TabItem x:Name="SitesTabItem" Header="Directory" VerticalContentAlignment="Stretch">
                            <Grid>
                                <Controls:NavigationPane VerticalAlignment="Stretch" IsDefaultConfigureMenuEnabled="False" AllowDrop="True" IsMinimizeButtonVisible="False" LargeItems="6">
                                    <Controls:NavigationPane.BarTitle>
                                        <TextBlock FontWeight="Bold" Text="Testing"/>
                                    </Controls:NavigationPane.BarTitle>
                                    <Controls:NavigationPaneItem x:Name="ItemList" Header="Items" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                                        <Views:MyListView/>
                                    </Controls:NavigationPaneItem>
				    <Controls:NavigationPaneItem x:Name="ItemList2" Header="Items2" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                                        <Views:MyListView2/>
                                    </Controls:NavigationPaneItem>
                                </Controls:NavigationPane>
                               </Grid>
                        </my:TabItem>
                        <my:TabItem>                        
                            <my:TabItem.Header>
                                <TextBlock FontSize="10" Text="Tab2"/>
                            </my:TabItem.Header>
                        </my:TabItem>
                        <!--<my:TabItem>
                            <my:TabItem.Header>
                                <TextBlock FontSize="10" Text="Tab3"/>
                            </my:TabItem.Header>
                        </my:TabItem>-->                       
                    </my:TabControl>
                </Grid>
            </Controls:NavigationPaneItem>
        </Controls:NavigationPaneExpander>

I want the content in MyListView (a datagrid) inside the NavigationPane which is in the TabItem to stretch to fill the available space, so that I end up with the buttons for switching between navigation items resting at the bottom of the screen, and the remainder of the space filled with MyListView.

 

Is tried setting the VerticalContentAlignment and VerticalAlignment to Stretch but it doesn't appear to have any effect.

This is really urgent so I would appreciate any suggestions.

 

Thanks

Chris

 

Coordinator
Jan 18, 2013 at 9:34 AM
Edited Jan 18, 2013 at 9:37 AM

This happens because the various control templates use a StackPanel as a container, wich doesn't allow stretching its elements.

You can easily solve that by replacing those template, and making them use a DockPanel with LastChildFill set to true.
Here is an example:

        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        	<DockPanel IsItemsHost="True" LastChildFill="True"/>
        </ItemsPanelTemplate>
        <Style x:Key="NavigationPaneItemStyle1" TargetType="{x:Type Controls:NavigationPaneItem}">
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="{x:Type Controls:NavigationPaneItem}">
        				<DockPanel Margin="2">
        					<Controls:NavigationPaneSplitter x:Name="navigationPaneSplitter" Margin="0,1,0,0" VerticalAlignment="Top" DockPanel.Dock="Bottom"/>
        					<Grid Margin="4,0" DockPanel.Dock="Top">
        						<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
        					</Grid>
        				</DockPanel>
        				<ControlTemplate.Triggers>
        					<Trigger Property="Controls:NavigationPaneExpander.CanResize" Value="False">
        						<Setter Property="Visibility" TargetName="navigationPaneSplitter" Value="Collapsed"/>
        					</Trigger>
        				</ControlTemplate.Triggers>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
Once you have those in your window resources you only have to set them in the NavigationPaneExpander: <Controls:NavigationPaneExpander ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemContainerStyle="{DynamicResource NavigationPaneItemStyle1}" ...>
Done that the last item in the expander will always be stretched. You may also remove the NavigationPaneSplitter from the style if you are planning to have a single item on the expander.