Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GridSplitter] Fix #339: resize both items when they are fixed size to avoid the change overflowing to the irrelevant Star-sized item #342

Merged
merged 9 commits into from
Mar 28, 2024
35 changes: 29 additions & 6 deletions components/Sizers/samples/GridSplitterPage.xaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<Page x:Class="SizersExperiment.Samples.GridSplitterPage"
<Page x:Class="SizersExperiment.Samples.GridSplitterPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
Expand Down Expand Up @@ -32,7 +32,10 @@
<ColumnDefinition MinWidth="100"
MaxWidth="300" />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="200"
MinWidth="100" />
<ColumnDefinition Width="200"
MinWidth="100" />
</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>
Expand All @@ -57,7 +60,7 @@

<Border Grid.Row="0"
Grid.Column="0">
<TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight='100'" />
<TextBlock Text="This is a Column with a Min 100 / Max 300 width - This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight='100'" />
</Border>
<Border Grid.Row="0"
Grid.Column="1">
Expand All @@ -67,6 +70,10 @@
Grid.Column="2">
<TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
</Border>
<Border Grid.Row="0"
Grid.Column="3">
<TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
</Border>

<Border Grid.Row="1"
Grid.Column="0">
Expand All @@ -78,7 +85,11 @@
</Border>
<Border Grid.Row="1"
Grid.Column="2">
<TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
<TextBlock Text="This is a fixed width column - This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
</Border>
<Border Grid.Row="1"
Grid.Column="3">
<TextBlock Text="This is a fixed width column - This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
</Border>

<!-- Column Grid Splitter -->
Expand All @@ -94,13 +105,25 @@

<!-- Row Grid Splitter -->
<controls:GridSplitter Grid.Row="1"
Grid.ColumnSpan="3"
Grid.ColumnSpan="4"
Height="16"
VerticalAlignment="Top">
<controls:GridSplitter.RenderTransform>
<TranslateTransform Y="-7" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>

<!-- Last 2 columns splitter -->
<controls:GridSplitter Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="3"
Width="16"
HorizontalAlignment="Left"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Auto">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-7" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
</Grid>
</Page>

50 changes: 36 additions & 14 deletions components/Sizers/src/GridSplitter/GridSplitter.Events.cs
Original file line number Diff line number Diff line change
Expand Up @@ -50,22 +50,33 @@ protected override bool OnDragVertical(double verticalChange)
var currentChange = _currentSize + verticalChange;
var siblingChange = _siblingSize + (verticalChange * -1); // sibling moves opposite

// Would changing the columnn sizes violate the constraints?
if (!IsValidRowHeight(CurrentRow, currentChange) || !IsValidRowHeight(SiblingRow, siblingChange))
{
return false;
}

// NOTE: If the column contains another row with Star sizing, it's not enough to just change current.
// The change will flow to the Star sized item and not to the sibling if the sibling is fixed-size.
// So, we need to explicitly apply the change to the sibling.

// if current row has fixed height then resize it
if (!IsStarRow(CurrentRow))
{
// No need to check for the row Min height because it is automatically respected
return SetRowHeight(CurrentRow, currentChange, GridUnitType.Pixel);
var changed = SetRowHeight(CurrentRow, currentChange, GridUnitType.Pixel);

if (!IsStarRow(SiblingRow))
{
changed = SetRowHeight(SiblingRow, siblingChange, GridUnitType.Pixel);
}

return changed;
}

// if sibling row has fixed width then resize it
else if (!IsStarRow(SiblingRow))
{
// Would adding to this column make the current column violate the MinWidth?
if (IsValidRowHeight(CurrentRow, currentChange) == false)
{
return false;
}

return SetRowHeight(SiblingRow, siblingChange, GridUnitType.Pixel);
}

Expand Down Expand Up @@ -114,22 +125,33 @@ protected override bool OnDragHorizontal(double horizontalChange)
var currentChange = _currentSize + horizontalChange;
var siblingChange = _siblingSize + (horizontalChange * -1); // sibling moves opposite

// Would changing the columnn sizes violate the constraints?
if (!IsValidColumnWidth(CurrentColumn, currentChange) || !IsValidColumnWidth(SiblingColumn, siblingChange))
{
return false;
}

// NOTE: If the row contains another column with Star sizing, it's not enough to just change current.
// The change will flow to the Star sized item and not to the sibling if the sibling is fixed-size.
// So, we need to explicitly apply the change to the sibling.

// if current column has fixed width then resize it
if (!IsStarColumn(CurrentColumn))
{
// No need to check for the Column Min width because it is automatically respected
return SetColumnWidth(CurrentColumn, currentChange, GridUnitType.Pixel);
var changed = SetColumnWidth(CurrentColumn, currentChange, GridUnitType.Pixel);

if (!IsStarColumn(SiblingColumn))
{
changed = SetColumnWidth(SiblingColumn, siblingChange, GridUnitType.Pixel);
}

return changed;
}

// if sibling column has fixed width then resize it
else if (!IsStarColumn(SiblingColumn))
{
// Would adding to this column make the current column violate the MinWidth?
if (IsValidColumnWidth(CurrentColumn, currentChange) == false)
{
return false;
}

return SetColumnWidth(SiblingColumn, siblingChange, GridUnitType.Pixel);
}

Expand Down
Loading