How to resolve some design issues in my WPF datagrid-CodePudding

I have a datagrid in my window (WPF) with the below styling (image & XAML shown below)

<!-- Style of data grid -->

<Style TargetType="{x:Type DataGrid}" x:Key="test">
        <Setter Property="ColumnHeaderStyle" >
            <Setter.Value>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="Height" Value="35" />
                    <Setter Property="SeparatorBrush" Value="DarkRed" />
                    <Setter Property="FontWeight" Value="Black" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="columnHeaderBorder"
                                                        Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                        <EasingColorKeyFrame KeyTime="0" Value="LightYellow" />
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="columnHeaderBorder"
                                            BorderThickness="1"
                                            Padding="3,0,3,0">
                                        <Border.BorderBrush>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Offset="0" Color="#18aab8" />
                                                <GradientStop Offset="1" Color="#10717a" />
                                            </LinearGradientBrush>
                                        </Border.BorderBrush>
                                        <Border.Background>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Offset="0" Color="#661fe0" />
                                                <GradientStop Offset="1" Color="#4e12b5" />
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            
            
            </Setter.Value>
        </Setter>
        
        <Setter Property="RowStyle" >
            <Setter.Value>
                
                <Style TargetType="{x:Type DataGridRow}">
                    <Setter Property="Foreground" Value="#FFB3B3B3"/>
                    <Setter Property="Height" Value="25"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="#FF262626"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                            <Setter Property="Background" Value="#FF383838"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="Background" Value="#FF333333"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            
            
            </Setter.Value>
        </Setter>
        
        <Setter Property="CellStyle">
            <Setter.Value>
                <Style TargetType="{x:Type DataGridCell}">
                    
                    
                    <Setter Property="Background" Value="#121212">
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="SeaGreen"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            
            </Setter.Value>
        </Setter>
    </Style>



<!-- Window.xaml -->

<DataGrid Background="#181735" Style="{StaticResource test}"
          CanUserAddRows="false"
          Grid.Column="4"
          Grid.ColumnSpan="2"
          HorizontalAlignment="Stretch"
          Margin="15,0,10,5"
          VerticalAlignment="Stretch" />

The problems are

There seems to be an extra column with no data for some reason in the datagrid. How do I get rid of that? I've tried adding something like

<Setter Property="Width" Value="*"/>` inside `<Setter Property="RowStyle"> <Setter.Value> <Style TargetType="{x:Type DataGridRow}">

but getting an error:

System.Windows.Markup.XamlParseException: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number @@@@ and line position @@@. ---> System.FormatException: '*' string cannot be converted to Length.`

There is a white type of border on extreme left side of the data grid(see 1st image), how do I get rid of that & also the scroll bar design needs to be changed as well. Does anyone has a suggestion what type of scroll bar should go well with my design. If you have something like that please share.

scrollbar

I'm new to this, so please help.

CodePudding user response：

For your first and second question, you can use the following properties on the Datagrid style directly:

<Style TargetType="{x:Type DataGrid}" x:Key="test">
    <Setter Property="ColumnWidth" Value="*"></Setter>
    <Setter Property="HeadersVisibility" Value="Column"></Setter>
    ...
</Style>

ColumnWidth set to "*" allows you to use equal width on all your columns. In case you use AutoGenerateColumns to false on your Grid, you can also define the widths of each column on a case-by-case basis.
HeadersVisibility set to "Column" hide the left row selector.

Concerning the Style of the Scrollbar, I share you a style I use:

<Style x:Key="ScrollBarCustomThumb" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid x:Name="Grid">
                    <Rectangle HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Width="Auto"
                        Height="Auto"
                        Fill="Transparent" />
                    <Border x:Name="CornerScrollBarRectangle"
                    CornerRadius="5"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Width="Auto"
                    Height="Auto"
                    Margin="0,1,0,1"
                    Background="{TemplateBinding Background}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Tag"
                        Value="Horizontal">
                        <Setter TargetName="CornerScrollBarRectangle"
                        Property="Width"
                        Value="Auto" />
                        <Setter TargetName="CornerScrollBarRectangle"
                        Property="Height"
                        Value="6" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ScrollBar">
    <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
    <Setter Property="Foreground" Value="#c1c1c1" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Width" Value="7" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="GridRoot"
                Width="10"
                Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.00001*" />
                    </Grid.RowDefinitions>
                    <Track x:Name="PART_Track"
                    Grid.Row="0"
                    IsDirectionReversed="true"
                    Focusable="false">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb"
                            Background="{TemplateBinding Foreground}"
                            Style="{DynamicResource ScrollBarCustomThumb}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton x:Name="PageUp"
                                    Command="ScrollBar.PageDownCommand"
                                    Opacity="0"
                                    Focusable="false" />
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                            <RepeatButton x:Name="PageDown"
                                    Command="ScrollBar.PageUpCommand"
                                    Opacity="0"
                                    Focusable="false" />
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger SourceName="Thumb"
                        Property="IsMouseOver"
                        Value="true">
                        <Setter Value="#a8a8a8"
                        TargetName="Thumb"
                        Property="Background" />
                    </Trigger>
                    <Trigger SourceName="Thumb"
                        Property="IsDragging"
                        Value="true">
                        <Setter Value="#787878"
                        TargetName="Thumb"
                        Property="Background" />
                    </Trigger>

                    <Trigger Property="IsEnabled"
                        Value="false">
                        <Setter TargetName="Thumb"
                        Property="Visibility"
                        Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="Orientation"
                        Value="Horizontal">
                        <Setter TargetName="GridRoot"
                        Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="PART_Track"
                        Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width"
                        Value="Auto" />
                        <Setter Property="Height"
                        Value="8" />
                        <Setter TargetName="Thumb"
                        Property="Tag"
                        Value="Horizontal" />
                        <Setter TargetName="PageDown"
                        Property="Command"
                        Value="ScrollBar.PageLeftCommand" />
                        <Setter TargetName="PageUp"
                        Property="Command"
                        Value="ScrollBar.PageRightCommand" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It's up to you to judge whether or not it suits your design, but in any case it will give you a base that you can modify!