WPF ColumnDefinitions and start width

Question

I have some trouble with setting the width of columns in my grid. I want to achieve that the most left column is at startup (of the application) 200 pixels width but is still resizeble. This is my code:

<Grid x:Name="MainGrid" Width="1000" Height="600">
    <Grid x:Name="MainGrid" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="500"/>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" MinWidth="200"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
        </ScrollViewer>
        <GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
        <ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
        </ScrollViewer>
    </Grid>
</Grid>

My problem is that I don't know how to set the startwidth of the columns. Maybe I used the wrong search words, but I couldn't find anything that solves my problem

Current Newest Code:

<Window x:Class="ServerWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ServerWPF"
        mc:Ignorable="d"
        Title="Chat Server" ResizeMode="CanMinimize" SizeToContent="WidthAndHeight">
    <Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="500"/>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" MinWidth="200"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
        </ScrollViewer>
        <GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
        <ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
        </ScrollViewer>
    </Grid>
</Window>

score 2 · Accepted Answer · answered Nov 30 '15 at 17:42

This worked for me, just set the starting width as the width. No need to set it again an all of the child elements that will resize to fit their containers.

I set MaxWidth on the left box to prevent it from scrolling content in the right box out of the visible area.

<Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" MinWidth="200" MaxWidth="495" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" MinWidth="500" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox x:Name="textBox" Text="Left" />
        </ScrollViewer>

        <GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>

        <ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
            <TextBox x:Name="textbox1" Text="Right" />
        </ScrollViewer>
</Grid>

Abin · Answer 2 · 2015-11-30T17:21:45.690

Try like below,

<Grid x:Name="GridLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200"/>
            <ColumnDefinition Width="5" />
            <ColumnDefinition MinWidth="500"/>
        </Grid.ColumnDefinitions>
</Grid>

Width="*" will divide your total space with the count of Width="*" and set the width for the column. so remove it and if you need you can use Width="Auto" which will take the width of the item inside the column.

WPF ColumnDefinitions and start width

2 Answers2