Add initial support for fixed item width/height
MODIFY
WalletWasabi.Fluent/Controls/ResponsivePanel.cs
WalletWasabi.Fluent/Controls/ResponsivePanel.cs
@@ -7,6 +7,12 @@ namespace WalletWasabi.Fluent.Controls
{
public class ResponsivePanel : Panel
{
+ public static readonly StyledProperty<double> ItemWidthProperty =
+ AvaloniaProperty.Register<ResponsivePanel, double>(nameof(ItemWidth), double.NaN);
+
+ public static readonly StyledProperty<double> ItemHeightProperty =
+ AvaloniaProperty.Register<ResponsivePanel, double>(nameof(ItemHeight), double.NaN);
+
public static readonly StyledProperty<double> AspectRatioProperty =
AvaloniaProperty.Register<ResponsivePanel, double>(nameof(AspectRatio), double.NaN);
@@ -46,6 +52,18 @@ namespace WalletWasabi.Fluent.Controls
element!.SetValue(RowSpanProperty, value);
}
+ public double ItemWidth
+ {
+ get => GetValue(ItemWidthProperty);
+ set => SetValue(ItemWidthProperty, value);
+ }
+
+ public double ItemHeight
+ {
+ get => GetValue(ItemHeightProperty);
+ set => SetValue(ItemHeightProperty, value);
+ }
+
public double AspectRatio
{
get => GetValue(AspectRatioProperty);
@@ -158,8 +176,10 @@ namespace WalletWasabi.Fluent.Controls
}
}
- var itemWidth = width / totalColumns;
- var itemHeight = double.IsNaN(aspectRatio) ? height/ totalRows : itemWidth * aspectRatio;
+ var itemWidth = double.IsNaN(ItemWidth) ? width / totalColumns : ItemWidth;
+ var itemHeight = double.IsNaN(ItemWidth)
+ ? double.IsNaN(aspectRatio) ? height/ totalRows : itemWidth * aspectRatio
+ : ItemHeight;
for (var i = 0; i < children.Count; i++)
{

MODIFY
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
<!-- For adaptive height set RowDefinitions="Auto,*" and AspectRatio="0.5" -->
<!-- For fixed height set RowDefinitions="350,*" and AspectRatio="NaN" -->
+ <!-- When ItemWidth and ItemHeight are NaN AspectRatio and ColumnHints is using for sizing items -->
<Grid RowDefinitions="402,*">
<c:ResponsivePanel Grid.Row="0"
AspectRatio="NaN"
+ ItemWidth="228"
+ ItemHeight="126"
ColumnHints="1, 2, 3"
WidthTriggers="300, 450, 650"
UseLayoutRounding="False"
<Border CornerRadius="4" Margin="4" Background="Black" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 2, 2" c:ResponsivePanel.RowSpan="1, 2, 2"/>
</c:ResponsivePanel>
+ <!--<c:ResponsivePanel Grid.Row="0"
+ AspectRatio="NaN"
+ ItemWidth="NaN"
+ ItemHeight="NaN"
+ ColumnHints="1, 2, 3"
+ WidthTriggers="300, 450, 650"
+ UseLayoutRounding="False"
+ Background="LightGray">
+ <Border CornerRadius="4" Margin="4" Background="Red" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 1" />
+ <Border CornerRadius="4" Margin="4" Background="Green" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 1" />
+ <Border CornerRadius="4" Margin="4" Background="Blue" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 1" />
+ <Border CornerRadius="4" Margin="4" Background="Yellow" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 2" />
+ <Border CornerRadius="4" Margin="4" Background="Black" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 2, 2" c:ResponsivePanel.RowSpan="1, 2, 2"/>
+ </c:ResponsivePanel>-->
+
<DockPanel Grid.Row="1">
<Label Content="Transaction History" Margin="12,12,12,12" FontSize="16" DockPanel.Dock="Top"/>
<DataGrid AutoGenerateColumns="False" Margin="12,0,12,0">

Add initial support for fixed item width/height