Question

OK, here’s my XAML:

<Window x:Class="nathan___visual_studio_panes___layers.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>

        <StackPanel DockPanel.Dock="Top">

            <Button Name="move_ellipse2_to_GridA" Click="move_ellipse2_to_GridA_Click">
                Move ellipse2 to GridA
            </Button>

            <Button Name="move_ellipse3_to_GridA" Click="move_ellipse3_to_GridA_Click">
                Move ellipse3 to GridA
            </Button>

        </StackPanel>

        <Grid Grid.IsSharedSizeScope="True" Background="AliceBlue">

            <Grid Name="gridA">                
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Ellipse Grid.Column="0" Grid.Row="0" Fill="CornflowerBlue"/>                
            </Grid>

            <Grid Name="gridB" Visibility="Visible">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Ellipse Grid.Column="1" Name="ellipse2" Fill="Aquamarine"/>

                <GridSplitter Name="gridB_grid_splitter" Width="5" Grid.Column="1" HorizontalAlignment="Left"/>

            </Grid>

            <Grid Name="gridC" Visibility="Visible">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Ellipse Grid.Column="1" Name="ellipse3" Fill="Cornsilk"/>

                <GridSplitter Name="gridC_grid_splitter" Width="5" Grid.Column="1" HorizontalAlignment="Left"/>
            </Grid>

        </Grid>

    </DockPanel>

</Window>

And here’s the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace nathan___visual_studio_panes___layers
{  
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ColumnDefinition GridA_column_for_ellipse2 = new ColumnDefinition();
        ColumnDefinition GridA_column_for_ellipse3 = new ColumnDefinition();


        public MainWindow()
        {
            InitializeComponent();
        }

        private void move_ellipse2_to_GridA_Click(object sender, RoutedEventArgs e)
        {
            gridB.Children.Remove(gridB_grid_splitter);

            var i = gridA.ColumnDefinitions.Count;

            gridA.ColumnDefinitions.Add(GridA_column_for_ellipse2);

            gridB.Children.Remove(ellipse2);
            gridA.Children.Add(ellipse2);
            Grid.SetColumn(ellipse2, i);

            var grid_splitter = new GridSplitter() { Width = 5, HorizontalAlignment = HorizontalAlignment.Left };
            gridA.Children.Add(grid_splitter);
            Grid.SetColumn(grid_splitter, i);

            Console.WriteLine(i);
        }

        private void move_ellipse3_to_GridA_Click(object sender, RoutedEventArgs e)
        {
            gridC.Children.Remove(gridC_grid_splitter);

            var i = gridA.ColumnDefinitions.Count;

            gridA.ColumnDefinitions.Add(GridA_column_for_ellipse3);

            gridC.Children.Remove(ellipse3);
            gridA.Children.Add(ellipse3);
            Grid.SetColumn(ellipse3, i);

            var grid_splitter = new GridSplitter() { Width = 5, HorizontalAlignment = HorizontalAlignment.Left };
            gridA.Children.Add(grid_splitter);
            Grid.SetColumn(grid_splitter, i);

            Console.WriteLine(i);
        }         
    }
}

If I start the program and click the “Move ellipse2 to GridA” and “Move ellipse3 to GridA” buttons, I get “the right thing”. I.e. the three ellipses and two grid splitters all appear in the window.

However, if I start the program, drag the grid splitter (which moves ellipse3), click “Move ellipse2 to GridA”, drag the grid splitter for ellipse2 (the green one), and finally click “Move ellipse3 to GridA”, ellipse3 disappears completely!

What am I doing wrong here? 🙂 I.e. pushing both buttons should lead to all three ellipses showing up in the window, regardless of any splitter dragging.

I know this is kind of a weird demonstration program. One of the examples in Adam Nathan’s WPF Unleashed is a model of the Visual Studio start screen. The demo program above is just exploring a different technique for docking/undocking the panes.

Thanks for any hints or tips. I’m a WPF newb. 🙂

Answer 1

The solution

Place following code at the end of move_ellipse3_to_GridA_Click method

foreach (ColumnDefinition column in gridA.ColumnDefinitions)
    column.Width = new GridLength(1, GridUnitType.Star);

The explanation

The problem is that GridSplitter modifies ColumnDefinition.Width. It remaines star, but it becomes something like “357*”. That’s why the last column in gridA becomes vanishingly small. You can see it if you place breakpoint at the beginning of move_ellipse3_to_GridA_Click handler, reproduce your “bad” scenario and press that button second time. Check gridA.ColumnDefinitions[0] and [1] Width there.

Awareness

Just for making the world better: it is advised to place GridSplitter in a dedicated ColumnDefinition (RowDefinition) with Width (Height) set to Auto, and the GridSplitter‘s alignments to Center and Stretch.

Also there’s no need to define RowDefinition or ColumnDefinition if there’s only one of them and there’s no need to set element’s Row or Column to 0 – it is by default.