Search code examples
silverlightsilverlight-4.0gridsplitter

Silverlight 4.0: GridSplitter is splitting incorrectly


Please help, the grid splitter in not splitting correctly to the right, the testing button content. Is there anything I've missed out in using grid splitter?

<local:LayoutTemplateSelector Content="{Binding}">
                    <local:LayoutTemplateSelector.VerticalLeftRight>
                        <DataTemplate>
                            <Grid ShowGridLines="True" Background="Orange"  Height="{Binding Height}" 
                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=".25*"/>
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width=".70*"/>

                                </Grid.ColumnDefinitions>
                                <Button  Grid.Column="0" Content="Test"  Width="{Binding ChartWidth}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                                <sdk:GridSplitter Grid.Column="1" ShowsPreview="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                <Button Content="Testing"  Width="{Binding SectionWidth}"  Grid.Column="2"
                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                            </Grid>
                        </DataTemplate>
                    </local:LayoutTemplateSelector.VerticalLeftRight>
                </local:LayoutTemplateSelector>

Solution

  • You need to use fixed width for the first column and star for the remaining one.

    <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="200" MinWidth="50" MaxWidth="250"/>
                 <ColumnDefinition Width="10" />
                 <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    

    It is usually a good idea (but not essential) to set min and max values for the first column to keep it looking sensible.