Prevent GroupItem Headers from Scrolling Horizontally

94 views Asked by At

I've got a DataGrid with grouped data where the GroupItem headers show to the left of the actual data rows as show below:

However, when you scroll horiztonally you can see that the group item headers also scroll to the point where they are no longer visible on the screen.

Is there anyway to prevent the GroupItem headers from scrolling?

Below is the xaml for the group style:

    <Style x:Key="SeverityModificationFactorGroupItemStyle" TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="HoverOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="HoverOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="SelectedOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="SelectedOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid Background='Transparent' >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width='Auto' />
                            <ColumnDefinition Width='Auto' />
                            <ColumnDefinition Width='*' />
                            <ColumnDefinition Width='Auto' />
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="4" Grid.RowSpan="2" Fill="{StaticResource NormalBrush}" Stretch="Fill" Stroke="{StaticResource NormalBorderBrush}" StrokeThickness="1" />
                        <Rectangle x:Name="Hover" Grid.ColumnSpan="4" Grid.RowSpan="2" Stretch="Fill" Fill="{StaticResource MouseOverBrush}" Opacity="0" />

                        <Border Margin="0,5,0,3">
                            <Grid Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="160"/>
                                    <ColumnDefinition Width="60"/>
                                    <ColumnDefinition Width="80"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Border Grid.Column="0" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
                                    <CheckBox Grid.Column="0" IsChecked="{Binding Items[0].IsSelected}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                                              Command="{Binding Path=DataContext.SetLayerYearLossTableIsSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}>
                                    </CheckBox>
                                </Border>
                                <Border Grid.Column="1" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
                                    <TextBlock Grid.Column="1" Text="{Binding Items[0].YearLossTableName}" FontWeight="Bold" VerticalAlignment="Center" TextWrapping="Wrap"/>
                                </Border>
                                <Border Grid.Column="2" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
                                    <CheckBox Grid.Column="2" IsChecked="{Binding Items[0].IsInuring}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                                              Command="{Binding Path=DataContext.SetIsInuringCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}">
                                    </CheckBox>
                                </Border>
                                <Border Grid.Column="3" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
                                    <TextBox Grid.Column="3" Text="{Binding Items[0].MarketShare, Mode=TwoWay, StringFormat=P2, Converter={StaticResource DecimalPercentageConverter}, ValidatesOnDataErrors=True}" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="60">
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="TextChanged">
                                                <i:InvokeCommandAction Command="{Binding Path=DataContext.SetMarketShareCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                                    </TextBox>
                                </Border>
                                <ItemsPresenter Grid.Column="4"/>

                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource HoverOff}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And the actual DataGrid:

                        <DataGrid ItemsSource="{Binding SeverityModificationFactorsGrouped}" AutoGenerateColumns="False" CanUserAddRows="False" MinRowHeight="25" Panel.ZIndex="0" AreRowDetailsFrozen="False">
                            <DataGrid.GroupStyle>
                                <GroupStyle ContainerStyle="{StaticResource SeverityModificationFactorGroupItemStyle}">
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <DataGridRowsPresenter/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </DataGrid.GroupStyle>
                            <DataGrid.Columns>

                                <DataGridTextColumn Header="{StaticResource AccumulationPerilHeader}" Binding="{Binding AccumulationPerilName}"/>
                                <DataGridTemplateColumn CellTemplate="{StaticResource ExposureGrowthReadonlyCellTemplate}">
                                ...
                       </DataGrid>

Example

0

There are 0 answers