GridSplitter Issue in Wpf

Question

Hi,

I am encountering a problem with the GridSplitter. I have several templates designed for various user interfaces, and I am utilizing a template selector to apply the appropriate UI to the ItemsControl. Each template consists of three components: a TextBlock, a GridSplitter, and a TextBox. Additionally, I am implementing SharedSizeGroup="LabelGroup" for the labels, which results in the different templates being arranged in rows. However, after grouping the template controls, I experience issues with the GridSplitter becoming unresponsive during resizing operations. I am unable to determine the underlying cause of this issue and would appreciate your assistance in resolving it.

Attached source code with mp4

https://vemp-my.sharepoint.com/:u:/g/personal/sanjaykumarjha_virtualemployee_com/Ed-68lhVgfJPuO8Mwk0cV0IBnYayyMEoap47hZom9GOQkw?e=lHCN71

Thanks,

Sanjay

Answer 1

Hi,@Sanjay Kumar Jha.

There seems to be no good way to fix the problem that GridSplitter cannot be dragged. In order to achieve the same effect, I changed the setting idea, you could refer to it.

<Window.Resources>
    <!-- Template for Text Property -->
    <DataTemplate x:Key="TextTemplate_1">
        <Grid >
            <TextBlock Text="{Binding Label}" FontSize="14" Margin="5" Height="30"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="TextTemplate_2">
        <Grid >
            <TextBox Text="{Binding Input}" Margin="5"  HorizontalAlignment="Stretch" />
        </Grid>
    </DataTemplate>

    <!-- Template for Email Property -->
    <DataTemplate x:Key="EmailTemplate_1">
        <Grid>
            <TextBlock Text="{Binding Label}" FontSize="14" Margin="5" Height="30"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="EmailTemplate_2">
        <Grid>
            <TextBox Text="{Binding Input}" Margin="5"  HorizontalAlignment="Stretch" />
        </Grid>
    </DataTemplate>

    <!-- Template for Phone Property -->
    <DataTemplate x:Key="PhoneTemplate_1">
        <Grid >
            <TextBlock Text="{Binding Label}" FontSize="14" Margin="5"  Height="30"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="PhoneTemplate_2">
        <Grid >
            <TextBox Text="{Binding Input}" Margin="5"  HorizontalAlignment="Stretch" />
        </Grid>
    </DataTemplate>

    <!-- Template for Comments (Multi-line Text) Property -->
    <DataTemplate x:Key="CommentsTemplate_1">
        <Grid>
            <TextBlock Text="{Binding Label}" FontSize="14" Margin="5" Height="30"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="CommentsTemplate_2">
        <Grid>
            <TextBox Text="{Binding Input}" Margin="5"  AcceptsReturn="True" Height="100" HorizontalAlignment="Stretch" />
        </Grid>
    </DataTemplate>

    <!-- DataTemplateSelector for Choosing Template Based on PropertyType -->
    <local:PropertyTemplateSelector x:Key="SettingTemplateSelector_1" 
                                    TextTemplate="{StaticResource TextTemplate_1}"
                                    EmailTemplate="{StaticResource EmailTemplate_1}"
                                    PhoneTemplate="{StaticResource PhoneTemplate_1}"
                                    CommentsTemplate="{StaticResource CommentsTemplate_1}" />

    <local:PropertyTemplateSelector x:Key="SettingTemplateSelector_2" 
                            TextTemplate="{StaticResource TextTemplate_2}"
                            EmailTemplate="{StaticResource EmailTemplate_2}"
                            PhoneTemplate="{StaticResource PhoneTemplate_2}"
                            CommentsTemplate="{StaticResource CommentsTemplate_2}" />
</Window.Resources>

<!-- ItemsControl with ScrollViewer -->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <Grid IsSharedSizeScope="True" HorizontalAlignment="Stretch" x:Name="SettingsItemsPanel">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ItemsControl  ItemsSource="{Binding}" Grid.Column="0" ItemTemplateSelector="{StaticResource SettingTemplateSelector_1}">
        </ItemsControl>
        <GridSplitter Width="5" Background="DarkGray" HorizontalAlignment="Stretch" Grid.Column="1" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
        <ItemsControl  ItemsSource="{Binding}" Grid.Column="2" ItemTemplateSelector="{StaticResource SettingTemplateSelector_2}">
        </ItemsControl>

    </Grid>
</ScrollViewer>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // Initialize data for rows with different PropertyTypes
            ObservableCollection<RowData> rowDataList = new ObservableCollection<RowData>
            {
                new RowData { Label = "Name", PropertyType = "Text" },
                new RowData { Label = "Email", PropertyType = "Email" },
                new RowData { Label = "Phone", PropertyType = "Phone" },
                new RowData { Label = "Address", PropertyType = "Text" },
                new RowData { Label = "Comments", PropertyType = "Comments" },
                new RowData { Label = "Additional Information", PropertyType = "Text" },
                new RowData { Label = "Feedback", PropertyType = "Comments" }
            };

            SettingsItemsPanel.DataContext = rowDataList;
        }
    }

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.