XAML- how to set the height of a <TabControl> to a fixed value?

Question

I have the following XAML markup, which I am using to display the GUI of my C# application:

<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="ColumnDefinition0"/>
        <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
        <RowDefinition x:Name="RowDefinition2" Height="0.05*"/>
        <RowDefinition x:Name="RowDefinition1" Height="*"/>
    </Grid.RowDefinitions>
    <TabPanel x:Name="headerPanel" Background="White" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" VerticalAlignment="Top"/>
    <StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="RightToLeft">
    </StackPanel>
    <StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="LeftToRight" Height="30" VerticalAlignment="Top">
        <Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
            <Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
        </Button>
        <Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
            <Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
        </Button>
        <Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80">
            <TextBlock>Refer Patient</TextBlock>
        </Button>
    </StackPanel>
    <Border x:Name="contentPanel" BorderBrush="Green" BorderThickness="5" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </Border>
</Grid>

The above markup is nested inside the following structure at the top of the file:

<Window x:Class.... >
    <Window.Resources>
        <Style ...>
            ...
            <Setter Property="Template">
                <Setter.value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <!--(Above markup goes here) -->

Later in the file, I have the following markup:

                    </ControlTemplate>
                </Setter.value>
            </Setter>
        </Style>
        ...
    </Window.Resources>
    <Grid Name = "grid">
        <Image x:Name="Connected" Source="...\abc.png" Height="50" Width="50" Margin="750, 0, -5, 640"></Image>
        <!-- A few more image tags here -->
        <TabControl ... >
            <!-- XML for each of the tab items & their content here -->
        </TabControl>
    </Grid>
</Window>

This XAML displays the following GUI:

As you can see from the image, the 'main content' of the page is overlapping the <StackPanel> where I have added buttons for the navigation, and other features of my application (back, refresh, etc).

I can resize the window, by dragging one of the corners, and adjust it so that the buttons and other features are all displayed correctly:

However, it is also possible to resize the window too much (ie make it too large), which causes too much white space to be displayed between these buttons and things, and also causes the images on the far right hand side to be moved to a different location than the one I had intended:

The images on the far right hand side of my application window are the ones displayed by the XAML markup in the third bit of code that I have copied into my question.

So, my question is- is there a way that I can 'fix' the size of the <StackPanel> , <Grid> , <Style> or header of the <TabPanel> where I am displaying the navigation buttons and other images so that they're not resized with the rest of the window when the user drags one of the corners of the window around?

I tried setting the Height property of the <TabControl> to a specific value (eg 50), but this caused the whole content of the <TabControl> to shrink to 50... ie all of the content of the window was then displayed in an area on the window that was only 50 pixels high...

Basically, I want the content that I have shown here to remain the same no matter how the user interacts with the application, and only the content displayed below this to be updated dynamically as the user interact with the application. Anyone have any suggestions?

Answer 1

Try setting the height of row 1 from 0.05* to Auto! That should solve the overlap issue.