在 WPF MVVM 应用程序中添加材料设计后，数据网格不显示滚动条和设计变得过时 [英] Data grid does not show scroll bar and design become obsolete after adding material design in WPF MVVM Application

问题描述

我在 WPF MVVM 应用程序中同时使用 Material Design 和 dragablz:TabablzControl.Material design 用于设计按钮和文本框的样式.网格位于选项卡控件内.将批量数据加载到数据网格后，我面临以下设计问题.

I am using both material design and dragablz:TabablzControl in WPF MVVM application.Material design is used to style button and text box. Grid is located inside tab control.After loading bulk data in to data grid I am facing below design issues.

• 它不显示滚动条.我已经尝试过使用滚动查看器它没有用.其实我可以使用箭头键和鼠标向下滚动滚动.但是滚动条不可见.
• 当我们点击数据网格的单行时，该行变得不可见或消失.
• 当我们点击网格标题时，它会选择所有行
• 窗口中显示一条虚线.

任何解决问题的方法.我如何才能摆脱仅用于数据网格的材料设计.

Any way to fix issue. How can I get ride of material design only for data grid.

XAML 示例

   <Grid>
        <dragablz:TabablzControl SelectedIndex="0"  >
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController/>
            </dragablz:TabablzControl.InterTabController>
            <TabItem Header="File System" >
                <Grid ShowGridLines="False">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*">

                        </ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <GroupBox Grid.Row="0" Grid.Column="0" Header="ISPAC">
                        <Grid ShowGridLines="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*">

                                </ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="27"></RowDefinition>
                            </Grid.RowDefinitions>
                            <DataGrid Name="dataGridCustomer" Height="Auto" 
    Grid.Row="0"  Grid.Column="0"                                                                            
                                          AutoGenerateColumns="False"
                                        VerticalAlignment="Stretch"
                                              DataContext="{Binding tfs}"
                                          ItemsSource="{Binding 
    Path=CustomerList,Mode=TwoWay}"
                                              >
                                <DataGrid.Columns>

                                    <DataGridTextColumn Header="Name"
                                                            Binding=" 
    {Binding Path=NameOfFile}"></DataGridTextColumn>
                                    <DataGridTemplateColumn Header="Get ">
                                        
    <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <Button Content="{Binding 
     Path=Insert}"                                                           
                                                           Command= " 
     {Binding RelativeSource={RelativeSource AncestorType={x:Type 
    DataGrid}}, Path=DataContext.InsertCommand}"
                                                           
   CommandParameter="{Binding RelativeSource={RelativeSource 
    Mode=Self},Path=DataContext}"></Button>
                                            </DataTemplate>
                                        
      </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTextColumn Header="Component" 
   Visibility="Hidden"
                                                            Binding=" 
         {Binding Path=Component,Mode=TwoWay}"></DataGridTextColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        
                        </Grid>

                    </GroupBox>
                  
                </Grid>
            </TabItem>
        </dragablz:TabablzControl>
    </Grid>

网格界面示例

App.xaml

<Application x:Class="BIExtractionUtilityTool.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:BIExtractionUtilityTool"
          xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
         StartupUri="Views/MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- primary color -->
            <ResourceDictionary>
                <!-- include your primary palette -->
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Blue.xaml" />
                </ResourceDictionary.MergedDictionaries>
                <!--
                        include three hues from the primary palette (and the associated forecolours).
                        Do not rename, keep in sequence; light to dark.
                    -->
                <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
                <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>
                <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
                <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>
                <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
                <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary700Foreground}"/>
            </ResourceDictionary>

            <!-- secondary colour -->
            <ResourceDictionary>
                <!-- include your secondary pallette -->
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Blue.xaml" />
                </ResourceDictionary.MergedDictionaries>

                <!-- include a single secondary accent color (and the associated forecolour) -->
                <SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
                <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
            </ResourceDictionary>

            <!-- Include the Dragablz Material Design style -->
            <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        </ResourceDictionary.MergedDictionaries>

        <!-- tell Dragablz tab control to use the Material Design theme -->
        <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
    </ResourceDictionary>

</Application.Resources>

推荐答案

我认为您看不到某些控件或体验奇怪外观(如奇怪的颜色褪色)的原因是控件着色.

I think the reason why you are not able to see certain controls or experience odd appearance, like weird color fades, is because of the control coloring.

Material Design 主题基于或由多种资源组成.这样可以灵活地自定义最终主题.
您基本上拥有可以组合的控件设计主题和颜色主题.

The Material Design themes are based or composed of several resources. This enables flexibility to customize the final theme.
You basically have control design themes and color themes that you can combine.

但是你总是需要导入合适的资源，设计和颜色主题的组合.
MaterialDesignTheme.Defaults.xaml 包含基本的或共享的主题资源，这些资源主要是设计而不是颜色相关的，例如控件的默认样式.您已成功合并此资源.
但是您错过了将颜色主题合并到您的 ResourceDictionary 中.

But you always need to import the appropriate resources, a combination of design and color theme.
MaterialDesignTheme.Defaults.xaml contains basic or shared theme resources that are primarily design and not color related e.g. default styles for controls. You successfully merged this resource.
But you missed to merge a color theme into your ResourceDictionary.

例如，您需要导入一个深色基础主题MaterialDesignTheme.Dark.xaml:

For e.g, a dark base theme you need to import MaterialDesignTheme.Dark.xaml:

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
</ResourceDictionary.MergedDictionaries>

或者，您可以使用 BundledTheme 合并颜色主题，它允许通过在单个 BundledTheme 对象中设置相关属性(如主要强调色)来合并相关配色方案:

Alternatively you can consolidate the color themes using a BundledTheme, which allows to merge relevant color schemes by setting relevant attributes like primary accent color in a single BundledTheme object:

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

  <materialDesign:BundledTheme BaseTheme="Dark" 
                               PrimaryColor="Yellow" 
                               SecondaryColor="Red" />
</ResourceDictionary.MergedDictionaries>

我推荐 GitHub 上的文档资源.

I recommend the documentation resources on GitHub.

这篇关于在 WPF MVVM 应用程序中添加材料设计后，数据网格不显示滚动条和设计变得过时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！