2

Been looking at it for 4 hours, guys... I just can't figure this out (possibly Microsoft bug?)

This is what I have and it's all good except DataGrid control. As you can see in this video, data goes beyond app's boundary (grid and scroll bar):

https://goo.gl/photos/YnApkZS7v3uZ4TWX6

Since this code is using Material Design library, I stripped it down to basics so that anyone could try it out for themselves.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="EvolvDirectoryCreeper.MainWindow"
    Height="700" Width="1000">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto" MinWidth="80"/>
    </Grid.ColumnDefinitions>
    <Grid Height="180" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2">
        <Grid Margin="10,10,100,10">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Grid.Row="0" Margin="4"/>
            <TextBox Grid.Column="0" Grid.Row="1" Margin="4"/>
            <TextBox Grid.Column="0" Grid.Row="2" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="0" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="1" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="2" Margin="4"/>
        </Grid>
    </Grid>
    <Grid Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Height="40" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Padding="0,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        <ProgressBar Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" VerticalAlignment="Bottom"/>
        <Label Content="Good" Grid.Column="0" Grid.Row="1" Margin="4,30,0,0"/>
        <Label Content="Bad" Grid.Column="2" Grid.Row="1" Margin="4,30,0,0"/>
        <DataGrid Grid.Column="0" Grid.Row="2"/>
        <DataGrid Grid.Column="2" Grid.Row="2" ItemsSource="{Binding Path=BadFoldersHistory}"/>
    </Grid>
</Grid>

And this is C#:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text.RegularExpressions;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Threading;

namespace EvolvDirectoryCreeper
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private ObservableCollection<string> m_badFoldersHistory = new ObservableCollection<string>();
        public ObservableCollection<string> BadFoldersHistory
        {
            get { return m_badFoldersHistory; }
            set { 
                m_badFoldersHistory = value;                                                                           
                OnPropertyChanged("BadFoldersHistory");
            }
        }

        public virtual event PropertyChangedEventHandler PropertyChanged;
        public virtual void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }

        private Dispatcher MainWindowDispatcher;

        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;
            MainWindowDispatcher = Dispatcher;

            for (int i = 0; i < 40; i++)
                BadFoldersHistory.Add("d");
        }
    }
}

I already tried "Auto" instead of "*" in the last row of each Grid but doesn't help. I need to keep this Grid structure to maintain Material Design FAB location and proper resizing. ANY help would be greatly appreciated!

Frank Bryce
  • 8,076
  • 4
  • 38
  • 56
SYB
  • 153
  • 2
  • 11

2 Answers2

1

Somewhere you need to define height. I gave the first RowDef to 180, since your first grid is 180.Try the below code.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="180"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto" MinWidth="80"/>
    </Grid.ColumnDefinitions>
    <Grid Height="180" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2">
        <Grid Margin="10,10,100,10">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Grid.Row="0" Margin="4"/>
            <TextBox Grid.Column="0" Grid.Row="1" Margin="4"/>
            <TextBox Grid.Column="0" Grid.Row="2" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="0" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="1" Margin="4"/>
            <Button Grid.Column="1" Grid.Row="2" Margin="4"/>
        </Grid>
    </Grid>
    <Grid Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Height="40" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Padding="0,15,0,0"
               HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        <ProgressBar Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" VerticalAlignment="Bottom"/>
        <Label Content="Good" Grid.Column="0" Grid.Row="1" Margin="4,30,0,0"/>
        <Label Content="Bad" Grid.Column="2" Grid.Row="1" Margin="4,30,0,0"/>
        <DataGrid Grid.Column="0" Grid.Row="2"/>
        <DataGrid Grid.Column="2" Grid.Row="2" ItemsSource="{Binding Path=BadFoldersHistory}"  />
    </Grid>
</Grid>
Ayyappan Subramanian
  • 5,348
  • 1
  • 22
  • 44
  • Yep! That's what it is! Thanks! – SYB Feb 12 '16 at 17:00
  • By the way, anyone interested in Material Design WPG library, I highly recommend this: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit – SYB Feb 12 '16 at 18:02
0

A generic solution would be to put a control that could show the content if exceeding the height of parent control. It's a very common problem with the ContentControl like controls(like Window,ContentControl or any Panel etc) in WPF.

See this link to see the generic problem

We can't be sure of Height of inner controls all the times so a fix height solution is not the best solution. If a control height exceed or match the height of your grid then a fix height solution is kaput.

A generic solution is contain your grid in a control that can handle variable height(like Scrollviewer). Like below:

<ScrollViewer MaxHeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}},Path=ActualHeight,Mode=OneWay}">
    <Grid>
............
</ScrollViewer>

And you don't have to worry about any control's height being exceeded from the height of your grid/Window.

Output:

ScrollViewer

Community
  • 1
  • 1
Kylo Ren
  • 8,551
  • 6
  • 41
  • 66