如何解决我的 WPF 数据网格中的一些设计问题

Question

我的 window (WPF) 中有一个数据网格，其样式如下（图像和 XAML 如下所示）

datagrid

<!-- 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" />

问题是

由于某种原因，数据网格中似乎多了一个没有数据的列。我该如何摆脱它？我尝试添加类似

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

但出现错误：

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.`

数据网格的最左侧有一个白色的边框（见第一张图片），我该如何摆脱它，并且还需要更改滚动条设计。有没有人建议哪种类型的滚动条应该适合我的设计。如果你有类似的东西，请分享。

scrollbar

我是新手，所以请帮忙。

Answer 1

对于你的第一个和第二个问题，你可以直接在Datagrid样式上使用以下属性：

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

ColumnWidth 设置为“*”允许您在所有列上使用相同的宽度。如果您在 Grid 上使用 AutoGenerateColumns 为 false，您还可以在 case-by-case 基础上定义每列的宽度。
HeadersVisibility 设置为“列”隐藏左行选择器。

关于滚动条的样式，给大家分享一个我用的样式：

<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>

适不适合你的设计由你来判断，但无论如何它都会给你一个可以修改的基础！

如何解决我的 WPF 数据网格中的一些设计问题

How to resolve some design issues in my WPF datagrid

c#

wpf

xaml

datagrid