Search code examples
c#wpfmvvmdatagridmaterial-design

Data grid does not show scroll bar and design become obsolete after adding material design in WPF MVVM Application

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.

  • it does not show scroll bar. I have tried with scroll viewer though it didn't work. Actually I can scroll down using arrow key and mouse scroll. But the scroll bar is not visible.
  • When we click on a single row of the data grid that row become invisible or fades.
  • When we click on grid header it selects all the rows
  • A dotted line are displayed in window.

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

XAML Sample

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

Grid UI sample enter image description here

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

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

    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.

    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.

    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>

    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>

    I recommend the documentation resources on GitHub.