I have a very simple XAML
<ui:BorderedGrid>
<ui:BorderedGrid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</ui:BorderedGrid.RowDefinitions>
<ui:BorderedGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</ui:BorderedGrid.ColumnDefinitions>
<StackPanel Background="Blue" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0" Margin="5" Width="200" Height="70"></StackPanel>
<StackPanel Background="Red" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0" Margin="5" Grid.RowSpan="2" Width="200" Height="300"></StackPanel>
<StackPanel Background="Plum" VerticalAlignment="Top" Grid.Row="0" Grid.Column="1" Margin="5" Grid.RowSpan="2" Width="200" Height="150"></StackPanel>
<StackPanel Background="SaddleBrown" VerticalAlignment="Top" Grid.Row="2" Grid.Column="1" Margin="5" Width="200" Height="250"></StackPanel>
</ui:BorderedGrid>
The BorderedGrid is just an extended version of WPF standard Grid, which have overriden OnRender function to draw column and row lines. Following is it's implementation
public class BorderedGrid : Grid
{
protected override void OnRender(DrawingContext dc)
{
double leftOffset = 0;
double topOffset = 0;
System.Windows.Media.Pen pen = new System.Windows.Media.Pen(System.Windows.Media.Brushes.LightGray, 1);
pen.Freeze();
foreach (RowDefinition row in this.RowDefinitions)
{
dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));
topOffset += row.ActualHeight;
}
// draw last line at the bottom
dc.DrawLine(pen, new System.Windows.Point(0, topOffset), new System.Windows.Point(this.ActualWidth, topOffset));
foreach (ColumnDefinition column in this.ColumnDefinitions)
{
dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));
leftOffset += column.ActualWidth;
}
// draw last line on the right
dc.DrawLine(pen, new System.Windows.Point(leftOffset, 0), new System.Windows.Point(leftOffset, this.ActualHeight));
base.OnRender(dc);
}
}
The problem is, I am assuming the output should be like this
But the actual output is like this
My question is why this white space is left in first row? I think I am missing very simple thing.. :(
All the rows need to be aligned irrespective of columns. Since the height of row 0 is auto. Its actual height becomes the height of its tallest child element + margin, which will be a portion of the plum height + 10 (from margin).
Since the height (70) of the blue panel is shorter than the height of its row (row 0) and it is vertical aligned to the top, you get the the white space below it.
I believe the result you are seeing is what is expected based on your configuration of rows, row spans, height, etc.
In a way, your horizontal grid lines already hinted at the computed row heights.
Here is another way to look at it:
Height of row 2 is height of SaddleBrown
Height of row 1 is height of row 2 minus height of Red
Height of row 0 is height of Plum minus height of row 1
Height of row 0 is great than the height of Blue. Blue is vertical aligned to the top and therefore has a white space below it.
I try not to spend too much time fighting with WPF's Auto. It seems like your two columns are largely independent in terms of their layout. You could do something like this, basically rendering two independent columns:
<ui:BorderedGrid>
<ui:BorderedGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</ui:BorderedGrid.ColumnDefinitions>
<StackPanel Width="200" Grid.Column="0">
<StackPanel Background="Blue"Margin="5" Height="70"></StackPanel>
<StackPanel Background="Red" Margin="5" Height="300"></StackPanel>
</StackPanel>
<StackPanel Width="200" Grid.Column="1">
<StackPanel Background="Plum" Margin="5" Height="150"></StackPanel>
<StackPanel Background="SaddleBrown"Margin="5" Height="250"></StackPanel>
</StackPanel>
</ui:BorderedGrid>
Related
I have a main window written in WPF that contains three sub windows and a user control with buttons. It looks like this:
What I want to do is to have the sub windows' ratio and the buttons' position fixed proportionally with the main window resizing.
I've handled the sub windows' size ratio, but I can't keep the buttons on the left side when the main widow's width is expanded:
And here is my code:
private void MainWindowResize(object sender, SizeChangedEventArgs e)
{
// sub windows size ratio
formA.Height = (this.ActualHeight - 80) * 0.5;
formA.Width = this.ActualWidth;
formB.Height = (this.ActualHeight - 80) * 0.5;
formB.Width = this.ActualWidth * 0.5;
formC.Height = (this.ActualHeight - 80) * 0.5;
formC.Width = this.ActualWidth * 0.5;
// buttons will not move to the left with this code
btnFrame.Width = this.ActualWidth;
}
+) WPF code:
MainWindow
<Grid x:Name="maingrid">
<DockPanel x:Name="panel1" LastChildFill="false">
<Frame DockPanel.Dock="Bottom" Height="35" Width="800" Source="pack://application:,,,/FormBottom;component/form_bottom.xaml" />
<WindowsFormsHost x:Name="formA" DockPanel.Dock="Top" Height="207" Width="800" >
<wftop:form_top x:Name="formTop" Dock="Fill"/>
</WindowsFormsHost>
<WindowsFormsHost x:Name="formB" DockPanel.Dock="Left" Height="207" Width="400" >
<wflt:form_left x:Name="formLeft" Dock="Fill"/>
</WindowsFormsHost>
<WindowsFormsHost x:Name="formC" DockPanel.Dock="Left" Height="207" Width="400">
<wfrt:form_right x:Name="formRight" Dock="Fill"/>
</WindowsFormsHost>
</DockPanel>
<DockPanel x:Name="panel2" LastChildFill="false" >
<Frame DockPanel.Dock="Bottom" Height="35" Width="800" Source="pack://application:,,,/FormBottom;component/form_bottom.xaml" />
</DockPanel>
</Grid>
btnFrame
<UserControl x:Class="FormBottom.form_bottom"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:FormBottom"
mc:Ignorable="d"
Height="35" Width="800">
<StackPanel x:Name="bottompanel" Orientation="Horizontal" Height="35" VerticalAlignment="Bottom">
<Button Content="Panel1" MinWidth="70" Click="Button_Click" />
<Button Content="Panel2" MinWidth="70" Click="Button_Click_1" Margin="10,0,0,0" />
</StackPanel>
</UserControl>
Is there a way to have the buttons fixed on the left?
You do not have size control on your own. WPF provides various Panels for layouting out-of-the-box and there are also panels for proportional layouts like Grid or DockPanel.
Your example could look like this in XAML. The Rectangles represent your views. Using Grid panel you can define rows and columns and via their RowDefinition and ColumnDefinition you can set Height and Width to either explicit sizes, e.g. 100, let the size be determined automatically to fit the content with Auto or set star-sizes like 2* which lets you define proportions. The default value is * so in the layout below, the last row sizes to its content and the other rows are sized in proportion 1:1.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Fill="Pink"/>
<Rectangle Grid.Row="1" Grid.Column="0" Fill="MediumSeaGreen"/>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="LightBlue"/>
<StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<Button Content="A" Width="100" Height="50"/>
<Button Content="B" Width="100" Height="50" Margin="10, 0, 0, 0"/>
</StackPanel>
</Grid>
You can achieve the same layout with different panels, so this is just an example. What is the most suitable approach depends on your requirements and preferences. The same layout in code:
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
var pinkRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.Pink };
grid.Children.Add(pinkRectangle);
Grid.SetRow(pinkRectangle, 0);
Grid.SetColumn(pinkRectangle, 0);
Grid.SetColumnSpan(pinkRectangle, 2);
var greenRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.MediumSeaGreen };
grid.Children.Add(greenRectangle);
Grid.SetRow(greenRectangle, 1);
Grid.SetColumn(greenRectangle, 0);
var blueRectangle = new System.Windows.Shapes.Rectangle { Fill = Brushes.LightBlue };
grid.Children.Add(blueRectangle);
Grid.SetRow(blueRectangle, 1);
Grid.SetColumn(blueRectangle, 1);
var buttonA = new Button
{
Content = "A",
Width = 100,
Height = 50
};
var buttonB = new Button
{
Content = "B",
Width = 100,
Height = 50,
Margin = new Thickness(10, 0, 0, 0)
};
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal };
grid.Children.Add(stackPanel);
Grid.SetRow(stackPanel, 2);
Grid.SetColumn(stackPanel, 0);
Grid.SetColumnSpan(stackPanel, 2);
stackPanel.Children.Add(buttonA);
stackPanel.Children.Add(buttonB);
I don't know what kind of control the btnFrame is but you can put the buttons inside of a e.g. StackPanel and set the HorizontalAlignment="Left" on it.
Your WPF code would be helpful to provide a better answer.
After you've posted your WPF I think you should just remove the Width="800" attribute from your Frame so that it always stretches to fit its containing DockPanel. Besides I can't see where the btnFrame name is set in the WPF.
I asked a few months ago similarly question, but now I have different problem and I am not sure how to solve that.
Picture below describes what I want to implement - in fact I want DataGrid behavior. With 'fixed' keyword I mean that:
1) Header is always visible when I use vertical scrollbar, and header is moving if I use horizontal scrollbar
2) Rows are always visible when I use horizontal scrollbar, and rows are moving if I use vertical scrollbar
I need to create Grid on dynamically way, because I don't know number of rows or columns in advance.
My current solution doesn't include 'fixed rows' and my vertical scroll bar is not visible always (orange line at picture).
XAML
<Grid>
<Grid Grid.IsSharedSizeScope="True">
<ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Grid.Row="2" Grid.ColumnSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="600" />
</Grid.RowDefinitions>
<Grid x:Name="HeaderDaysGrid" Margin="10,0,0,0" Grid.Row="0" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" MaxWidth="150"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
<ColumnDefinition Width="*" MaxWidth="240"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="SchedulerGridWrapper" Grid.Row="1" Margin="10,0,0,5">
<ScrollViewer x:Name="SchedulerScrolViewer" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Height="600">
<Grid x:Name="WeekSchedulerGrid" ShowCustomGridLines="False" ScrollViewer.CanContentScroll="True" />
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
And in code behind I have something like this:
private void CreateWeekGrid()
{
WeekSchedulerGrid.Children.Clear();
WeekSchedulerGrid.RowDefinitions.Clear();
WeekSchedulerGrid.ColumnDefinitions.Clear();
HeaderDaysGrid.Children.Clear();
CreateColumnDefinition(WeekSchedulerGrid, NUMBER_OF_COLUMNS, GRID_COLUMN_WIDTH);
CreateRowDefinition(ref WeekSchedulerGrid, _numberOfRows);
for(int row = 0; row < _numberOfRows; row++)
{
TextBlock textBlock = new TextBlock { Text = "Some row name"};
Grid.SetRow(textBlock, row);
Grid.SetColumn(textBlock, 0);
WeekSchedulerGrid.Children.Add(textBlock);
}
foreach (var item in _headerList)
{
HeaderDaysGrid.Children.Add(item);
}
}
private void CreateRowDefinition(ref SchedulerGrid grid, int numberOfRows)
{
for (int row = 0; row < numberOfRows; row++)
{
RowDefinition gridRow = new RowDefinition();
gridRow.MinHeight = 100;
gridRow.MaxHeight = 300;
grid.RowDefinitions.Add(gridRow);
}
}
private void CreateColumnDefinition(ref SchedulerGrid grid, int numberOfColumns, int columnWidth)
{
for (int colIndex = 0; colIndex < numberOfColumns; colIndex++)
{
ColumnDefinition gridCol = new ColumnDefinition();
grid.ColumnDefinitions.Add(gridCol);
if (colIndex == 0)
{
gridCol.Width = new GridLength(1, GridUnitType.Star);
gridCol.MaxWidth = 150;
}
else
{
gridCol.Width = columnWidth;
}
}
}
With this solution I am not sure how to implement 'fixed rows' and to have functionalities described on the picture. Code behind, XAML and binding or something else?
I probably can't join 'fixed rows' and all cells in one grid - because of scroll bar. 'Fixed rows', 'fixed header' and 'all cells' needs to be separate grid? But how to create such a layout and desired behavior? I'm really not sure.
In addition, this custom grid is used like scheduler and shows some custom events(user controls) in his cells, so I probably can't use DataGrid. And sorry for bad English.
I resolved the problem on next way. I have three grids. If you look at the image 'Fixed header', 'Fixed rows' and 'Gray surface for content' are separate grids now.
Also I have three scroll viewers. Only the scroll viewer for content is visible. Other scroll viewers are set as hidden, but I update theirs values in code behind when content scroll viewer position is changed.
XAML
<Grid">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="HeaderDaysScrolViewer" CanContentScroll="True" Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<Grid x:Name="HeaderDaysGrid" Margin="10,0,0,0" ShowGridLines="False"/>
</ScrollViewer>
<ScrollViewer x:Name="VerticalScrolViewer" CanContentScroll="True" Grid.Row="1" Grid.Column="0"
HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<Grid x:Name="VerticalDataGrid" ShowCustomGridLines="True" GridLineThickness="0.5" GridLineBrush="#FF434343"/>
</ScrollViewer>
<ScrollViewer x:Name="SchedulerScrolViewer" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Visible" ScrollChanged="SchedulerScrolViewer_ScrollChanged" Grid.Row="1" Grid.Column="1" Margin="10,0,0,5">
<Grid>
<Grid x:Name="WeekSchedulerGrid" ShowCustomGridLines="False" ScrollViewer.CanContentScroll="True"/>
</Grid>
</ScrollViewer>
</Grid>
Code behind
private void SchedulerScrolViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
HeaderDaysScrolViewer.ScrollToHorizontalOffset(e.HorizontalOffset);
OverviewTypesScrolViewer.ScrollToVerticalOffset(e.VerticalOffset);
}
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="HeaderDays" Height="35"/>
<RowDefinition x:Name="ScrollAreaRows" Height="600"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="HeaderRows" Width="35"/>
<ColumnDefinition x:Name="ScrollAreaColumns" Width="600"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="DataScroller" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" Grid.Row="1" Grid.Column="1">
<Grid x:Name="DataGrid" Height="{Binding Height, ElementName=ScrollAreaRows, UpdateSourceTrigger=PropertyChanged}" Widht="{Binding Width, ElementName=ScrollAreaColumns, UpdateSourceTrigger=PropertyChanged}">
</ScrollViewer>
the grid named "DataGrid" is the one that should scroll horizontally and vertically, while letting row0 and column0 of the outside grid to visually "stay static".
I'm making a custom panel more responsive to design my application.
But something bother me. In my override of MeasureOverride, i call Measure on all childs of my panel.
My childs are grid like the following :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="150" MaxWidth="220"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="150" MaxWidth="220"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Formulaire 1" Grid.ColumnSpan="4" Grid.Column="1" Style="{DynamicResource Heading1}"/>
<Label Content="Label1" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1"/>
<Label Content="Label2" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1"/>
<Label Content="Label3" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1"/>
<Label Content="Label4" HorizontalAlignment="Left" Grid.Row="4" Grid.Column="1"/>
<Label Content="Label5" HorizontalAlignment="Left" Grid.Row="5" Grid.Column="1"/>
<Label Content="Label6" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="3"/>
<Label Content="Label7" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="3"/>
<Label Content="Label8" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="3"/>
<Label Content="Label9" HorizontalAlignment="Left" Grid.Row="4" Grid.Column="3"/>
<Label Content="Label10" HorizontalAlignment="Left" Grid.Row="5" Grid.Column="3"/>
<Label Content="Message" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="6" Grid.Column="1" />
<TextBox Grid.Column="2" Grid.Row="1"/>
<TextBox Grid.Column="2" Grid.Row="2"/>
<TextBox Grid.Column="2" Grid.Row="3"/>
<TextBox Grid.Column="2" Grid.Row="4"/>
<TextBox Grid.Column="2" Grid.Row="5"/>
<TextBox Grid.Column="4" Grid.Row="1"/>
<TextBox Grid.Column="4" Grid.Row="2"/>
<TextBox Grid.Column="4" Grid.Row="3"/>
<TextBox Grid.Column="4" Grid.Row="4"/>
<TextBox Grid.Column="4" Grid.Row="5"/>
<TextBox Grid.ColumnSpan="3" Grid.Column="2" Grid.Row="6" Height="85" />
</Grid>
This grid have a min desired width of ~407 and a max desired width of ~547. +- 140 based on min and max width of columns.
But while calling Measure on it with an available width (far) superior to the max desired width. The width of his desiredsize remains at his minimal value.
What is not expected to alter the desired size according to the available space?
Except for the two columns with a min and max width, you've specified all rows and columns as "auto". "GridLength.Auto" calculates the width (or height) according to the criteria: The minimum width (or height) that suffices to fit the content.
Therefore, calling Measure() on the grid will return a DesiredSize that's exactly enough to fit the contents of the entire grid. No more, no less. You'll have to include at least one row and column definition using "star-sizing" for it to expand to the available width that you provide.
I decided to inherit from grid and override MeasureOverride to take in concideration star and min/max values to calculate the desired size. My panel work better and it shouldn't have side effect (at least I didn't noticed one yet).
In my opinion, it also respond better in a wrappanel, the child will try fo fit and then after the wrappanel will try to insert the next child in the same line, else make a line break.
I don't realy understand why it's not the default behavior.
For whom interested :
public class CustomGrid : Grid
{
protected override System.Windows.Size MeasureOverride(System.Windows.Size constraint)
{
//I assume Grid.MeasureOverride return the minimum size as desired size
Size MinimumDesiredSize = base.MeasureOverride(constraint);
//The remaining available space provided by the container
double ConstraintWidthRemaining = constraint.Width - MinimumDesiredSize.Width;
//The supposed remaining space if we assume than star columns width equals 0, will be calculated later
double WidthRemaining = ConstraintWidthRemaining;
//The width used in the remaining available space
double WidthUsed = 0;
//The number of column which are star sized
double StarSum = 0;
foreach (ColumnDefinition column in ColumnDefinitions.Where(c => c.Width.IsStar))
{
StarSum += column.Width.Value;
WidthRemaining += column.MinWidth;
}
foreach (ColumnDefinition column in ColumnDefinitions.Where(c => c.Width.IsStar))
{
double Ratio = column.Width.Value / StarSum;
double ColumnWidth = WidthRemaining * Ratio;
if (column.MaxWidth != 0.0)
{
if (ColumnWidth > column.MinWidth)
{
if (ColumnWidth <= column.MaxWidth)
{
WidthUsed += ColumnWidth - column.MinWidth;
}
else
{
WidthUsed += column.MaxWidth - column.MinWidth;
}
}
}
else
{
WidthUsed += ColumnWidth - column.MinWidth;
}
}
MinimumDesiredSize.Width += WidthUsed;
return MinimumDesiredSize;
}
}
I have a ScrollViewer that contains a Grid of images. I am not sure if using a grid is the correct choice. Here is a mockup image of what I want it to look like:
The red box represents the ScrollViewer. Inside it, is some type of layout container (Grid at the moment) that has two rows of images (green squares) but a dynamic amount of columns that can change at runtime, that can be scrolled to. Another condition is that I want to resize them so that 6 images (and only 6!) are always visible.
So in XAML:
<ScrollViewer Name="scrollViewer1">
<Grid Name="grid1"></Grid>
</ScrollViewer>
Then using C# I think I need to dynamically add columns. Then listening to scrollViewer1's SizeChanged event I need to dynamically calculate the size of the rows and columns so that 3 images are always in view. For example:
ColumnDefinition gridColN = new ColumnDefinition();
grid1.ColumnDefinitions.Add(gridColN);
Problem #1: Dynamically adding more columns makes the grid cells keep getting smaller and smaller and never scroll within the ScrollViewer until there are 10+ columns.
Expected result: The end result should be a horizontal stream of images, 6 visible at a time, that will resize when the outter container or window is resized. I am trying to size their width dynamically, but setting them to 1/3 of the containers width does not work.
Questions: Is this the correct approach? Should I use Grid inside the ScrollViewer? Do I have to manually calculate the sizes or is there a way to let them fill the container?
Grid width should be calculated as
grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count;
grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count;
This seemed to work for me:
XAML:
<DockPanel>
<ListBox Width="150" DockPanel.Dock="Left" BorderBrush="AliceBlue" BorderThickness="2">
<Button Name="AddColumn_Button" Width="100" Height="25" Content="Add Column" Click="AddColumn_Button_Click" Margin="5"/>
<Button Name="AddRow_Button" Width="100" Height="25" Content="Add Row" Margin="5" Click="AddRow_Button_Click" />
</ListBox>
<ScrollViewer Name="scrollViewer1" BorderBrush="AliceBlue" BorderThickness="2" SizeChanged="scrollViewer1_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="1">
<Grid Name="grid1" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
</DockPanel>
CODE BEHIND:
private void scrollViewer1_SizeChanged(object sender, SizeChangedEventArgs e)
{
SizeGrid();
}
private void AddColumn_Button_Click(object sender, RoutedEventArgs e)
{
ColumnDefinition gridColN = new ColumnDefinition();
grid1.ColumnDefinitions.Add(gridColN);
SizeGrid();
}
private void AddRow_Button_Click(object sender, RoutedEventArgs e)
{
RowDefinition row = new RowDefinition();
grid1.RowDefinitions.Add(row);
SizeGrid();
}
private void SizeGrid()
{
grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count;
grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count;
}
I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.
Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>
You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.