User-resizable WPF Controls?

Question

In XAML, how do I make it possible to resize controls or portions of a display the way the different panels like the Toolbox, Solution Explorer or Error List in Visual Studio can be grabbed and resized?

In this made-up example . . .

<Window x:Class="UI_Experiments_1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel x:Name="Tab3DockPanel" Background="#FFA0FFA0" LastChildFill="True">
        <ScrollViewer DockPanel.Dock="Left" Background="Lavender">
            <TextBlock Height="60" TextWrapping="Wrap" Background="#FFFFDDDD" Width="140">
                  ScrollViewer - DockPanel.Dock="Left"
            </TextBlock>
        </ScrollViewer> 
        <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center" 
               TextWrapping="Wrap" Background="LemonChiffon">
               DockPanel.Dock="Top" HorizontalAlignment="Center"
        </TextBlock>
        <ListBox DockPanel.Dock="Right" Background="#FFCCEEFF">
               ListBox DockPanel.Dock="Bottom" 
        </ListBox>
    </DockPanel>
</Window>

. . . I have a DockPanel with a ScrollView docked on the left, a ListBox docked on the bottom, and a TextBlock on the top. Is there a way to attach resizing handles to these to achieve the same effect, or is there some other control that these can be embedded in? As I said, the above is just a made-up example to experiment with - I don't care if I use those exact controls.

I did find an example of adding resizing handles using an Adorner on MSDN but it involved over 170 lines of C# code so before adopting that I wanted to be sure there was no intrinsic way to achieve this in XAML.

Thanks in advance.

Answer 1

You might go with GridSplitter What you will need to do is to do your layout with Grid and then use GridSplitter to resize columns or rows.

Here is an example on How to: Create User-Resizable Applications with GridSplitter

Answer 2

Not the exact controls you asked but a sample. Need a splitter and what is on either side * and the contained control stretch.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />     
    </Grid.ColumnDefinitions>
    <TextBox Grid.Row="0" Grid.Column="0" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch" 
             Text="TexBox" />      
    <GridSplitter Grid.Row="0" Grid.Column="1" Margin="2,0,2,0"
                  Width="3" Background="Purple" 
                  VerticalAlignment="Stretch" 
                  HorizontalAlignment="Center" />
    <ListView Grid.Row="0" Grid.Column="2" Background="Aqua" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch"/>
</Grid>