Gridsplitter unwanted behavior

Question

It is my first time working with a GridSplitter in WPF. I am trying to allow the user to resize the grid that contains 2 main controls. On top is a datagrid, below is a button with a map image over it. This is what it looks like in the designer. I have a separate row just for the gridsplitter. The xaml for the row definitions is

<Grid.RowDefinitions>
        <RowDefinition Height="37" />
        <RowDefinition Height="274*" />
        <RowDefinition Height="13*"/>
        <RowDefinition Height="272*"/>
        <RowDefinition Height="4*"/>
</Grid.RowDefinitions>

Interestingly, the GridSplitter seems to work if I'm moving it down. Then I can move it as needed and functions correctly. However, it seems that if I move the splitter above where the line for the row defined above it is, I am unable to move it down again. I can only continue to move it further up.

I have attached a link to a gif showing the behavior that I talk about here.

I am wondering how to go about making the GridSplitter function the same when moving it up or down, as right now, the functionality is correct only if it is moved down from it's initial starting position.

Any help is appreciated.

Update: Here is the full xaml for the user control holding the grid:

<UserControl x:Class="LWDCM.Views.JobsControl"
         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:LWDCM.Views"
         xmlns:Properties="clr-namespace:LWDCM.Properties"
         xmlns:Utility="clr-namespace:LWDCM.Utility"
         xmlns:Styles="clr-namespace:LWDCM.Styles"
         xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"
         xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
         xmlns:Converters="clr-namespace:LWDCM.Converters"
         mc:Ignorable="d"
         Name="jobsControl"
         MinWidth="800"
         MinHeight="600"
         >


<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="../Styles/AppStyles.xaml" />
            <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <!-- Accent and AppTheme setting -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

