Resizing of ToolWindow and contents in WPF

Question

We have a VS extension. The user uses a ToolWindowPane to interact with the extension. The height and width of the ToolWindowPane depends on how the user has their VS environment set up, and currently the contents of the ToolWindowPane does not resize properly.

So here is the window:

public class SymCalculationUtilitiesWindow : ToolWindowPane
{
    /// <summary>
    /// Initializes a new instance of the <see cref="SymCalculationUtilitiesWindow"/> class.
    /// </summary>
    public SymCalculationUtilitiesWindow() : base(null)
    {
        this.Caption = "Sym Calculation Utilities";

        this.ToolBar = new CommandID(new Guid(Guids.guidConnectCommandPackageCmdSet), Guids.SymToolbar);
        // This is the user control hosted by the tool window; Note that, even if this class implements IDisposable,
        // we are not calling Dispose on this object. This is because ToolWindowPane calls Dispose on
        // the object returned by the Content property.
        this.Content = new UtilitiesView();

    }

}

So the UtilitiesView is the default view. Here is the xaml:

<UserControl
         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"
         xmlns:local="clr-namespace:Sym.VisualStudioExtension" x:Class="Sym.VisualStudioExtension.Engines.UtilitiesView"
         xmlns:engines="clr-namespace:Sym.VisualStudioExtension.Engines" 
         Background="{DynamicResource VsBrush.Window}"
         Foreground="{DynamicResource VsBrush.WindowText}"
         mc:Ignorable="d"
         local:ViewModelLocator.AutoWireViewModel="True"
         x:Name="MyToolWindow" Height="800" Width="400">

<UserControl.Resources>
    <DataTemplate DataType="{x:Type engines:CalcEngineViewModel}">
        <engines:CalcEngineView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type engines:TAEngineViewModel}">
        <engines:TAEngineView/>
    </DataTemplate>
</UserControl.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="207*" />
        <RowDefinition Height="593*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="MainContent"
        Grid.Row="1" Grid.RowSpan="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ContentControl Content="{Binding CurrentEngineViewModel}" Grid.RowSpan="2"/>
    </Grid>

</Grid>

and the user makes a choice which determines the CurrentEngineViewModel.

The following is the xaml of one of the possible CurrentEngineViewModels:

<UserControl x:Class="Sym.VisualStudioExtension.Engines.CalcEngineView"
         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"   
         xmlns:domain="clr-namespace:Sym.Engines.Calculation.Builder.Domain;assembly=Sym.Engines.Calculation" 
         xmlns:core="clr-namespace:Sym.Core.Domain;assembly=Sym.Core" 
         xmlns:helper="clr-namespace:Sym.VisualStudioExtension.Helper_Classes"
         xmlns:local="clr-namespace:Sym.VisualStudioExtension"           
         local:ViewModelLocator.AutoWireViewModel="True"
         mc:Ignorable="d"             
         d:DesignHeight="800" d:DesignWidth="400">
<UserControl.Resources>
    <ContextMenu>
        ...
    </ContextMenu>
</UserControl.Resources>
<Grid Margin="-20,-20,-20,-20">
    <Grid.RowDefinitions>
        <RowDefinition Height="8*"/>

    </Grid.RowDefinitions>
    <TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="617" Margin="20,54,0,0" VerticalAlignment="Top" Width="357">
        <TabItem Header="Calculation Files">
            <ListBox Name="CalcFilesListBox" 
                     Margin="20" ItemsSource="{Binding CalcFilesList}"                           
                     ContextMenu="{StaticResource NewEditDeleteContextMenu}"
                     Tag="{x:Type core:CalcFile}">
                ...
            </ListBox>                
        </TabItem>
        <TabItem Header="Template Files" Height="22" VerticalAlignment="Top">
            <TreeView ItemsSource="{Binding TemplateFamilyList}" 
                      Margin="20"
                      ContextMenu="{StaticResource NewEditDeleteContextMenu}"
                      Tag="{x:Type domain:TemplateParameter}">
                <TreeView.Resources>
                    ...
                </TreeView.Resources>
            </TreeView>
        </TabItem>
        <TabItem Header="Advanced Calc Files">
            <ListBox Margin="20" 
                     ItemsSource="{Binding AdvancedCalcFilesList}"
                     ContextMenu="{StaticResource NewEditDeleteContextMenu}"
                     Tag="{x:Type domain:TemplateCalculation}">
                ...
            </ListBox>
        </TabItem>
    </TabControl>
    <Label x:Name="label" Content="{Binding Path=Title}" HorizontalAlignment="Left" Height="27" Margin="10,22,0,0" VerticalAlignment="Top" Width="367"/>
</Grid>

It seems to me that on the ToolWindowPane, there is a Grid, and on the Grid another Grid, and on that Grid, a Tabcontrol. From this post it seems that some controls do not resize. So would that mean that the TabControl can't resize even if it is on a Grid?

When the user resizes the ToolWindowPane, the contents does not resize. How can I achieve correct resizing in this situation?

You have ``. `Left` prevents the tab control from resizing horizontally. Try `Stretch` instead. — FrankM, Jun 30 '18 at 10:51
... and you also need to remove `Width="357"` from the TabControl, as this also prevents the TabControl from resizing horizontally. — FrankM, Jun 30 '18 at 11:07
After the above suggestions, I unfortunately still have the situation as shown in the screenshot in my original post. The TabControl is cut off when the ToolWindow is made smaller. — Igavshne, Jun 30 '18 at 12:02
I think the root of your problems is that you're using fixed Widths and Heights everywhere. Those should be removed so that they fit to their container. First UtilitiesView so that it fits inside SymCalculationUtilitiesWindow, then your TabControl so it fits in your grid. — Joel Lucsy, Jul 02 '18 at 20:06
@JoelLucsy I believe this is the case. I suggest posting this as an answer — Bizhan, Jul 04 '18 at 00:12
tabcontrol and any other control does resize when put in a grid, as ppl suggested, you need to remove **all** explicit `Width` settings from your xaml — Bizhan, Jul 04 '18 at 00:14
I removed all the explicit width and height settings and added a ScrollViewer to the UtilitiesView. @JoelLucsy, please post your suggestion as an answer so that I can award the bounty. :-) — Igavshne, Jul 09 '18 at 09:45

score 1 · Answer 1 · answered Jul 09 '18 at 11:51

To make the page salable across resolutions/devices, you must ensure that there are no fixed width/height property specified; instead we can use them in percentage (%) which will make the controls scale based on available viewport. Try replacing all the fixed height & width properties for your control with percentages.

if for some reasons the controls are getting squeezed you can try providing minHeight & minWidth to the control as documented here https://www.w3schools.com/cssref/pr_dim_min-height.asp

score 1 · Accepted Answer · answered Jul 09 '18 at 13:19

1

The base of the problem is the explicit Width and Height values are being set and preventing the controls from fitting into their container.

answered Jul 09 '18 at 13:19

Joel Lucsy

8,520
1
29
35

How to adjust the contents when toolwindow is tabbed so that all contents are visible even there is a status bar? – Siddhi Kamat Aug 24 '21 at 09:37

Resizing of ToolWindow and contents in WPF

2 Answers2