Allow setting tile column and row span
MODIFY
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:c="using:WalletWasabi.Fluent.Controls"
+ xmlns:c="clr-namespace:WalletWasabi.Fluent.Controls"
xmlns:conv="using:WalletWasabi.Fluent.Converters"
xmlns:vm="using:WalletWasabi.Fluent.ViewModels.ResponsivePanelDemo"
mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="850"
VerticalAlignment="Top"
UseLayoutRounding="False"
Background="LightGray">
- <Border CornerRadius="4" Margin="4" Background="Red" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1, 2" c:ResponsivePanel.RowSpan="1, 1, 1, 1" />
- <Border CornerRadius="4" Margin="4" Background="Green" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 1, 1" />
- <Border CornerRadius="4" Margin="4" Background="Blue" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 1, 1" />
- <Border CornerRadius="4" Margin="4" Background="Yellow" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 1, 1, 1" c:ResponsivePanel.RowSpan="1, 1, 2, 2" />
- <Border CornerRadius="4" Margin="4" Background="Black" ToolTip.Tip="{Binding $self.Bounds.Size}" c:ResponsivePanel.ColumnSpan="1, 2, 2, 3" c:ResponsivePanel.RowSpan="1, 2, 2, 2"/>
+ <Border Name="BorderRed" CornerRadius="4" Margin="4" Background="Red"
+ ToolTip.Tip="{Binding $self.Bounds.Size}"
+ c:ResponsivePanel.ColumnSpan="1, 1, 1, 2" c:ResponsivePanel.RowSpan="1, 1, 1, 1">
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <TextBox Text="{Binding #BorderRed.(c:ResponsivePanel.ColumnSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ <TextBox Text="{Binding #BorderRed.(c:ResponsivePanel.RowSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ </StackPanel>
+ </Border>
+ <Border Name="BorderGreen" CornerRadius="4" Margin="4" Background="Green"
+ ToolTip.Tip="{Binding $self.Bounds.Size}"
+ c:ResponsivePanel.ColumnSpan="1, 1, 1, 1"
+ c:ResponsivePanel.RowSpan="1, 1, 1, 1" >
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <TextBox Text="{Binding #BorderGreen.(c:ResponsivePanel.ColumnSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ <TextBox Text="{Binding #BorderGreen.(c:ResponsivePanel.RowSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ </StackPanel>
+ </Border>
+ <Border Name="BorderBlue" CornerRadius="4" Margin="4" Background="Blue"
+ ToolTip.Tip="{Binding $self.Bounds.Size}"
+ c:ResponsivePanel.ColumnSpan="1, 1, 1, 1"
+ c:ResponsivePanel.RowSpan="1, 1, 1, 1" >
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <TextBox Text="{Binding #BorderBlue.(c:ResponsivePanel.ColumnSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ <TextBox Text="{Binding #BorderBlue.(c:ResponsivePanel.RowSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ </StackPanel>
+ </Border>
+ <Border Name="BorderYellow" CornerRadius="4" Margin="4" Background="Yellow"
+ ToolTip.Tip="{Binding $self.Bounds.Size}"
+ c:ResponsivePanel.ColumnSpan="1, 1, 1, 1"
+ c:ResponsivePanel.RowSpan="1, 1, 2, 2" >
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <TextBox Text="{Binding #BorderYellow.(c:ResponsivePanel.ColumnSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ <TextBox Text="{Binding #BorderYellow.(c:ResponsivePanel.RowSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ </StackPanel>
+ </Border>
+ <Border Name="BorderBlack" CornerRadius="4" Margin="4" Background="Black"
+ ToolTip.Tip="{Binding $self.Bounds.Size}"
+ c:ResponsivePanel.ColumnSpan="1, 2, 2, 3"
+ c:ResponsivePanel.RowSpan="1, 2, 2, 2">
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <TextBox Text="{Binding #BorderBlack.(c:ResponsivePanel.ColumnSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ <TextBox Text="{Binding #BorderBlack.(c:ResponsivePanel.RowSpan), Converter={x:Static conv:ColumnHintsConverter.Instance}}"/>
+ </StackPanel>
+ </Border>
</c:ResponsivePanel>
</ScrollViewer>

Allow setting tile column and row span