<Grid x:Name="MainGrid"
      Margin="0,0,0,0"
      Background="#26598c"
      >

    <!--<Grid.Background>
        <LinearGradientBrush ColorInterpolationMode="SRgbLinearInterpolation"
                             StartPoint="0.5, 0.0"
                             EndPoint="0.5, 1.0">
            <GradientStopCollection>
                <GradientStop Color="#FF111111"
                              Offset="0.0" />
                <GradientStop Color="#FF333333"
                              Offset="0.5" />
                <GradientStop Color="#FF111111"
                              Offset="1.0" />
            </GradientStopCollection>
        </LinearGradientBrush>
    </Grid.Background>-->

    <Grid.RowDefinitions>
        <RowDefinition Height="37" />
        <RowDefinition Height="274*" />
        <RowDefinition Height="13*"/>
        <RowDefinition Height="272*"/>
        <RowDefinition Height="4*"/>
    </Grid.RowDefinitions>

    <Grid.Resources>
        <ContextMenu x:Key="ListViewContextMenu">
            <MenuItem x:Name="ContextRename"
                      Header="{x:Static Properties:Resources.RenameJob}"
                      Command="{Binding RenameJobCommand}" />
            <MenuItem x:Name="ContextSetJobsiteAddress"
                      Header="{x:Static Properties:Resources.SetJobsiteAddress}"
                      Command="{Binding UpdateJobSiteAddressCommand}" />
            <MenuItem x:Name="ContextSetCustomerAddress"
                      Header="{x:Static Properties:Resources.SetCustomerAddress}"
                      Command="{Binding UpdateCustomerInformationCommand}" />
            <MenuItem x:Name="ContextSetContractorAddress"
                      Header="{x:Static Properties:Resources.SetContractorAddress}"
                      Command="{Binding UpdateContractorInformationCommand}" />
            <MenuItem x:Name="ContextEditWorkOrderNumber"
                      Header="{x:Static Properties:Resources.EditWorkOrderNumber}"
                      Command="{Binding EditWorkOrderNumberCommand}" />
            <Separator/>
            <MenuItem x:Name="ExportToKML"
                      Header="{x:Static Properties:Resources.ExportToKML}"
                      Command="{Binding ExportToKMLCommand}"/>
        </ContextMenu>
        <Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />
    </Grid.Resources>

    <DataGrid x:Name="JobListView"
              AutoGenerateColumns="False"
              ItemsSource="{Binding UnitStatusCollection, Mode=TwoWay}"
              CanUserDeleteRows="False"
              Style="{StaticResource JobGridViewStyle}"
              SelectedItem="{Binding JobsListViewSelectedUnitInfo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
              Utility:DataGridColumnsBehavior.BindableColumns="{Binding DataGridColumns}"
              ContextMenu="{StaticResource ListViewContextMenu}"
              Margin="10,0,10,2"
              Grid.Row="1"
              SelectionMode="Single"
              SelectionUnit="FullRow"
              HorizontalAlignment="Stretch"
              HorizontalContentAlignment="Stretch"
              RowStyle="{StaticResource DataGridRowStyle}"
              CellStyle="{StaticResource DataGridCellStyle}"
              AlternationCount="2"
              CanUserResizeRows="False"
              HorizontalGridLinesBrush="#d6d6d6"
              VerticalGridLinesBrush="#d6d6d6"
              Background="#EAEAEA"
              >

        <!--This is to allow double clicks to open a job in LWD 3x-->
        <DataGrid.InputBindings>
            <MouseBinding Gesture="LeftDoubleClick"
                          Command="{Binding OpenInLWD3xCommand}" />
            <KeyBinding Key="Return"
                        Command="{Binding OpenInLWD3xCommand}" />
            <KeyBinding Key="F5"
                            Command="{Binding RefreshCommand}"/>
        </DataGrid.InputBindings>

        <DataGrid.Resources>
            <Converters:DoubleNanVisibilityConverter x:Key="DoubleNanVisibilityConverter" />
            <Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />

        </DataGrid.Resources>

    </DataGrid>


    <Button Cursor="Hand"
            Grid.ZIndex="0"
            Margin="10,2,10,1"
            Grid.Row="3"
            x:Name="cmdMapImage"
            Visibility="{Binding JobsListViewSelectedUnitInfo, Converter={StaticResource NullVisibilityConverter}}"
            Style="{StaticResource MapButtonStyle}"
            Command="{Binding ShowMapOnlineCommand}">
        <Image x:Name="mapImage"
               Source="{Binding DisplayedImage}"
               Tag="{Binding JobId}"
               Stretch="Fill"
               VerticalAlignment="Center"
               RenderOptions.BitmapScalingMode="HighQuality">
        </Image>
    </Button>

    <Rectangle Fill="#26598c"
               Grid.ZIndex="1"
               Margin="0,10,7,0"
               Grid.Row="3"
               Height="46"
               VerticalAlignment="Top"
               HorizontalAlignment="Right"
               Width="226"
               RadiusY="3.667"
               RadiusX="3.667"
               Focusable="False"/>

    <Button Grid.ZIndex="2"
            Command="{Binding ScanForwardCommand}"
            x:Name="scrollRightButton"
            Margin="0,20,15,0"
            HorizontalAlignment="Right"
            Width="30"
            Height="26"
            VerticalAlignment="Top"
            Grid.Row="3">

        <Image x:Name="scrollRight"
               Source="/Assets/Down-30px-tall.png"
               Stretch="Fill"
               VerticalAlignment="Center"
               RenderOptions.BitmapScalingMode="HighQuality">

        </Image>
    </Button>

    <Button Grid.ZIndex="2"
            Command="{Binding ScanBackwardCommand}"
            x:Name="scrollLeftButton"
            Margin="0,20,50,0"
            RenderTransformOrigin="1,-0.617"
            HorizontalAlignment="Right"
            Width="30"
            Height="26"
            VerticalAlignment="Top"
            Grid.Row="3">

        <Image x:Name="scrollLeft"
               Source="/Assets/Up-30px-tall.png"
               Stretch="Fill"
               VerticalAlignment="Center"
               RenderOptions.BitmapScalingMode="HighQuality">

        </Image>
    </Button>

    <ComboBox x:Name="ScanSizesComboBox"
              Grid.ZIndex="2"
              ItemsSource="{Binding ScanSizes}"
              SelectedItem="{Binding SelectedScanSize, Mode=TwoWay}"
              ToolTip="{Binding (Validation.Errors)[0].ErrorContent}"
              Margin="0,20,85,0"
              HorizontalAlignment="Right"
              Width="61"
              Height="26"
              VerticalAlignment="Top"
              Grid.Row="3" />

    <Button x:Name="OpenLWD"
            Grid.ZIndex="2"
            Command="{Binding OpenInLWD3xCommand}"
            Margin="0,20,150,0"
            HorizontalAlignment="Right"
            Width="75"
            Height="26"
            VerticalAlignment="Top"
            Grid.Row="3"
            Padding="0"
            Background="#26598c">


        <Image x:Name="openIn3x"
               Source="/Assets/LWD-button.png"
               Tag="{Binding JobId}"
               Stretch="Fill"
               VerticalAlignment="Center"
               RenderOptions.BitmapScalingMode="HighQuality"
               Height="27">
        </Image>

    </Button>

    <DockPanel Grid.Row="0"
               LastChildFill="False"
               Grid.RowSpan="4">
        <Menu x:Name="menu"
              DockPanel.Dock="Top"
              IsTabStop="False"
              FontSize="13"
              VerticalAlignment="Top"
              Background="WhiteSmoke"
              Height="27">

            <MenuItem x:Name="FileMenu"
                      Header="{x:Static Properties:Resources.File}"
                      Background="Transparent" FontFamily="Arial">
                <MenuItem x:Name="BluetoothUpload"
                          Header="{x:Static Properties:Resources.UploadBluetoothJob}"
                          IsEnabled="True"
                          Command="{Binding OpenLWD3xBluetoothCommand}" />
                <MenuItem x:Name="FileUpload"
                          Header="{x:Static Properties:Resources.UploadLocalFile}"
                          IsEnabled="True"
                          Command="{Binding AddLocalJobCommand}" />
                <Separator />
                <MenuItem x:Name="FileLogout"
                          Header="{x:Static Properties:Resources.Logout}"
                          IsEnabled="True"
                          Command="{Binding LogoutCommand}"
                          CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
            </MenuItem>

            <MenuItem x:Name="ViewMenu"
                      Header="{x:Static Properties:Resources.View}"
                      Background="Transparent">
                <MenuItem x:Name="ColumnOptions"
                          Header="{x:Static Properties:Resources.ColumnOptions}"
                          Background="Transparent"
                          Command="{Binding ShowColumnOptionsDialogCommand}" />

                <MenuItem x:Name="DisplayUnits"
                          Header="{x:Static Properties:Resources.DisplayUnits}"
                          Background="Transparent"
                          Command="{Binding ShowUnitsSelectionCommand}" />

                <Separator />
                <MenuItem x:Name="ViewRefresh"
                          IsEnabled="True"
                          Header="Re_fresh"
                          Command="{Binding RefreshCommand}"
                          />
                <!--<MenuItem x:Name="ViewOptions" Header="_Options" />-->
            </MenuItem>
            <MenuItem x:Name="HelpMenu"
                      Header="{x:Static Properties:Resources.Help}"
                      Background="Transparent">
                <MenuItem x:Name="HelpOpen"
                          Header="{x:Static Properties:Resources.OnlineHelp}" />
                <Separator />
                <MenuItem x:Name="HelpAbout"
                          Header="{x:Static Properties:Resources.About}"
                          Command="{Binding ShowAboutDialogCommand}" />

                <MenuItem x:Name="DeleteUnits"
                          Header="Delete all Units"
                          Command="{Binding RemoveUnitsCommand}"/>
            </MenuItem>
        </Menu>
    </DockPanel>

    <GridSplitter x:Name="gridSplitter" Grid.Row="2" Width="Auto" MinHeight="5" MaxHeight="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,4,0,4" />
</Grid>


</UserControl>

And here is the JobGridViewStyle:

 <Style x:Key="JobGridViewStyle" TargetType="DataGrid">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="Background" Value="WhiteSmoke" />
    <Setter Property="SelectionMode" Value="Single" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Margin" Value="10,0,10,0" />
</Style>

What control is under the splitter and in what panel are you storing it? Can we see full xaml of this view? — Karolis Kajenas
I updated the post with the xaml for grid containing the controls — KSF
Is this grid stored in UserControl or Window? Because I have tried the code you have pasted and it does work correctly. — Karolis Kajenas
Can you provide code of your whole visual tree? (till window). — Karolis Kajenas

KSF KSF · Accepted Answer · 2016-06-28T18:44:57

I appreciate the help. I'm really not sure why, but the solution to my answer was to add

ShowsPreview="True"

to my GridSplitter. I have no idea why this would affect the functionality, but it fixed my issue.

For reference, I was looking at this page: How to: Resize Rows with a GridSplitter when I found out the solution.

Thanks again

Gridsplitter unwanted behavior

1 Answers